eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

Add post number to page

Open pagaidu opened this issue 5 years ago • 1 comments

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.

pagaidu avatar Jun 10 '20 10:06 pagaidu