DEV Community

loading...
Cover image for List all posts using 11ty

List all posts using 11ty

binyamin profile image Binyamin Green Updated on ・1 min read

On the front page of a blog, we often list the title of every post on the site. Jekyll will automatically list all pages within the _post directory under one collection. 11ty, however, creates collections based on the tags. In other words, the only way to tell 11ty that your page is a blog post is by adding an extra tag. You may not want to add the same tag for every post, especially if you already categorize your posts.

One workaround fully documented feature is to create a custom collection. In .eleventy.js, use the addCollection method to define a new collection. You can call it posts, if you want to (you can also call it ice_cream). Use glob syntax to get only the pages inside your post folder. You can now find all your blog posts with the collections.posts variable.

Here's the code for your .eleventy.js file.

module.exports = function(eleventyConfig) {

    eleventyConfig.addCollection("posts", function(collection) {
        return collection.getFilteredByGlob("posts/**/*.md");
    });

}
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
nhoizey profile image
Nicolas Hoizey

In Pack11ty, it is used to automatically generate collections for each subfolder in the source folder… 😁

See github.com/nhoizey/pack11ty/blob/m...

Still Work In Progress for the pagination, through.

Collapse
binyamin profile image
Binyamin Green Author

Hold on - webmentions? Way to go!

Collapse
nhoizey profile image
Nicolas Hoizey

Webmentions are planned indeed. I use them on my personal website already.

Collapse
bayuangora profile image
Bayu Angora

I have this code for my prev next post ->

<div class="pagination">
<a class="prev" href="{{ prevPost.url }}">« Prev Post</a>
<a class="next" href="{{ nextPost.url }}">Next Post »</a>
</div>

But it doesn't works and always return to that current post. How to fix it?

Collapse
raymondcamden profile image
Raymond Camden

I did this for my blog. It was previously done in Jekyll.