eleventy
eleventy copied to clipboard
Add post number to page
I write to understand how to make Eleventy site smarter so that each post number is defined automatically. So far I assign post number manually like this:
collection in .eleventy.js:
eleventyConfig.addCollection("postsDescending", (collection) =>
collection.getFilteredByGlob("src/posts/*.md").sort((a, b) => {
return a.data.title.localeCompare(b.data.title, 'lv', { sensitivity: 'base' });
})
);
posts-list.njk component:
<ol>
{%- for post in collections.postsDescending %}
<li>
<a href="{{ post.url | url }}">{{ post.data.title }}</a>
</li>
{%- endfor -%}
{%- if includeAnnex %}
<li>
<a href="/">Annex</a>
</li>
{%- endif -%}
</ol>
post.njk layout uses getNextCollectionItem and getPreviousCollectionItem filters. Was thinking to use getCollectionItem filter, but unfortunately does not work so easy. F. ex. {{ getcollectionItem.lenght }} returns nothing. Is this the filter for getting post numbers?
{% set previousPost = collections.postsDescending | getPreviousCollectionItem(page) %}
{% set nextPost = collections.postsDescending | getNextCollectionItem(page) %}
{% set currentPost = collections.postsDescending | getCollectionItem(page) %}
<a rel="prev" class="link-sm" href="{{ previousPost.url | url }}">Previous</a>
<a rel="next" class="link-sm" href="{{ nextPost.url | url }}">Next</a>
<article class="post">
{{ content | safe }}
{{ number }}
</article>
number is defined in front matter manually in every post markdown file, f.ex. post-1.md:
---
title: lorem ipsum
tags:
- another-tag
layout: layouts/post.njk
number: 1
---
lorem ipsum
My CSS for ordered list numbers (dont know if is relevant):
ol li {
counter-increment: list;
position: relative;
}
ol li:before {
content: counter(list) "";
left: -2.5em;
position: absolute;
text-align: right;
width: 2em;
}
Is there a way to do it without pagination? Hope someone will help to figure out this one.