使用塊來重複元素
與部分一起出現的最有用的東西之一是塊。塊基本上是可以無限次建立的東西的藍圖。最好的例子之一是滑塊的幻燈片。塊是模式中的頂級項,意味著它與 name
和 settings
之類的東西並排,但不在其中。塊內基本上是迷你模式。
{% schema %}
{
"name": "Slider",
"max_blocks": 6,
"blocks": [
{
"type": "slide",
"name": "Slide",
"limit": 4,
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Image"
}
]
}
]
}
{% endschema %}
請注意,Slide 也有一種 slide
。你可以為塊提供自己的型別,而不是 Shopify 提供的型別。
要使用它,你只需迴圈遍歷 HTML / Liquid 程式碼中的每個塊。
<div class="slider">
{% for block in section.blocks %}
<img src="{{ block.settings.image | img_url: 'master' }}" alt="" />
{% endfor %}
</div>