Brian's Website

Added Navigation and This Page

This adds a navigation bar, shows the pattern for front matter that adds pages to the navigation bar. This is also where I crated a How To page (no point in having a navigation bar until I had two pages).

  1. In /src added howto.md and copied/pasted my notes.[1]
  2. Installed the Eleventy Navigation Plugin with const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");.
  3. In .eleventy.js added `` above module.exports and added the plugin above return:
// Plugins
eleventyConfig.addPlugin(eleventyNavigationPlugin);
  1. In /partials, made navbar.html and added code:[2]
<nav>{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({ activeKey: eleventyNavigation.key, useAriaCurrentAttr: true }) | safe }}</nav>.
  1. In index.md front matter, added:
eleventyNavigation:
        key: Home
        order: 1
  1. In howto.md front matter, added:[3]
eleventyNavigation:
        key: How To
        order: 2

Footnotes

  1. As I built this website, I took notes about what I was doing in Drafts, an app I love very much! ↩
  2. This collects the EleventyNavigation keys and URLs (we are about to make those), and adds a function to correctly set aria-current="page". Putting all of that in <nav></nav> makes everything display correctly. ↩
  3. This pattern will repeat in all new pages except for blog entries. ↩