11ty

Last updated: 2020-05-20

• Navigation Plugin

After installing the plugin and adding it to the .eleventy.js configuration file, you can add eleventyNavigation meta information to each of your pages/posts:

---
tags: page
eleventyNavigation:
  key: Main Menu
  order: 10
---

You can customize the display text using the title key:

---
tags: page
eleventyNavigation:
  key: Module 1 Screen 1
  title: The Happy Dog
  order: 30
---

Building a Menu

The example code in the documentation for building a basic menu works perfectly:

<ul>
{%- for entry in navPages %}
  <li{% if entry.url == page.url %} class="my-active-class"{% endif %}>
    <a href="{{ entry.url | url }}">{{ entry.key }}: {{ entry.title }} (order: {{ entry.order }})</a>
  </li>
{%- endfor %}
</ul>

Next/Previous Links

You can build next and previous links by comparing the page.url with each entry.url:

{% set navPages = collections.all | eleventyNavigation %} {# {{ navPages | dump
| safe }} #} {%- for entry in navPages %} {% if entry.url == page.url %} {% if
navPages[loop.index0 - 1].url %}
<p>
  <a href="{{navPages[loop.index0 - 1].url}}">PREVIOUS</a>
</p>
{% endif %} {% if navPages[loop.index0 + 1].url %}
<p>
  <a href="{{navPages[loop.index0 + 1].url}}">NEXT</a>
</p>
{% endif %} {% endif %} {%- endfor %}

Add CSS to 11ty

One of the things that was a bit confusing when first setting up an 11ty project was getting certain files and folders in the project’s folder structure from showing up in the output _site folder.

An example might be if you wanted to add some CSS to your site and all your CSS files live in a folder at the root of your project called css. By default, 11ty will not output this folder into its _site.

In order to have 11ty copy the css folder through to the _site output folder, you’ll need to add what’s called a pass through in your 11ty configuration file.

First in your project folder, at the root make sure you’ve got a file called .eleventy.js.

.
├── .eleventy.js
├── _includes
├── _site
├── css
└── index.md

Next in your .eleventy.js configuration file, you’ll want to add this:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('css')
  return {
    passthroughFileCopy: true,
  }
}

What eleventyConfig.addPassthroughCopy('css') does is tells 11ty to look for a folder named css and copy it through to the output folder. The passthroughFileCopy: true is needed in order to use the addPassthroughCopy function.

Now when you either serve from the command line or look in the _site output folder, you’ll see that your css folder has also passed through. Now in your template file you can reference your stylesheet like this:

<link rel="stylesheet" href="/css/relax.css" />

And it’ll render because it’s in your output folder.