Skip to main content

Building an article list with nunjucks

1. Use postslist.njk as a starter #

from eleventy base blog theme

2. Adapt to your article. #

Use semantic elements to make sure they're accessible. Not worried about styles or classes yet.


3. Architecture - Article Parent/Child relationships #

Organize posts in post folder. To create subdirectories, add index.md in each one with title and parent keys. These index pages will serve as category pages, listing all articles that belong to that category (parent). Then, create other articles in the subdirectory.
Make sure you add the eleventyNavigation plugin installed. Add a title, parent, and eleventyComputed keys.

title: My Page Title
parent: My Parent Key
eleventyComputed:
  eleventyNavigation:
    key: "Building an article list with nunjucks"
    parent: "Tutorials"

Something I desired in jekyll liquid templates.

Turns out, using Javascript data files are faster than setting this data in front matter. So let's move this setting to tutorials/tutorials.11tydata.js. I'll break down each line of this file.

<code>some</code>

4. Getting categories #

Now that we've set the parent of each post, we can print the values in our template.

<span></span>

5. Getting read times #

Eleventy makes this so easy. Check out my post on how to do this the easy way and the hard way.

References #

Related Tags

eleventynunjucks