第9章 Liquid: デベロッパーポータル
このセクションでは、マークアップのさまざまな要素、その要素のつながり、デベロッパーポータルでの使用方法の簡単な例など、Liquid フォーマットのタグおよびそれらが 3scale システム内で機能する仕組みについて説明します。
Liquid の基本を知るには、Liquid リファレンス を参照してください。
9.1. デベロッパーポータルでの Liquid の使用
9.1.1. Liquid の有効化
Liquid マークアップ処理は、すべてのパーシャルとメールテンプレートに対してデフォルトで有効です。レイアウトで Liquid を有効にするには、system_name 入力フィールドの右下にあるチェックボックスを選択するだけです。ただし、ページで有効にする場合は、そのページの ADVANCED OPTIONS セクションに移動する必要があります。
ADVANCED OPTIONS セクションを展開して、Liquid enabled チェックボックスを選択します。これ以降、Liquid マークアップはすべて内部エンジンで処理され、デベロッパーポータルの組み込みエディターでも、Liquid コードが強調表示されます。
9.1.2. ページ、パーシャル、およびレイアウトでの使用方法の違い
通常、ページ (ポータルで 1 回しか使用されない要素) とパーシャル/レイアウト (ポータルで再利用可能な要素) とでは、Liquid の使用方法が若干異なります。つまり、あまり違いのない複数のレイアウトやパーシャルをさまざまなページに適用する代わりに、論理 Liquid タグを追加し、ユーザーが操作するページに応じてレイアウトを変更できるということです。
<!-- if we are inside '/documentation' URL -->
<li class="{% if request.request_uri contains "/documentation" %}active{% endif %}"><!-- add the active class to the menu item -->
<a href="/documentation">Documentation</a>
</li>9.1.3. CSS/JS との使用
Liquid マークアップは HTML で機能するだけでなく、CSS や JavaScript コードと簡単に組み合わせて制御を強化することもできます。スタイルシートまたは JS で Liquid を有効にするには、これをページとして作成し、通常のページで有効にするのと同じ手順に従います。これにより、CSS に条件マークアップを追加することや、JavaScript でサーバー側のデータを使用することが可能です。ページのコンテンツタイプを CSS または JS として設定するのを忘れないでください。
