Liquid の基本

  • 10 分

従来のプログラミング言語と同様に、Liquid は定義された構文を持ち、変数定義を使用でき、出力やロジックなどの構成要素を含んでいます。 Liquid の構成要素は、2 種類の区切り記号のセットで簡単に見分けることができます。オブジェクトと変数からの出力を表す、二重中かっこの区切り記号 {{ }} と、ロジックと制御フローを表す、中かっことパーセントの区切り記号 {% %} です。

ヒント

ページ コンテンツとコンテンツ スニペットを使用すると、Power Pages デザイン スタジオで Liquid コンテンツを入力するだけで、Liquid を「練習」できます。 この学習コンテンツに取り組むときに、Power Pages デザイン スタジオまたは Visual Studio Code を使用してページにコードを直接コピーして貼り付けることで、サンプルの Liquid フラグメントを試してみてください。

出力

出力のステートメントは、1 組の二重中かっこで式を囲んだものです。 この出力をレンダリングすると、その式の値で置き換えられます。 式には、Liquid オブジェクト、そのプロパティ、および変数を含めることができます。 次の例は、単純な出力文を示しています。

Hello {{ user.firstname }} from {{ 'Power Pages' }}

ユーザーの名が Doug であるとすると、この出力ステートメントによって次の結果が生成されます。

Doug さん、こんにちは、こちらは Power Pages です

フィルター

出力マークアップは、出力ステートメントの結果を変更するフィルターを取り込むことができます。 フィルターを追加するには、出力式の後にパイプ文字 (|)、フィルターの名前、およびコロン (:) の後のオプションのパラメーターを指定します。

Hello {{ user.firstname | upcase }} from {{ 'Power Pages' }}. The date is {{ 'now' | date: 'MMMM d yyyy' }}

このフィルター ステートメントは、次の結果を生成します。

DOUG さん、こんにちは、こちらは Power Pages です。 この日付は 2023 年 5 月 25 日です。

タグ

タグは、たとえば、テンプレート内のロジックと制御フローに使用できます (この例では HTML も追加されています)。

{% assign product = 'Power Pages' %}

<p>
    {% if user %}
        Hello, {{ user.firstname | upcase }}, from <strong>{{ product }}</strong>.
    {% else %}
        Greetings, <em>visitor</em>, from <strong>{{ product }}</strong>!
    {% endif %}
</p>

<p>The time is {{ 'now' | date: 'g' }}</p>

このフラグメントでは、assign タグによって新しい変数が作成されます。また、if... else 構成要素によって、ユーザーが定義されているかどうか (つまり、Web サイトの閲覧者がサインインしているかどうか) に応じて出力が生成されます。 匿名ユーザーの出力は次のとおりです。

訪問者さん、こんにちは、こちらは Power Pages です。

時刻は 2023 年 5 月 24 日午前 11 時 33 分です

Liquid には、優れた汎用性と柔軟性を発揮する組み込みのオブジェクトとタグが含まれています。 真のメリットは、Power Pages によって実装された Liquid の拡張機能から得られます。