Jekyllを勉強中（６）

今回は、Leap-dayテーマのレイアウトを説明し、index.htmlを作ってみます。

レイアウトファイルの置き場

Jekyllではレイアウトファイルの置き場は/_layoutsです。ただし、最初のスラッシュはJekyllのソースファイルのトップディレクトリです。 Linuxのルートディレクトリではないので注意してください。

Leap-dayテーマはgemで提供されているので、そのレイアウトはgemがおかれている場所の_layoutsディレクトリになります。

$ bundle info jekyll-theme-leap-day
  * jekyll-theme-leap-day (0.2.0)
    Summary: Leap Day is a Jekyll theme for GitHub Pages
    Homepage: https://github.com/pages-themes/leap-day
    Path: （ここにそのPCにおけるjekyll-theme-leap-day-0.2.0のパスが表示される）
    Reverse Dependencies: 
        github-pages (227) depends on jekyll-theme-leap-day (= 0.2.0)

そのディレクトリのdefault.htmlというファイルがleap-dayのレイアウトを記述したファイルになります。

レイアウトの構成

Leap-dayは次のようなレイアウト構成になっています。

画像をクリック（またはタップ）すると大きくなります。

上の青い部分が「ヘッダ」で、その中に「タイトル」「ディスクリプション」がある
黄色い部分が「バナー」でアイコンが並んでいる
左側の部分が「ナビゲーション」で、本文の見出しへのリンクが設置されている。なお、この部分はJavascriptで動的に生成されています。
中央の白い部分が「コンテンツ」

このうち、index.mdのような個々のファイルで変更できるのは「タイトル」「ディスクリプション」「コンテンツ」です。また、「ナビゲーション」の部分はコンテンツの見出しが自動的に反映されます。

タイトルとディスクリプション

タイトルとディスクリプションはdefault.htmlの20から23行目で記述されています。

<header>
  <h1>{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
  <p>{{ page.description | default: site.description | default: site.github.project_tagline }}</p>
</header>

HTMLに埋め込まれている{{と}}で囲まれている部分はLiquidという一種のプログラミング言語です。 LiquidのGItHubページでは、これを「テンプレート・エンジン」と呼んでいます。 h1タグのところがタイトルです。

page.title | default: site.title | default: site.github.repository_name

page.titleはページのタイトル。例えば、index.mdのフロントマターにtitle: インデックスページと書かれていたとすると、その文字列「インデックスページ」がpage.titleに代入される。それがなくて、コンテンツの最初が見出しの場合は、その見出しがpage.titleに代入される。ページのタイトルがなければ、nilが代入される。
site.titleはサイトのタイトル。 _config.ymlにtitle: サイトのタイトルと書かれていたとすると、「サイトのタイトル」がsite.titleに代入される。
site.github.repository_nameはGItHubのレポジトリーの名前。ローカルでJekyllを実行する場合は、jekyll-github-metadata gemがGitHubに問い合わせてレポジトリー名を取得している。
縦棒|はフィルターと呼ばれているLiquidの構文で、左の式の値が右への入力になる
default: はフィルターの動作を規定するコマンドで、入力が空文字列、nil、falseのいずれかであればデフォルト値（default:の次に書かれている式）をとる。それ以外はパイプから入力された式を値とする。

これよりこのLiquidのフィルタは

ページタイトルがあればページタイトルを出力
ページタイトルがなくてサイトタイトルがあれば、サイトタイトルを出力
ページタイトルもサイトタイトルもなければ、GitHubレポジトリ名を出力

となります。同様にディスクリプションのところも

ページディスクリプションがあればページディスクリプションを出力
ページディスクリプションが無くてサイトディスクリプションがあれば、サイトディスクリプションを出力
ページディスクリプションもサイトディスクリプションもなければ、GitHubレポジトリのディスクリプション（レポジトリのAboutに書かれている文章）を出力

となります。

index.mdのフロントマターには、原則としてタイトルとディスクリプションを記述するのが望ましいです。

コンテンツ

コンテンツはindex.mdのフロントマターを除いた本体部分です。拡張子が「.md」なので、Markdownで記述します。この部分でもLiquidが使えます。今回はLiquidを使いませんが、後の方で説明する機会があると思います。

サンプルに用いている「Jelyll tutorial for beginners」のindex.mdを次のように作成してみました。参考にしてください。

---
layout: default
title: はじめてのJekyll + GitHub Pages
description: JekyllとGitHub Pagesを使って静的ウェブサイトを作る
---

# はじめてのJekyll + GitHub Pages

## Written in Japanese

This website is written in **Japanese**.

## このウェブサイトは未完成です

現在、このウェブサイトは作成途中にあります。
書かれている内容も十分吟味されておりませんし、変更も多々あります。
完成までしばらくお待ちください。

## はじめてのJekyll + GitHub Pages

Jekyllは静的ウェブサイトを構築するためのフレームワークです。
また、GitHub PagesはJekyllをサポートし、ウェブサイトのスペースを提供するサービスです。

このウェブサイトは、GitHub Pagesでウェブサイトを作るためのチュートリアルです。

## 目次とリンク

（ここに各章へのリンクが箇条書きで提供される）

サイトタイトルとサイトディスクリプション

サイトタイトルとサイトディスクリプションも書いておきましょう。 _config.ymlに書き加えます。

theme: jekyll-theme-leap-day

title: はじめてのJekyll + GitHub Pages
description: JekyllとGitHub Pagesを使って静的ウェブサイトを作る

exclude:
  - README.md

Jekyllでテスト

Jekyllを動かしてテストしてみましょう。

$ bundle exec jekyll serve

おもこん

おもこんは「思いつくままにコンピュターの話し」の省略形です