第3章セクション11　レイアウトの仕組み

この章では、Jekyllの特徴であるLiquidを使ったレイアウト設計について学びます。 Jekyllのレイアウトは、HTMLとLiquidテンプレート言語を組み合わせて作成されており、動的にコンテンツを生成することができます。

今回はMinimaがレイアウトで何をしているのかを調べることにより、Liquidの基本的な使い方とJekyllのレイアウトの仕組みを理解します。

Minimaの置かれている場所

まず、インストールされたMinimaテーマのファイルがどこにあるかを確認しましょう。 Minimaの場所は、Bundlerで調べることができます。

$ bundle info minima
  * minima (2.5.1)
        Summary: A beautiful, minimal theme for Jekyll.
        Homepage: https://github.com/jekyll/minima
        Path: /home/（ユーザ名）/.local/share/mise/installs/ruby/3.3.4/lib/ruby/gems/3.3.0/gems/minima-2.5.1
        Reverse Dependencies: 
                github-pages (232) depends on minima (= 2.5.1)
$ cd  /home/（ユーザ名）/.local/share/mise/installs/ruby/3.3.4/lib/ruby/gems/3.3.0/gems/minima-2.5.1
$ ls
LICENSE.txt  README.md  _includes  _layouts  _sass  assets
$

表示されたPathのディレクトリ（Minimaのディレクトリ）に移動し、ディレクトリをリスティングしました。

さらに詳しく調べると、Minimaのディレクトリは以下のような構成になっています。

LICENSE.txt
README.md
_includes
  disqus_comments.html
  footer.html
  google-analytics.html
  head.html
  header.html
  icon-github.html
  icon-github.svg
  icon-twitter.html
  icon-twitter.svg
  social.html
_layouts
  default.html
  home.html
  page.html
  post.html
_sass
  minima
    _base.scss
    _layout.scss
    _syntax-highlighting.scss
  minima.scss
assets
  main.scss
  minima-social-icons.svg

この中にある_layoutsディレクトリの下にあるのが、レイアウトに関するファイルです。

Jekyllのビルドとレイアウト

Jekyllがビルドをするとき、どのようにレイアウトするかを説明します。

ファイルのフロント・マターから、layoutキーをもつマッピング（例えばlayout: home）を探す
ファイルのコンテンツに、Liquid、MarkdownのHTMLへの変換を、その順でおこなう
得られたHTMLファイルをcontentというLiquidの変数に自動的に代入される
/_layouts ディレクトリの中から、指定されたレイアウトファイル（例：home.html）を探す。3のcontent変数の内容は保持される
レイアウトファイルにLiquidを適用する。そのとき、レイアウトファイルの {{ content }}という記述は、ステップ2で作成したHTMLの中身で置き換わる
レイアウトファイル（例えばhome.html）のフロント・マターに、別のレイアウト指定（例えばlayout: default）があれば、_layouts/default.htmlをレイアウトとして、3から5までの手順を繰り返す
すべての入れ子構造が解消され、一つの完成したHTMLデータができあがると、それを _site/ ディレクトリに書き出す

この説明にひとつ付け加えなければならない点があります。

/_layoutsに探しているレイアウトファイルが無いときは、テーマのディレクトリの_layoutsを探しに行く。

ということです。

my-blogのソース・ルートには_layoutsディレクトリがないので、Minimaのレイアウトが使われていました。

Minimaのhomeレイアウト

それでは、Minimaのレイアウトファイルhome.htmlを見てみましょう。

---
layout: default
---

<div class="home">
  {%- if page.title -%}
    <h1 class="page-heading">{{ page.title }}</h1>
  {%- endif -%}

  {{ content }}

（中略）

</div>

フロント・マターでレイアウトdefaultを指定しており、入れ子構造になっている
{%- や -%} のようにハイフンを付けると、タグの前後にある改行や空白を削除する（トリミングする）
{%- if page.title -%}はLiquidのifタグで、もし、page.titleという変数が定義されていれば、{%- endif -%}までの部分を出力する
page.titleは、ソースファイルのフロント・マターでtitle: XXXXという記述があればXXXXに置き換えられる。my-blogのindex.mdにはこの記述がないので出力されていない
{{ content}}にはソース・ファイルの内容が代入される
この後はブログ記事へのリンク・リストを生成する部分が続く（ここでは説明省略）

Minimaのdefaultレイアウトとファイルのインクルード

レイアウトdefaultは基本となるレイアウトで、他の3つのレイアウトhome.html、page.html、post.htmlのすべてのレイアウトが指定しています。 defaultの機能は次の2つです。

サイト全体に対するスタイルシートの適用
ヘッダとフッタの生成

ファイルは短いので、その全体をここに示します。

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: "en" }}">

  {%- include head.html -%}

  <body>

    {%- include header.html -%}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

    {%- include footer.html -%}

  </body>

</html>

この中で{%- include head.html -%}というのは、/_includesディレクトリの下にあるhead.htmlというファイルをここにインクルード（挿入）する、という意味です。インクルードした3つのファイルの内容は次のようなものです。

head.html: HTMLのヘッド・セクション（メタデータやスタイルシートなど）の記述
header.html: サイトのヘッダの部分（サイトのタイトルなど）
footer.html: サイトのフッタの部分（著者、SNSリンク、ディスクリプションなど）

このセクションのまとめ

このセクションで見てきたように、Jekyllは、サイトのページを部分に分解、整理し、構造的にレイアウトを構成しています。このような構造化はJekyllのみならず、一般にサイトを構築する際に有効な方法です。 Jekyllでは、それぞれのパーツを別ファイルに分けることもしているので、修正、保守がやりやすくなっています。

フロント・マターのlayoutで指定されたファイルを_layoutsディレクトリ、またはテーマの_layoutsディレクトリ内のレイアウトファイルとして用いる
includeタグを用いて、部品をファイルにして整理する

このような構造を理解することによって、レイアウトのカスタマイズ、あるいはユーザ独自のテーマを作成することができます。

第3章 セクション11 レイアウトの仕組み