[Jekyll] テンプレートでデフォルト値を指定する方法
Nプログラマ(@Nprog128)です。
=> 色々あってHugoに乗り換えました。
作っている途中で得られた知見を備忘録と残していきます。
今回は、テンプレートでデフォルトの値を設定する方法をメモしておきます。
概要
目標
- テンプレート内で未定義の変数ならデフォルト値で設定する
（サンプルで検証）
事前の準備
- Jekyllの環境構築済み
=> 環境構築の記事は こちら
使い方
コード
基本的にはこんな感じになります。
1{{ 変数 | default: 'デフォルト値' }}
変数がfalse or nil or emptyと判定される時、デフォルト値が適用されます。
具体的なコードにするとこうですね。
1{{ page.eye_catch | default: 'default.png' }}
ページのFrontMatterにeye_catchが未設定の場合はdefault.pngを設定する、というコードです。
imgタグの中で使う場合は、こんな感じになります。
1<img src="{{ page.eye_catach | default: 'default.png' }}">
defaultのドキュメントはこちらにありますので、詳しいことはこちらから。
> https://shopify.github.io/liquid/filters/default/
ハマりポイント
自分がハマったトコロです。
小さなミスですが、余裕がないと焦るので心を落ち着けて確認していきます。
コロン
defaultの後にはコロンが必要です。
シングルクォート or ダブルクォート
default値はシングルかダブルクォートで囲むのを忘れないようします。
先程の具体的なコードのimgの例だと、ダブルクォートの中でシングルクォートが必要なのですが囲み忘れをすることが多かったです。
両方ダブルクォートでも動作しましたが、見た目が紛らわしいので自分はシングルクォートを使っています。
今回のサンプル
サンプルで実際に使ってみます。
概要
今回のサンプルはページの先頭にアイキャッチ画像を表示する、というものです。
ページは2ページ作成して、画像のありとなしのページを作ります。
| 作成するページ | アイキャッチ画像 | 画像パス |
|---|---|---|
| index.html | なし | /img/default.png |
| about.html | あり | /img/about.png |
アイキャッチの画像のパスは各ページのFrontMatterにeye_catch変数でもたせます。
未定義の場合は、デフォルトの画像を表示させます。
ココに今回の目標であるデフォルト値を使います。
それでやってみましょう。
アイキャッチ画像の準備
アイキャッチの画像と、デフォルトの画像の2つを準備します。
画像の配置する場所は、index.htmlと同じ階層に配置します。
ツリー構造はこんな感じです。
1./
2├── about.html
3├── img
4│ ├── about.png
5│ └── default.png
6└── index.html
aboutページのFrontMatterにeye_catch変数を追加
aboutページのFrontMatterにeye_catch変数を追加します。
indexページはeye_catch変数が未設定の場合、デフォルトの画像を表示するということを確認したいので設定しません。
ページからこの変数を参照するにはpage.eye_catchと記述します。
コード
index.html コードを開く
1
2---
3
4---
5<h1>index</h1>
6<h2>画像(デフォルトの画像)</h2>
7
8<div>
9 <img src="{{ page.eye-catch | default: '/img/default.png' }}">
10</div>
11<div>
12 <a href="/about.html">aboutへ</a>
13</div>
about.html コードを開く
1
2---
3eye-catch: /img/about.png
4---
5<h1>about</h1>
6<h2>画像(aboutの画像)</h2>
7
8<div>
9 <img src="{{ page.eye-catch | default: '/img/default.png' }}">
10</div>
11<div>
12 <a href="/index.html">indexへ</a>
13</div>
結果
それでは、Jekyllを起動させてからブラウザで各ページを表示してみます。
ここでは起動ポートは8000で起動しているので、URLはlocalhost:8000となります。
index.htmlを表示
localhost:8000/index.htmlにアクセスした結果は、以下のようになりました。
ページにeye_catch変数を指定していないので、デフォルト画像が表示されています。
about.htmlを表示
localhost:8000/about.htmlにアクセスした結果は、以下のようになりました。
こちらはeye_catch変数に画像パス(img/about.png)を指定しているので、その画像が表示されています。
おわりに
今回の内容は、テンプレートで未定義の変数の値であればデフォルトの値を設定するというものでした。
これを使うとif文を書かずに済むので、テンプレートがスッキリしますね。
今回のサンプルでは、あまりメリットを感じれなかったかもしれません。 自分はテンプレートの継承を使って共通化をした時に使いました。
親テンプレートはデフォルト画像を表示できるようにしておき、子テンプレートで表示する画像を上書きできるという仕組みです。
この辺は、時間があったら記事にしてみようかと思います。
それでは、このへんで。
バイナリー！
