Jekyll レイアウトの使い方

投稿日: by keruu

Jekyllでブランクプロジェクトを作り、レイアウトを使ってみます。

複数のページを作る時は同じようなレイアウトになることが多いですが、Jekyllではレイアウトをレイアウトファイルとして部品化できます。テンプレートのようなものです。方法を見ていきます。

前回：Jekyll プロジェクトを作る

Step1. ブランクプロジェクトを作る

プロジェクト名はmy-siteにします。

$ jekyll new my-site --blank

次のコマンドを実行して、localhost:4000を開きます。以降は変更が自動的にビルドされます。

$ cd my-site
$ jekyll serve

Step2. ベタでHTMLを書く

とりあえずレイアウト等は使わずに、はじめから生成されているindex.htmlに普通にHTMLを書いてみます。

@index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>my-site</title>
 </head>

 <body>
  <header>header</header>
  content
  <footer>footer</footer>
 </body>
</html>

自動ビルド後は、_siteフォルダに上と同じindex.htmlが生成されているはずです。

ブラウザで表示すると次のような感じです。

Step3. レイアウトを使う

本題のレイアウトです。

_layoutsフォルダに、default.htmlを作成し、Step2で作ったHTMLをカットアンドペーストします。違いがわかるように文字を少し変えています。

@_layouts/default.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>my-site 2</title>
 </head>

 <body>
  <header>header 2</header>
  content 2
  <footer>footer 2</footer>
 </body>
</html>

もともとのindex.htmlは、中身を全て削除し、---で囲んだ書式でレイアウトを指定します。

@index.html

---
layout: default
---

これでindex.htmlのレイアウトとして、_layouts/default.htmlが使われます。

ブラウザで表示してみると、次のようにレイアウトの内容で表示できました。

Step3. コンテンツを使う

レイアウトにおいて、ページごとに異なるコンテンツを表示させるには、{{ content }}を使います。

@_layouts/default.html

略
 <body>
  <header>header 2</header>

  {{ content }}

  <footer>footer 2</footer>
 </body>
略

“content 2″を削除し、{{ content }}を追加しました。

index.html側はレイアウト指定の下にコンテンツを記述します。

@index.html

---
layout: default
---

hello world!

ブラウザで表示すると、index.htmlに記述したコンテンツが表示されているのがわかります。

Step4. インクルードを使う

複数のレイアウトを作ると共通部分がでてきます。共通部分は_includesフォルダに部品化できます。

まず、レイアウトファイルの共通部分を_includesフォルダ内のファイルに移します。例えば、headタグ部をhead.htmlに移します。

@_includes/head.html

<head>
 <meta charset="utf-8">
 <title>include head</title>
</head>

もともとのレイアウトファイルからインクルードファイルを呼び出すには{% include [ファイル名] %}を使います。

@_layouts/default.html

<!-- <!DOCTYPE html>
<html>
 {% include head.html %}
 <body>
略
Jekyll