今回は、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