Menu Close

第9章 Liquid: デベロッパーポータル

このセクションでは、マークアップのさまざまな要素、その要素のつながり、デベロッパーポータルでの使用方法の簡単な例など、Liquid フォーマットのタグおよびそれらが 3scale システム内で機能する仕組みについて説明します。

Liquid の基本を知るには、『Liquid リファレンス 』を参照してください。

9.1. デベロッパーポータルでの Liquid の使用

本セクションでは、レイアウトおよびページで Liquid マークアップ処理を有効にする方法を説明します。

9.1.1. Liquid の有効化

Liquid マークアップ処理は、すべてのパーシャルとメールテンプレートに対してデフォルトで有効です。レイアウトで Liquid を有効にするには、system_name 入力フィールドの右下にあるチェックボックスを選択します。ただし、ページで有効にする場合は、そのページの ADVANCED OPTIONS セクションに移動する必要があります。

developer portal configuration liquids enable

ADVANCED OPTIONS セクションを展開して、Liquid enabled チェックボックスを選択します。これ以降、Liquid マークアップはすべて内部エンジンで処理され、デベロッパーポータルの組み込みエディターでも、Liquid コードが強調表示されます。

9.1.2. ページ、パーシャル、およびレイアウトでの使用方法の違い

Liquid の使用方法は通常、ページ、パーシャル、およびレイアウトによって若干異なります。ページ内では、Liquid は使用が 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 として設定するのを忘れないでください。