Jekyllのテーマを自作する 基本編 – 第3回 – 基本レイアウトを作成する

こんばんは。第3回はサイトの基本となるレイアウトを作成します。よろしくお願いします。

Jekyllのテーマを自作する 基本編 記事一覧

• Jekyllのテーマを自作する 基本編 – はじめに –
• Jekyllのテーマを自作する 基本編 – 第1回 – 初期データを作成する
• Jekyllのテーマを自作する 基本編 – 第2回 – 設定ファイルを作成する
• Jekyllのテーマを自作する 基本編 – 第3回 – 基本レイアウトを作成する ←いまここ
• Jekyllのテーマを自作する 基本編 – 第4回 – Sass（CSS）でスタイルを作成する
• Jekyllのテーマを自作する 基本編 – 第5回 – titleタグとmeta descriptionを作成する
• Jekyllのテーマを自作する 基本編 – 第6回 – トップページに記事一覧を作成する
• Jekyllのテーマを自作する 基本編 – 第7回 – ページネーションを作成する
• Jekyllのテーマを自作する 基本編 – 第8回 – 記事のフィード（feed.xml）を作成する
• Jekyllのテーマを自作する 基本編 – 第9回（終） – まとめ

前回までのおさらい

今回は、サイトの核となる基本レイアウトの作成です。前回まででテーマフォルダの中身はこんな感じになってます。

.
 ├── .git
 ├── .gitignore
 ├── _config.yml
 ├── _includes
 ├── _layouts
 │   ├── default.html
 │   ├── page.html
 │   └── post.html
 ├── _posts
 ├── _sass
 ├── assets
 │   ├── css
 │   ├── images
 │   └── js
 └── index.html
 

また、サイトの設定ファイルも以下のように作成済みです。

サイトのメインとなるHTMLを作る

まずはサイトの最も基本となるHTMLを作成します。ひとまず、「index.html」にて作成していきます。なお、当シリーズでは、role属性やmicrodataなどは省略します。よしなに。

「index.html」をこんな感じに作成しました。

ページを作る際の注意

まず、最上部にトリプルダッシュ（ハイフン3つ）で囲まれた部分が、前回までに説明しました「Front-matter」というやつです。基本的に、Jekyllで作成するページには必ず必要だと思ってください。Front-matterがないと、設定ファイルで設定したサイトタイトルなどが変換されず、正しく出力できません。

究極的なことを言えば、ハイフン3つを2列、ページの最上部に記述すればOKです。

で、Front-matterで「layout: default」と設定していますが、これは、「_includes/default.html」というレイアウトファイルを適用するという意味です。レイアウトファイルについて説明していきます。

他にも普通のHTMLと違う部分がいくつかありますので、説明していきます。

その他補足

2つのスタイルシートをCDNから読み込んでいます。ひとつは、デフォルトのスタイルをよしなにしてくれるNormalize.css、もうひとつは、TwitterやGithubのアイコンを表示させるために、Font Awesomeを読み込んでいます。

変数の取得（出力）について

レイアウトを作成していく前に、Jekyllの設定値の取得（出力）方法について説明します。

設定ファイル「_config.yml」で設定した値を使う

設定ファイルで設定した値の出力は、 {{ site.○○ }} で取得します。上記index.htmlの47行目では {{ site.author.name }} で著者名を取得し出力しています。50行目以降ではGithubアカウント名とTwitterアカウント名を取得しています。

各ページ固有の値を使う

後述しますが、ページタイトルやページのURLなどは {{ page.○○ }} で取得します。headタグ内canonicalでは {{ page.url }} でページのURLを取得しています。

{{ page.url | replace:'index.html','' | absolute_url }}">

サイト内リンクの書き方

サイト内リンクの書き方はこのように書くのがお作法となります。

{{ '/assets/css/style.css' | relative_url }}

このようにrelative_urlを指定することで、設定ファイルで設定した設定した「baseurl」（サイトのドメイン以下のパス）を先頭に付与した相対URLに変換して出力してくれます。。「baseurl」が空の場合は /assets/css/style.css となり、「baseurl」に「/mysite」と設定されている場合は /mysite/assets/css/style.css と出力されます。

また、httpからはじまる絶対URLを出力する場合は「absolute_url」を使います。

{{ '/assets/css/style.css' | absolulte_url }}

if文を使う

ページ内でif文を使うことができます。以下は「site.author.github」の値が存在する場合に、中身を表示させる処理です。もちろん {% else %} も使えます。

