Metalsmithのソースファイル解説

Metalsmith

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

この記事の対象者

Metalsmithのビルドまではしたことがある人
ない人はMetalsmith(静的サイトジェネレーター)の導入 - Qiita

ソースファイルの構造

ソースファイル(デフォルトでは、srcディレクトリにある)の解説。
ソースファイルの構造自体は、Jekyllとほぼ同じ。

下記のような構造になっている。

hoge.html

---
title: My First Post
date: 2012-08-20
template: post.html
---
<h1>hoge</h1>
<p>fugafuga</p>

YAML Front-Matter

ソースファイル上部の---で囲まれた部分は、YAML Front-Matterと呼ばれる。
メタ情報を書いたりするのに利用される。

hoge.md

---
title: My First Post
date: 2012-08-20
template: post.html
---

YAML Front-Matterと呼ばれているが、JSON形式でも書ける。

hoge.md

---
{"title":"My First Post", "date": "2012-08-20", "template": "post.html"}
---

HTML部分

ソースファイルの下部は、HTMLなど書くことが出来る。
※metalsmith-markdownプラグインを入れることで、HTMLでなくmarkdownを書くことも出来る

ソースファイルをビルドすると

このソースをビルドすると、

hoge.html

---
title: My First Post
date: 2012-08-20
template: post.html
---
<h1>hoge</h1>
<p>fugafuga</p>

下記のようなJSONとして扱われ

{
  "title":"My First Post",
  "date": "2012-08-20",
  "template": "post.html",
  "contents": "<h1>hoge</h1><p>fugafuga</p>"
}

このJSONが、テンプレートエンジンでレンダリングされる際に使われる。