cobweb/xmitter-11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use eleventy-navigation plugin for navigation menu

Browse Source
This commit is contained in:
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 fs = require("fs");
const pluginRss = require("@11ty/eleventy-plugin-rss"); const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight"); const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss); eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight); eleventyConfig.addPlugin(pluginSyntaxHighlight);
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.setDataDeepMerge(true); eleventyConfig.setDataDeepMerge(true);
eleventyConfig.addLayoutAlias("post", "layouts/post.njk"); eleventyConfig.addLayoutAlias("post", "layouts/post.njk");

12
_includes/layouts/base.njk
View File

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

6
about/index.md
View File

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

6
archive.njk
View File

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

6
index.njk
View File

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

2
package.json
View File

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