Metalsmith

EVERYTHING IS A PLUGINという思想の元に作られた静的サイトジェネレーター(static site generator)。
githubのリポジトリ：https://github.com/segmentio/metalsmith

metalsmith-permalinksプラグイン

静的サイトジェネレーター(static site generator)Metalsmithのプラグイン。
github:https://github.com/segmentio/metalsmith-permalinks

about.html(もしくはabout.md)をビルドして、about/index.htmlのようにしてくれる。

この記事の対象者

metalsmith-permalinksを使ったページを作ろうとしている人

ハイパーリンクについて

以下のようにすれば良かったものが、

<a href="about.html">about</a>

metalsmith-permalinksによって、以下のように変更しないといけなくなる。

<a href="about/">about</a>

metalsmith-collectionsを利用する

segmentio/metalsmith-collectionsを利用して、動的に行う。

metalsmith-colelctionsとは

他のソースファイルの情報を、collectionsフィールドに格納して利用出来るようにしてくれる。

実際の例を見てみる

maruLoop/metalsmith-simple-exampleにexampleがある。

1. metalsmith-collectionsのインストール

npm install --save-dev metalsmith-collections

2. metalsmith.jsonに記述

metalsmith.json

{
  "metadata": {
    "title": "My Blog",
    "description": "My second, super-cool blog."
  },
  "plugins": {
    "metalsmith-collections": { // 必ず、metalsmith-permalinksより上に記述する
      "posts": {
        "pattern":"posts/*.md"
      }
    },
    "metalsmith-markdown": {},
    "metalsmith-permalinks": { // 必ず、metalsmith-templatesより上に記述する
      "pattern": "posts/:title"
    },
    "metalsmith-templates": {
      "engine": "handlebars"
    }
  }
}

3. テンプレートファイルに記述する

metalsmith-collectionsプラグインによって、collections.postsオブジェクトが作られている。
また、metalsmith-permalinksプラグインによって、collections.postsオブジェクト内に、pathフィールドが追加されている。

template.html

<html>
<head>
    <title>{{ title }}</title>
    <meta name="description" content="{{ description }}">
</head>
<body>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <ul>
        {{#each collections.posts}} <!-- metalsmith-collectionsが作ったオブジェクト -->
        <li>
            <a href="{{this.path}}">{{this.title}}</a> <!-- metalsmith-permalinksがpathフィールドを追加してくれるので利用する -->
        </li>
        {{/each}}
    </ul>
</body>
</html>

metalsmith-permalinksを使った際のハイパーリンク