[Middleman 3]初めてのMiddleman：レイアウト機能でレイアウトとコンテンツを分離する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回のrbenv, bundler 環境でMiddlemanを使ったHello Worldで環境構築とbuild/serverコマンドを使ってブラウザにHello Worldと表示するところまで試しました。

今回はレイアウト機能を使ってレイアウトとコンテンツを分離してみます。詳しくは公式ドキュメントのレイアウトを参照してください。

レイアウトを作る

レイアウトファイルはsource/layouts/ディレクトリの中に置きます。特に指定をしなければすべてのHTMLにlayout.erbのレイアウトが適用されます。まずはこのlayout.erbを作ってみます。前回作ったindex.html.erbの中身をコピーして<body>タグの中身を下記のように書き換えます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>test</title>
  <link rel="stylesheet" href="">
</head>
<body>
  <!-- このyieldがコンテンツと置き換わります -->
  <%= yield %>
</body>
</html>

次にindex.html.erbのHTMLを消して<body>タグの中に表示したい内容に書き換えます。

<p>Hello World</p>

これで$ middleman serverを実行してみると前回と表示は変わりませんがレイアウトとコンテンツを分離できるようになります。

コンテンツ側からタイトルタグの中身を指定する

今のレイアウトファイルではタイトルにtestと表示されるだけです。そこでコンテンツ側にYaml FrontMatterを使ってタイトルを指定できるようにし、レイアウト側でそのタイトルを呼び出します。Yaml FrontMatterの詳しい解説は公式ドキュメントのFrontmatterをどうぞ。

index.html.erb

Yaml FrontMatterは---で囲んだYamlを記述します。FrontMatterで指定したデータはレイアウトやそのページ自身からもオブジェクトとして呼び出すことができます。このYamlはtitle以外にも自由に設定でき、配列を持たせることもできます。

---
title: Hello World
---
<p>Hello World</p>

layout.erb

コンテンツ側で指定したYaml FrontMatterを呼び出すにはcurrent_page.data.オブジェクトを指定します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= current_page.data.title || "The Middleman" %></title>
  <link rel="stylesheet" href="">
</head>
<body>
  <%= yield %>
</body>
</html>

このレイアウト機能はJekyllを使ったことのある人であればJekyllのレイアウト指定とほぼ同じだと感じると思います。違う点としてはconfig.rbにパスを基準とした指定ができることと入れ子レイアウト次のYaml FrontMatter指定ができないことですね。Middlemanで入れ子レイアウトを指定する際はconfig.rbかレイアウトファイルに<% wrap_layout :layout do %>ごにょごにょ<% end %>と指定します。

次回はパーシャル（読み込み専用ファイル）を試して見たいと思います。

初めてのMiddleman：パーシャルを使ったコンテンツのモジュール化