Adding sections to an 11ty site

So this blog is powered by 11ty, a static site generator based on javascript. I wanted to add a Books section, which I've done now. Here's how I did it.

  1. Create a 'books' folder
  2. In this books folder, create books.11tydata.js (copied from the posts.11ty.js in the boilerplate I'm using)
    I've kept the contents of this file more or less the same so that I can still schedule book posts in the future.
  3. Created a bookslist.njk include
    This is a template that 11ty will use on the books page. It's almost the same as the posts file, except I'm now pulling images across from the books articles. In the yaml frontmatter for each book I'm an 'img' property, like this:

title: Falling Towards Aphelion and other stories
scheduled: 2022-05-05
layout: layouts/post.njk
img: /img/books/FallingTowardsAphelion.jpg

And then in the bookslist I can do this:

<img src="" /></a>
  1. Create the books page
    This was fairly straightforward, and very similar to the code for the archive page included in the template
<div id="books">
    {&#37; set postslist = collections.books &#37; }
    {&#37; include "bookslist.njk" &#37; }
</div>

I've wrapped the books list in a div with an id of 'books' so that I can then change the list style type with a little css.

  1. Add the books collection in eleventy.js

In the eleventy.js file I had to do the following:

  eleventyConfig.addCollection("books", function (collectionApi) {
    return collectionApi.getFilteredByTag("books");
  });

With that done, I had a working books collection.

Published