WindowsでのJekyllの使い方 (その2)

前回は、WindowsへのJekyllのインストール、テーマ（theme）の適用、インターネット公開用ファイルの作成まで紹介しました。
今回は、ブログの投稿記事、固定ページおよびカスタマイズ（変数の定義、タグの使用方法）のメモです。

注1
Jekyllの細かい説明は、公式ページJekyllを参考にして下さい。
日本語版Jekyllは、2015年から更新が止まっています。



注2
Jekyllを初めて使う場合には、希望する構成に近いテーマをカスタマイズするのが早道です。
テーマの適用については前回を参照してください。
Jekyllとに一緒にインストールされるMinimaは、カスタマイズに必要なファイルやフォルダーが無い最小構成なので、作り上げるのは大変。
しかし、その代わりに無駄だったり意味不明なコードが入らないメリットがあります。

注3
ファイルの編集には、テキストエディタ（文字コードでBOMなしUTF-8を指定できるサクラエディタなど）が必要。

このブログでは、Jekyllをインストールしたフォルダのディレクトリ構造（一部）は以下です。

├── _config.yml →　ローカル用のymlファイル
├── _config-public.yml　→　公開用のymlファイル
├── Gemfile　→　ブログで使用するgemを指定。
├── Gemfile.lock　→　Gemfileなどに変更があった場合、ビルドする際に自動的に修正される。
├── _includesフォルダ
│    └── head.html →　複数のファイルで共用するhtmlコード。{% include head.html %}で挿入される。
├── _pluginsフォルダ
├── _sassフォルダ
├── cssフォルダ
├── _layoutsフォルダ
│    ├── post.html　→　レイアウト用ファイル。投稿や固定ページ用ファイル（.md）の内容は、{{ content }}に挿入される。
│    └── page.html
├── _postsフォルダ
│　   └── YYYY-MM-DD-文字列.md　→　投稿用ファイル。フロントマターで指定したレイアウト用ファイルに挿入される。
├── _siteフォルダ　→　公開用にビルドされたファイルが入る。
├── sitemap.xml
├── p　→　固定ページ用フォルダ
│    └── sample.md　→　固定ページ用ファイル。フロントマターで指定したレイアウト用ファイルに挿入される。
└── index.html

1.
まずは、_config.ymlを編集して、ブログ全体に関わる初期設定をします。
設定できる内容は、テーマによって様々ですが、ブログタイトルやパーマリンク、カラム数などを設定。
設定したい項目が、初めから設定されているテーマを選ぶのがコツです。

以下に、このブログの_config.ymlの一部を紹介。
Jekyllでは、パーマリンクの構造を自由に設定できるので、他のブログから同じURLで引っ越し可能です。
例えば、このブログはGoogle Bloggerから引っ越したので、パーマリンクを独自ドメイン/年/月/文字列に設定しました。

title: 南の島旅
permalink: /:year/:month/:title.html
default_column: "two" 
baseurl: "" →　インターネット上で公開する時には、"https://独自ドメイン"にする。

注4
予めテーマで設定されている変数の名前は、絶対に変更しないでください。
Jekyllのテーマは自由度が高い代わりに、各製作者が定義する変数の名前が様々なので、注意が必要です。
例えば、上ではカラム数を、default_columnで設定しています。
しかしdefault_columnは、このテーマでの変数なので、他のテーマでは異なっている可能性があります。

2.
ブログの投稿用ファイルを作る。
ファイル名は、YYYY-MM-DD-文字列.md。
このブログ投稿のパーマリンクは年月までで日は入っていませんが、投稿用ファイル名には日も必要です。
投稿用ファイルの本文は、YAMLフロントマターのlayoutで指定したレイアウト用ファイルの{{ content }}に挿入されます。

投稿用ファイルの形式は以下です。
ファイル上部にある3つのハイフン（—）で囲まれた部分が、YAMLフロントマターと呼ばれる部分で、各投稿の設定（レイアウトや投稿タイトル、投稿日など）をします。
設定することが無くて空であっても、かならずYAMLフロントマターが必要です。
最初は、テーマのサンプルで入っている投稿用ファイルを修正していけばok。
本文は、マークダウンとhtmlのどちらでも記述できます。
投稿用ファイルは、_postフォルダに保存。

---
layout: post　→　_layoutsフォルダ内のpost.htmlを指定
title: WindowsでのJekyllの使い方 (その2)
date: 2017-12-15T21:30
---

投稿内容の本文 →　_layoutsフォルダ内のpost.htmlの{{ content }}に挿入される。

