Step by Step チュートリアル

4. レイアウト

Webサイトには通常複数のページがあり、このWebサイトでも違いはありません。

JekyllはページのためにHTMLと同様Markdownもサポートしています。MarkdownはHTMLと比較して少ない要素で済み、（段落とヘッダと画像という）シンプルな構成要素のページには素晴らしい選択です。2つ目のページでは、それに挑戦してみましょう。

rootにabout.mdを作成します。

構成はindex.htmlをコピーして、aboutページになるよう修正します。これを行う際の問題は、重複しているコードがあることです。スタイルシートをサイトに追加したくなったら、各ページの<head>に指定を追加しなければなりません。2ページだけならそう大変には思えないでしょうが、100ページある場合を想像してみてください。簡単な変更でも、長い時間がかかります。

レイアウトを作る

レイアウトを使うことは、より良い選択です。レイアウトはコンテンツを包み込むテンプレートです。それらは、_layoutsに入っています。

以下の内容で、_layouts/default.htmlにあなたの最初のレイアウトを作りましょう。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

index.htmlとほとんど同じことに気づいたのではないでしょうか。違いは、front matterが無いことと、ページのコンテンツがcontent変数に置き換わっていることです。contentは特別な変数で、ページが読み込まれたときに、そのレンダリングされたコンテンツを持っています。

index.htmlがこのレイアウトを使う用にするために、front matterにlayout変数をセットします。レイアウトがコンテンツを包み込むため、index.htmlに入れる必要があるのは、いかが全てです。

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

これを行ったあと、出力は以前と全く同じになります。レイアウトから、pageのfront matterにアクセスすることができます。今回の場合は、titleがindexページのfront matterで設定されていますが、レイアウトで出力されています。

Aboutページ

aboutページに戻り、index.htmlからコピーする代わりに、レイアウトを使用することができます。

about.mdを以下のようにします。

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

http://localhost:4000/about.htmlをブラウザで開き、新しいページを見てみましょう。

おめでとうございます、2つのページのWebサイトができました！　しかし、どうやってあるページから別のページへナビゲートしましょう？　それを見つけるため、引き続き読み進めてください。

Back