gf4
/
www
2
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Use `eleventy-navigation` plugin for navigation menu

master
Zach Leatherman 2019-11-11 15:39:48 -06:00
parent 0da708e993
commit c9018fa45b
6 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eleventy.js
View File

@ -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");

12
_includes/layouts/base.njk
View File

@ -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 %}>

6
about/index.md
View File

@ -1,9 +1,9 @@
---
layout: layouts/post.njk
title: About Me
tags:
- nav
navtitle: About
eleventyNavigation:
key: About Me
order: 2
templateClass: tmpl-post
---

6
archive.njk
View File

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

6
index.njk
View File

@ -1,8 +1,8 @@
---
layout: layouts/home.njk
tags:
- nav
navtitle: Home
eleventyNavigation:
key: Home
order: 1
---
<h1>Latest 3 Posts</h1>

2
package.json
View File

@ -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",