3.
固定ページを作成する。
ブログ投稿のような日付とは関係ない固定ページも、もちろん作成可能です。
Jekyllをインストールしたブログのフォルダ内に、希望するディレクトリ（階層）にあったフォルダを作成して、固定ページ用ファイル（任意の文字列.md）を置けばok。
ブログの投稿用ファイルと違って、ファイル名に年月日を入れる必要はありません。
固定ページ用ファイルにも、YAMLフロントマターが必須。
固定ページ用ファイルの本文が、YAMLフロントマターのlayoutで指定したレイアウトファイルの{{ content }}に挿入されます。
例として、pフォルダ内に、固定ページ用ファイル（sample.md）を入れると、独自ドメイン/p/sample.htmlとして公開されます。

4-1.
投稿や固定ページ用ファイルのYAMLフロントマターで、新しい変数を定義する。

注5
Jekyllで定義済みの変数名（titleなど）以外であれば、基本的に自由に変数名を設定できます。
しかし、変数の最初の文字に数字が入ると、Jekyllをビルドする際にエラーになります。（Jekyll ver.3.5.2以上）
数字を入れない変数名が無難。

このブログで使用しているテーマでは、各投稿を代表する画像URLなどが設定されていませんでした。
例として、投稿用ファイルのYAMLフロントマターで、新しい変数（FirstImage）を設定。

---
layout: post
title: WindowsでのJekyllの使い方 (その2)
FirstImage: https://images.okinawan-lyrics.com/2017/20171215-jekyll.jpg
date: 2017-12-15T21:30
---

投稿内容の本文

4-2.
定義した変数を使って、 該当するhtmlファイルを変更。
例として、ヘッダのSEOメタタグ（_includesフォルダ内のhead.html）に、投稿を代表する画像URLを設定しました。

<meta property="og:image" content="{{ page.FirstImage }}">

5.
定義した変数や各種タグの使用方法について、少しだけ紹介します。

5-1.
_config.ymlの設定値を他のファイルで使用したい場合には、site.を変数の前に付けて引用します。
例として、ブログタイトル、baseurlを引用する場合には、以下になります。

{{ site.title }}
{{ site.baseurl }}

5-2.
投稿や固定ページ用ファイルのYAMLフロントマターで定義した変数を、該当のページで使用するには、page.を変数の前に付けて引用します。
例として、投稿ページで、投稿のタイトル、投稿日を引用する場合には、以下になります。

{{ page.title }}
{{ page.date }}

5-3.
投稿や固定ページ用ファイルのYAMLフロントマターで定義した変数を、他のページで使用するには、post.を変数の前に付けて引用します。
例として、index.htmlファイルで、投稿のタイトル、投稿日を引用する場合には、以下になります。

{{ post.title }}
{{ post.date }}

5-4.
変数にフィルターをかけることが出来ます。
例えば、日付の設定では、年、月、日、曜日、午前午後などを自由に表現可能。
このブログでは、YYYY-MM-DD 24時間表記に設定しています。

{{ page.date | date: "%Y-%m-%d %H:%M" }}

5-5.
ifタグやunlessタグを使って、条件分岐させる。
例えば、このブログでは、layoutの値を、投稿用ファイルではpost、固定ページ用ファイルではpage、indexファイルではdefaultを使用しています。
layoutの値で、SEO関係のメタタグの切り替えを以下のように行っています。

{% if page.layout == "post" %}
投稿ページのSEOタグ
{% else %}
{% if page.layout == "page" %}
静的ページのSEOタグ
{% else %}
indexファイルのSEOタグ
{% endif %}{% endif %}

5-6.
forタグを使って、条件をループさせる。
例として、このブログで作成した、簡単なサイトマップを紹介。
各投稿のURLと投稿日を順番に引用して、sitemap.xmlを作成しました。

---
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {% for post in site.posts %}
    <url>
      <loc>{{ site.baseurl }}{{ post.url }}</loc>
        <lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
    </url>
  {% endfor %}
</urlset>

5-7.
includeタグを使って、複数のファイルで同じhtmlコードを引用する。
_includesフォルダに、共用するhtmlコードのファイルを保存（任意の文字列.html）。
htmlファイルは通常htmlタグで囲まれてますが、_includesフォルダに入れるのは、htmlタグを含まない部分的なコードのみです。
例として、head.htmlのコードを引用するには、以下のように記述。

{% include head.html %}

以上で、Jekyllの基本的なカスタマイズは出来ると思います。
assignタグやcaptureタグも便利ですが、ここでは省略。
次回は、簡単なプラグインの作成について紹介したいと思います。