記事にタグを付けるためのプラグイン metalsmith-tags を使います。metalsmith-tags は大きく 2つの機能を提供しています。一つ目は、タグごとに記事をまとめた一覧ページを作成する機能であり、二つ目は各記事でタグを表示するための機能です。

インストール&設定

$ npm install metalsmith-tags --save
...
└─┬ metalsmith-tags@2.0.0 
...
$ 

各記事でタグを表示する

タグは各記事でこんな風に書いています。

---
title: some about ...
tags: Cent OS 7, fruit
---

このように書かれたタグ情報は、Metalsmith 内部では、次のような単なる文字列として取り扱われています。

tags: "Cent OS 7, fruit"

これでは、タグごとにスタイルを当てたり、リンクを貼ったりするのに不便です。metalsmith-tags を通すと、この文字列がタグごとに分解され、配列に置き換えられます。

tags: [
  { name: 'Cent OS 7', slug: 'cent-os-7' },
  { name: 'fruit', slug: 'fruit' }
]

テンプレートには、これが渡されるので、次のようにイテレータを使って処理できます。


{{#each tags}}
  <span class="tag"><a href="/topics/{{this.slug}}.html">{{this.name}}</a></span>
{{/each}}

記事に付けられた各タグは、name と slug の 2つの表現が渡されます。name は人が読むための表現で、slug は URL の一部などに使用するマシンフレンドリーな表現です。

タグごとの一覧ページを表示する

(この記事は書きかけです)