今回はMiddlemanのテンプレートについてみていきます。
Middlemanでは多くのテンプレート言語を利用でき、HTML製作を簡単にします。
ERb、Haml、Saas、Scss、CoffeeScriptなど、多くのテンプレートエンジンをサポートしています。
＃テンプレートの基礎
標準のテンプレート言語はERbです。ERbは、変数を追加したり、メソッドを呼んだり、ループを使用したり、if文を使用したりする点を除けば、HTMLに似ています。
Middlemanの全てのテンプレートファイルはファイル名にそのテンプレート言語の拡張子がついています。
ERbで書かれたシンプルなインデックスページは、index.htmlというファイル名と拡張子であるerbを足して、index.html.erbという名前になっています。
このファイルは
|
1 |
<h1>Welcome</h1> |
のような標準のHTMLを含んでいます。
例えば、Rubyの変数やメソッド、ループなどを使用して
|
1 2 3 4 5 6 |
<h1>Welcome</h1> <ul> <% 5.times do |num| %> <li>Count <%= num %> <% end %> </ul> |
のように記述することができます。
＃レイアウト
レイアウトを使用すると、すべてのテンプレートで共通のHTMLの部分をひとつで管理できます。
Middlemanでは、レイアウトはヘッダとフッタの両方を含み、個別のページコンテンツをラップします。
最も基本的なレイアウトは、いくつかの個別のページコンテンツをもつ場合です。
yieldを使うとテンプレートでどこに個別のページコンテンツを読み込むのかを指定できます。
レイアウトをERbを使って作成すると、以下のように書くことができます。
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>My Site</title> </head> <body> <%= yield %> <!--ここで個別のコンテンツが読み込まれます --> </body> </html> |
個別のページのテンプレートはERbで書くことができました。
レイアウトに書かれている共通部分は不要になるので、例えば以下のようにコンテンツの部分だけを書けばよくなります。個別のページのテンプレートは、例えば
|
1 |
<h1>Hello World</h1> |
となります。
この場合、最終的な出力として得られるHTMLは、
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>My Site</title> </head> <body> <h1>Hello World</h1> <!-- yieldの部分で個別のページテンプレートが読み込まれます --> </body> </html> |
という形になります。
source/layouts/admin.erb
source/login.html.erb
