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を追加する必要があります。

歩みを止めず、次へ進みましょう。

  1. セットアップ
  2. Liquid
  3. Front Matter
  4. レイアウト
  5. Includes(インクルード)
  6. Dataファイル
  7. Assets
  8. ブログ
  9. コレクション
  10. Deployment