{% if site.author.github %}
  <i class="fa fa-github"></i>
{% endif %} 

Jekyllの基本となるレイアウトファイルについて

さて本題です。Jekyllでは、いくつかの基本レイアウトを作成し、それらを各ページ（投稿や固定ページ）で選択して反映させる、といった形でページレイアウトを形成します。

「_layouts」フォルダに、あらかじめ3つのファイルが作成されています。この「_layouts」フォルダ内のファイルが、レイアウトのテンプレートファイルとなります。

_layouts
 ├── default.html
 ├── page.html
 └── post.html

基本的に、「default.html」はサイトの基本レイアウト、「page.html」は固定ページ用レイアウト、「post.html」は投稿記事用レイアウトとして使用します。

デフォルトレイアウト「default.html」は、初期状態でこのように {{ content }} とだけ書かれています。

Front-matterで「layout: default」を設定したファイルに記述された内容が、この「_layouts/default.html」内の {{ content }} 部分に反映されて出力されます。つまり、今の状態であれば、index.htmlのFront-matter以下をそのまま出力します。

サイトの全ページ共通のデフォルトレイアウトを作成する

まず、全てのページに共通のデフォルトレイアウトを作成します。トップページ、固定ページ、投稿記事、いずれにも共通するレイアウト部分の作成となります。これには「_layouts/default.html」を使います。

上で作成した「index.html」から「_layouts/default.html」へ、共通部分を移植します。

$ jekyll serve

して、http://127.0.0.1:4000 をプレビューしてみましょう。このように表示されていればOKです。「index.html」に記述した内容が、「default.html」の {{ content }} 部分にちゃんと反映されています。

固定ページのレイアウトを作成する

固定ページ、というのはWordPressの用語ですが、分かりやすいようにそう呼びます。要はブログ記事とは違う、投稿日時やカテゴリーなどの要素を持たない、一枚のページだと思ってください。例えば、自分のプロフィールページなどが当てはまります。

固定ページのレイアウトには「_layouts/page.html」を使います。

「page.html」にはあらかじめデフォルトレイアウトを読みこむ記述がされていますので、そのまま使います。

つまり、「page.html」も「default.html」を通して出力することで、先ほど作ったページの共通部分を利用することができます。

「page.html」に、固定ページ専用のレイアウトを作成します。

ややこしいのでもう一度説明しますが、これから作成する固定ページ（例えばabout.md）から「layout: page」でこのレイアウトを呼び出すと、「page.html」のレイアウトが反映され、さらに「page.html」は「layout: default」を指定しているので「default.html」のレイアウトを反映して出力される、というあんばいです。

試しに、プロフィールページ「about.md」を作成します。

$ touch about.md

ちなみに、htmlファイルでもOKですが、.mdや.markdownファイルにすることで、本文をマークダウン形式で出力することができます。

「about.md」の中身を記述します。

「permalink: /about/　」を設定しているので、URLは「http://127.0.0.1:4000/about/」となります。

$ jekyll serve

して、「http://127.0.0.1:4000/about/」にアクセスしてプレビューしてみましょう。

ページのFront-matterで設定したページタイトルや説明文が {{ page.○○ }} の部分に反映されています。また、本文は {{ content }} の部分に出力されています。

投稿記事のレイアウトを作成する

お次は投稿記事のレイアウトです。基本的には今までと同じです。

レイアウトファイルは「_layouts/post.html」を使います。

{{ page.date }} で投稿日時を取得します。

記事の日付の設定についてはこちらをご覧ください。

dateフォーマットについてはこちらをご覧ください。

テスト記事を作成します。

$ touch _posts/2017-02-21-hello-world.md

中身はこんな感じに記述します。

Front-matterで「layout: post」を指定します。これによって、「_layouts/post.html」のレイアウトが反映されます。

「http://127.0.0.1:4000/2017/02/21/hello-world.html」をプレビューします。

日付などもちゃんと反映されました。なお、前後の記事へのリンクについては、第7回のページネーションの記事で作成します。

「default」「page」「post」以外のレイアウトを作りたい

ここで出てきたもの以外のレイアウトを使うこともできます。例えば「fuga」というレイアウトを使いたい場合は、「_layouts」フォルダに「fuga.html」を作成し、使いたいページのFront-matterで「layout: fuga」を指定します。

まとめ

レイアウトの作成については以上です。今回紹介したように、基本的には「default」を全てのページの基盤とし、「page」「post」のレイアウトも「default」を基盤に作成していくことをおすすめします。

次回はスタイルシート（Sass）についてです。