This is a followup to my previous post, building this site using Node.js and Metalsmith.
The Plugin
After installing the plugin with npm:
npm install metalsmith-tags --save
I required the plugin in build.js
var tags = require('metalsmith-tags');
Placing it in the correct order of the Metalsmith pipeline required a bit of
trial and error. I ended up with it directly after the .destination method.
Metalsmith(__dirname)
.source('./src')
.destination('./build')
.use(tags({
handle: 'tags',
path: 'blog/:tag.html',
layout: 'tag.jade'
}))
// plugins continued
I defined some basic properties for the plugin. The path to the tag archive
will be simply blog/tag.html.
( e.g. the tag code will be located at
/blog/code)
The Tag Template
The tag.jade template is very similar to the blog.jade template.
//- tag.jade
extends layout
block content
h4 Posts about
//- get the tag url and name
a(href="/blog/#{tag}").tag #{tag}
ul.post-list
//- get each post with this tag
each post in pagination.files
li.post-item
h5.title
a(href="/#{post.path}")
=post.title
include partials/_details.jade
hr
Adding tags to a post
Adding tags to the post metadata is as simple as adding comma separated values
to tags:
---
title: Using Metalsmith - Adding Tags
slug: creating-this-site-part-2
publishDate: 2015-10-17
author: Eric Jinks
layout: post.jade
tags: code, nodejs, metalsmith
---
Displaying this on individual posts is in the post.jade template
is performed with an each statement.
if tags && tags.length > 0
.tags
each tag, index in tags
a(href="/blog/#{tag}").tag #{tag}
if index != tags.length -1
| ,
What Next?
(Read Part 3 here)
I like how some popular blog sites like Medium display an estimated reading time for each post.