Day 5 - Fleshing out the index

So we're motoring now. This will be the fifth (sixth?) post that I've written whilst building out my new site using 11ty. Everyday is a school day as they say.

Today, I wanted to focus on the index.

I've added a little bit of content at the top of my index.md file as an introductory paragraph or two.

Below this, I want to display a list of latest posts. Because I've only got 5 posts so far, I won't need pagination but this will definitely be something that'll need to be rolled in at some point soon.

Because 11ty isn't really a blogging engine, it doesn't have a search function built in, although I understand this can be added using a third party plugin. Maybe something worth investigating at some point as well. Saying that, my old site never had a search function. Is it needed?

I guess the Index page will have the latest 5 or 10 posts and then a link to the archive. My old site used to display the latest 3 which always felt a little limiting, but obviously didn't feel too limiting otherwise I'd have changed it!

Templating language

So I tripped up here when I was doing this so I'm adding this in first. 11ty uses liquid as a templating language by default. I've jumped in and am working with nunjucks on this project and the two templating languages work slightly differently. When I add code to the markdown files, 11ty is expecting liquid language and kicks up errors because of the differences between liquid & nunjucks which has resulted in me spending a good while trying to figure out why what I was doing wasn't working.

Turns out, we need to set the default markdown templating engine within our .eleventy.js config file. Open that up and add the following: -

module.exports = {
 markdownTemplateEngine: "njk"
}

Don't forget this is going into an array so if you've got other config code in here (like the directories we set up on day 2), then you'll need to add a closing comma!

Tags

So, looking through the 11ty docs, I can use the collections feature to post a list of all my content on the front page, but this will also post everything, which isn't the desired outcome. I have added some other content pages which aren't really blog posts so shouldn't be included as part of this collection.

To differentiate normal pages with content posts, we add tags to our content posts. These tags go in to our front matter section of each piece of content.

There's several ways of adding tags to the front front matter depending on how many tags or how you want to lay them out. I've opted to use an array for my tags on each page just to keep it simple but I do urge you to go read the docs to explore the other ways you can tag your posts.

In my front matter, I add another line for tags with an array as the result.

tags: ['post', '11ty']

As you can see, the example above is tagged post and 11ty which means it'll show up in both the post and 11ty collections. I'm using post as a generic tag to bundle all my blog posts together.

Now we've tagged our content, 11ty can form groups of posts which relate to each other and display them accordingly!

Displaying the posts

So now we're all tagged up, we want to add our latest posts to our index. We'll do this by adding some code that will display the title of each piece of content tagged post, in a nicely ordered list.

<ul>
{%- for post in collections.post -%}
  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>

Which works great, except I want the date in reverse order.

So in our for loop, we want to add in a reverse tag

{%- for post in collections.post | reverse -%}

and now we have a list of our latest posts, in date order, newest at the top!

Woah, hold your horses

So the code above will actually just post a list of all content we have, tagged post. That could be 3 posts, it could be 300 and that list'll get pretty long.

So what we're going to do is adapt the code above and apply a limit to the amount of posts it displays.

So we need to apply an if loop between the for loop and the HTML output.

{% if loop.index0 < 3 %} ... {% endif %}

Here, the original for loop creates an array of posts which it then displays. This indexed array is called loop. Our new if statement tells the loop to only display the first 3 items.

Perfect; and it works!

Lastly, lets now add a link to our archive page; although we haven't built it yet. That's tomorrows task!

For now, it'll be a link below the 3 items linking to a page called Archives

<a href="/archives" title="See more in the Archive">Hit the Archive</a>

Next time...

And there we have it, an index page with an introductory paragraph & a list of the latest posts and a link to the archive!

Next time, we'll actually create the archive.

Ideally, we would want a list of tags at the top allowing the visitor to drill down into the specific content they're looking for, and then below that, a list of the content, sorted by date order with pagination.

I assume that's possible?

A.