Step by Step チュートリアル
2. Liquid
LiquidでJekyllはもっと面白くなります。Liquidは3つの主なパート:オブジェクト、タグ、フィルタを持つテンプレート言語です。
オブジェクト
ObjectはLiquidにコンテンツを出力する場所を指示します。2つの中括弧:{{
と}}
で示します。例えば、
{{ page.title }}
ページにpage.title
という変数の内容を出力します。
タグ
タグはロジックを作成し、テンプレートの流れをコントロールします。中括弧とパーセント:{%
と%}
で示します。例えば、
{% if page.show_sidebar %}
<div class="sidebar">
sidebar content
</div>
{% endif %}
もしpage.show_sidebar
がtrueなら、サイドバーを出力します。Jekyllで使用できるタグについては、こちらをご確認ください。
フィルタ
フィルタはLiquidオブジェクトの出力を変更します。アプトプットの中で使用し、|
で区切ります。例えば、
{{ "hi" | capitalize }}
Hi
が出力されます。Jekyllで使用できるフィルタについては、こちらをご確認ください。
Liquidを使う
あなたの番です。ページのHello World!を小文字での出力に変更しましょう。
...
<h1>{{ "Hello World!" | downcase }}</h1>
...
変更をJekyllが処理するには、ページの先頭にfront matterを追加する必要があります。
---
# front matter tells Jekyll to process Liquid
---
“Hello World!”はレンダリング時に小文字になります。
今は何もないように見えるかもしれませんが、JekyllはLiquidや他の機能と組み合わせることで、大きな力を発揮します。
downcase
のLiquidフィルタによる変更を見るには、front matterを追加する必要があります。
歩みを止めず、次へ進みましょう。