Liquid言語について
Rubyをもとに作られているShopify独自の言語。
HTMLでいつも変わらない部分(静的)が書かれて、場合によって変わる部分(動的)はLiquidで書かれる
{{ }}
で区切って出力を表す。PHPのecho的なやつ
{% %}
でロジックと制御フロー・・・if文とかforはこれで書く
オブジェクト
管理画面からデータを出力。オブジェクトは各プロパティのリストを持ってる。
たとえば、product(製品)オブジェクトなら製品1、製品2・・・などのリストを持っていて、それぞれに設定されているtitleとかを{{product.title}}
で表示できる。
Shopifyのストア内で同じテンプレートをつかっていたとしても、それぞれのtitleが出力される。
タグ
・コントロールフロータグ
・イテレーションタグ
・テーマタグ
・バリアブルタグ 変数タグ
などがある
フィルター
数値、文字列、オブジェクト、変数の出力を変更するために使用され、
{{ | }}
で表される(パイプ文字)
例えば、capitalize (大文字にする)remove(外す)
capitalizeは1文字目を大文字にしてくれる。
{{ ‘hello,world!’ | capitalize}} →(出力結果) Hello,world!
{{ ‘hello,world!’ | capitalize | remove: "world" }} →(出力結果) Hello,!
他にもいろいろなフィルターがある。
contains
特定の文字列を含んでいるか検索する。
配列の中にあるオブジェクトに対しては検索かけられない
{% if customer.email contains “@gmail.com” %}
<h1>こんにちはgmailユーザー!</h1>
{% endif %}
参考
Shopify Developers-Getting started with the Liquid markup language-
Shopify公式さん(英語)
おまけ
続編として、liquidのasset_urlフィルタについてを書いたのでよろしければ。