Liquid-チートシート ②タグ
反復タグ
翻訳
反復タグは、コードのブロックを繰り返し実行するために使用されます。
反復タグには6種類あります。
① {% for %}
② {% else %}
③ {% break %}
④ {% continue %}
⑤ {% cycle %}
⑥ {% tablerow %}
※① {% for %} ② {% else %}は何度も使って理解しているので省略
③ {% break %}
翻訳
ループがbreakタグに遭遇したときにループの反復を停止させます。
◆例コード
{% for i in (1..5) %}
{% if i == 4 %}
{% break %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
出力結果
1 2 3
・i が 4 になればループを停止させる
それまではループを続ける（1 2 3まではループする）
④ {% continue %}
翻訳
ループがcontinueタグに遭遇したときに、現在の反復をスキップするようにします。
◆例コード
{% for i in (1..5) %}
{% if i == 4 %}
{% continue %}
{% else %}
{{ i }}
{% endif %}
{% endfor %}
出力結果
1 2 3 5
・i が4になれば 4を除いて出力する
⑤ {% cycle %}
翻訳
文字列群をループさせて、パラメータとして渡された順に出力します。
cycleが呼ばれるたびに、パラメータとして渡された次の文字列が出力されます。
◆例コード
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
出力結果
one
two
three
one
・これはテーマのどのような場面で使うのか？
トップページのヒーローイメージ（メインビジュアル）で使われている
ヒーローイメージが設定されていないときに表示させる画像で
使われていました。
そのコードは、hero.liquidにcycleを発見できました。
{% capture current %}{% cycle 1,2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
◆考えらえるcycleの役割 変数 current に「1」と「2」が入っている
ヒーローイメージ1枚目 → lifestyle-1
ヒーローイメージ2枚目 → lifestyle-2
ヒーローイメージ3枚目 → lifestyle-1
ヒーローイメージ4枚目 → lifestyle-2
・
・
Shopifyのデフォルトで用意しているnoimgのときの画像（SVG）の種類
https://shopify.dev/api/liquid/filters/additional-filters
⑥ {% tablerow %}
翻訳
HTMLの<table>を生成します。
<table>と</table>のHTMLタグで包まれている必要があります。
◆例コード
<table>
{% tablerow product in collection.products %}
{{ product.title }}
{% endtablerow %}
</table>
出力結果
<table>
<tr class="row1">
<td class="col1">
Cool Shirt
</td>
<td class="col2">
Alien Poster
</td>
<td class="col3">
Batman Poster
</td>
</tr>
</table>
・コレクションの商品名をtableで出力している
テーマタグ
翻訳
テーマタグには、テンプレート固有のHTMLマークアップを出力したり、使用するレイアウトやスニペットをテーマに指示したり、返された配列を複数のページに分割したりするなど、さまざまな機能があります。
テーマタグができること
・変数や配列の文字列などを表示する
・HTMLのタグをLiquidで出力する
・セクションやスニペットファイルを読み込む など
テーマタグは10種類
① {% comment %}
② {% echo %}
③ {% include %}
④ {% form %}
⑤ {% liquid %}
⑥ {% paginate %}
⑦ {% raw %}
⑧ {% render %}
⑨ {% section %}
⑩ {% style %}
① {% comment %}
翻訳
Liquidテンプレートの中にレンダリングされないコードを残すことができます。開口部と閉口部のコメントブロック内のテキストは出力されず、Liquidのコードが実行されることもありません。
◆例コード
My name is {% comment %}super{% endcomment %} Shopify.
出力結果
My name is Shopify.
制作者用のタグでコメントしたいときに使うタグです。
・HTMLでコメントするときは <!-- コメント内容 -->
・CSSでコメントするときは /* コメント内容 */
・Liquidでコメントするときは
{% comment %} コメント内容 {% endcomment %}
② {% echo %}
翻訳
liquidタグ内で動作し、レンダリングされたHTML内に式（Liquidオブジェクト）を出力します。
echoタグを使った式にもフィルタを適用することができます。
・liquidタグ内で動作とは？→⑤ {% liquid %}へ
・式（expression）とは？
式（expression）と文（statement）のプログラムの概念
文には代入文、if文、for文、if文の中の判定条件は式
文と式の最大の違いは、値を返すのが式で、返さないのが文
◆例コード
{% liquid
if product.featured_image
echo product.featured_image | img_tag
else
echo 'product-1' | placeholder_svg_tag
endif %}
出力結果
<img src="//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt_small.jpg?v=1398706734" alt="Red Shirt Small" />
③ {% include %}
翻訳
テーマのsnippetsフォルダからスニペットを挿入します。
※現在 {% include %} は非推奨になっています。
スニペットを読み込むときは、⑧ {% render %}を使うことが推奨
理由は、スニペット内のコードが親テンプレート内の変数の値を
書きかえることができるため
④ {% form %}
翻訳
フォームを正常に送信するために必要なすべての属性（action、idなど）と<input>を持つHTMLの<form>要素を作成します。
⑤ {% liquid %}
翻訳
1つのデリミタで複数のタグを書くことができます。これにより、変数や条件を作成したり、コードブロックを実行したりする際に、複数のデリミタを開閉する必要がなくなります。
◆例コード
{% liquid
case section.blocks.size
when 1
assign column_size = ''
when 2
assign column_size = 'one-half'
when 3
assign column_size = 'one-third'
else
assign column_size = 'one-quarter'
endcase %}
Liquidコードをつづけて書くためのコード
コード閉じタグを記載する必要がなくなるメリットがある
Liquidの上級者が使いそうな書き方である
デリミタとは？→これのことか？ {% %}
↓
デリミタとは、区切り文字のことです。{% %}や{{ }}のことです。
taichi fukumotoさんの記事が参考になります。
⑥ {% paginate %}
翻訳
paginateタグは、forタグと連動して、コンテンツを多数のページに分割します。このタグは、配列をループするforタグのブロックを包む必要があります。
⑦ {% raw %}
翻訳
解析されずにページ上にLiquidコードを出力することができます。
◆例コード
{% raw %}{{ 5 | plus: 6 }}{% endraw %} is equal to 11.
出力結果
{{ 5 | plus: 6 }} is equal to 11.
Liquidをブラウザに表示したいときに使うコードです。
⑧ {% render %}
翻訳
テーマのsnippetsフォルダからスニペットをレンダリングします。
スニペットがレンダリングされると、スニペット内のコードは、親テンプレート内で割り当てられた変数にアクセスできません。
同様に、スニペット内で割り当てられた変数は、スニペットの外側のコードからはアクセスできません。
このカプセル化により、パフォーマンスが向上し、テーマコードの理解とメンテナンスが容易になります。
◆例コード
{% render 'snippet-name' %}
.liquid拡張子は不要
翻訳の説明ではわかりにくい
スニペットを読み込むのに {% include %} よりも
{% render %} を使う方が良い。
なぜ？{% include %}との違いは？
{% include %}では、スニペット内のコードが
親テンプレート内の変数の値を書きかえることができる
{% render %}では
スニペットがレンダリングされるとき、
レンダリングした親ファイル（セクションやテンプレート等）と
スニペットで同じ変数を使用していても
親の変数の値は自動的に代入されない。
スニペットで定義された変数は、スニペット外のコードからは
変数にアクセスできない。
スニペットを読み込むには{% render %}を使うこと
⑨ {% section %}
翻訳
テーマのsectionフォルダからセクションを挿入します。
◆例コード
{% section 'footer' %}
⑩ {% style %}
翻訳
Liquid {% style %}タグは、Shopifyデータ属性を持つHTML <style>タグをレンダリングします。
◆例コード
{% style %}
.section-header {
color: #dddddd;
}
{% endstyle %}
出力結果
<style data-shopify>
.section-header {
color: #dddddd;
}
</style>
HTMLにCSSコードを出力できます。
この記事が気に入ったらサポートをしてみませんか？