ステップごとのチュートリアル
2. Liquid
Liquidは、Jekyllがより興味深いものになる起動場所です。これは、主に3つのコンポーネントを持つテンプレート言語です。
オブジェクト
オブジェクトは、あらかじめ定義された変数をページのコンテンツとして出力するようにLiquidに指示します。オブジェクトには二重中括弧を使用します。 {{ と }} です。
例えば、{{ page.title }}は page.title変数を表示します。
タグ
タグは、テンプレートのロジックと制御フローを定義します。タグには中括弧とパーセント記号を使用します。 {% と %} です。
例を示します。
{% if page.show_sidebar %}
<div class="sidebar">
sidebar content
</div>
{% endif %}
これは、 show_sidebarページ変数の値がtrueの場合にサイドバーを表示します。
Jekyllで使用可能なタグに関する詳細情報は、こちらで確認できます。
フィルター
フィルターは、Liquidオブジェクトの出力を変更します。出力にあり、 | で区切られています。
例を示します。
{{ "hi" | capitalize }}
これは、 hiではなく Hiを表示します。
使用可能なフィルターに関する詳細を確認できます。
Liquidの使用
さあ、Liquidを使用して、セットアップの「Hello World!」テキストを小文字にします。
...
<h1>{{ "Hello World!" | downcase }}</h1>
...
Jekyllで変更を処理するには、ページの一番上にフロントマターを追加します
---
# front matter tells Jekyll to process Liquid
---
HTMLドキュメントは次のようになります。
---
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>{{ "Hello World!" | downcase }}</h1>
</body>
</html>
ブラウザーをリロードすると、 hello world!と表示されます。
Jekyllの能力は、Liquidと他の機能を組み合わせることによって発揮されます。ページにフロントマターを追加して、JekyllでそれらのページのLiquidを処理します。
次は、フロントマターについて詳しく学びます。