静的サイトアセンブラ Middlemanを試してみよう (2)

今回はMiddlemanのテンプレートについてみていきます。

Middlemanでは多くのテンプレート言語を利用でき、HTML製作を簡単にします。
ERb、Haml、Saas、Scss、CoffeeScriptなど、多くのテンプレートエンジンをサポートしています。

＃テンプレートの基礎

標準のテンプレート言語はERbです。ERbは、変数を追加したり、メソッドを呼んだり、ループを使用したり、if文を使用したりする点を除けば、HTMLに似ています。

Middlemanの全てのテンプレートファイルはファイル名にそのテンプレート言語の拡張子がついています。

ERbで書かれたシンプルなインデックスページは、index.htmlというファイル名と拡張子であるerbを足して、index.html.erbという名前になっています。

このファイルは

<h1>Welcome</h1>

1	<h1>Welcome</h1>

のような標準のHTMLを含んでいます。

例えば、Rubyの変数やメソッド、ループなどを使用して

<h1>Welcome</h1>
<ul>
  <% 5.times do |num| %>
    <li>Count <%= num %>
  <% end %>
</ul>

<h1>Welcome</h1>

<ul>

<% 5.times do |num| %>

<li>Count <%= num %>

<% end %>

</ul>

のように記述することができます。

レイアウトを使用すると、すべてのテンプレートで共通のHTMLの部分をひとつで管理できます。

Middlemanでは、レイアウトはヘッダとフッタの両方を含み、個別のページコンテンツをラップします。

最も基本的なレイアウトは、いくつかの個別のページコンテンツをもつ場合です。

yieldを使うとテンプレートでどこに個別のページコンテンツを読み込むのかを指定できます。

レイアウトをERbを使って作成すると、以下のように書くことができます。

<html>
<head>
  <title>My Site</title>
</head>
<body>
  <%= yield %>　<!--ここで個別のコンテンツが読み込まれます -->
</body>
</html>

<html>

<head>

</head>

<body>

<%= yield %>

</body>

</html>

個別のページのテンプレートはERbで書くことができました。
レイアウトに書かれている共通部分は不要になるので、例えば以下のようにコンテンツの部分だけを書けばよくなります。個別のページのテンプレートは、例えば

<h1>Hello World</h1>

1	<h1>Hello World</h1>

となります。

この場合、最終的な出力として得られるHTMLは、

<html>
<head>
  <title>My Site</title>
</head>
<body>
  <h1>Hello World</h1>    <!-- yieldの部分で個別のページテンプレートが読み込まれます -->
</body>
</html>

<html>

<head>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

という形になります。

source/layouts/admin.erb
source/login.html.erb