Use eleventy-navigation plugin for navigation menu

2019-11-11 15:39:48 -06:00 · 2019-11-11 15:39:48 -06:00 · c9018fa45b
commit c9018fa45b
parent 0da708e993
6 changed files with 20 additions and 14 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@ -2,10 +2,12 @@ const { DateTime } = require("luxon");
 const fs = require("fs");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginNavigation = require("@11ty/eleventy-navigation");

 module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginRss);
  eleventyConfig.addPlugin(pluginSyntaxHighlight);
+  eleventyConfig.addPlugin(pluginNavigation);
  eleventyConfig.setDataDeepMerge(true);

  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@ -12,11 +12,13 @@
  <body>
    <header>
      <h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
-      <ul class="nav">
-        {%- for nav in collections.nav | reverse -%}
-        <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
-        {%- endfor -%}
-      </ul>
+      <!-- Read more about `eleventy-navigation` at https://github.com/11ty/eleventy-navigation -->
+      {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
+        listClass: "nav",
+        listItemClass: "nav-item",
+        activeListItemClass: "nav-item-active",
+        activeKey: eleventyNavigation.key
+      }) | safe }}
    </header>

    <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
--- a/about/index.md
+++ b/about/index.md
@ -1,9 +1,9 @@
 ---
 layout: layouts/post.njk
 title: About Me
-tags:
-  - nav
-navtitle: About
+eleventyNavigation:
+  key: About Me
+  order: 2
 templateClass: tmpl-post
 ---

--- a/archive.njk
+++ b/archive.njk
@ -1,8 +1,8 @@
 ---
 layout: layouts/home.njk
-tags:
-  - nav
-navtitle: Archive
+eleventyNavigation:
+  key: Archive
+  order: 3
 permalink: /posts/
 ---

--- a/index.njk
+++ b/index.njk
@ -1,8 +1,8 @@
 ---
 layout: layouts/home.njk
-tags:
-  - nav
-navtitle: Home
+eleventyNavigation:
+  key: Home
+  order: 1
 ---

 <h1>Latest 3 Posts</h1>
--- a/package.json
+++ b/package.json
@ -5,6 +5,7 @@
  "scripts": {
    "build": "npx eleventy",
    "watch": "npx eleventy --watch",
+    "serve": "npx eleventy --serve",
    "debug": "DEBUG=* npx eleventy"
  },
  "repository": {
@ -23,6 +24,7 @@
  "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
  "devDependencies": {
    "@11ty/eleventy": "^0.9.0",
+    "@11ty/eleventy-navigation": "^0.1.0",
    "@11ty/eleventy-plugin-rss": "^1.0.7",
    "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
    "luxon": "^1.12.0",