在Shopify中具有相同样式语法的Blocks最好是哪种方法?如果我在Shopify主题编辑器中两次选择同一块,则将应用第二个块的样式。我如何使这两个街区都有自己的风格?
我所拥有的是这样的:
风格:
<style>
{%- for block in section.blocks -%}
.announce {
font-size: {{ block.settings.announce_text_size | append: 'px'}};
font-weight: {{ block.settings.announce_text_weight }};
{%- if block.settings.announce_text_align == 'left' -%}
padding-left: 45px;
{%- endif -%}
{%- if block.settings.announce_text_align == 'right' -%}
padding-right: 45px;
{%- endif -%}
color: {{ block.settings.announce_text_color }};
}
{%- endfor -%}
</style>
内容:
{%- for block in section.blocks -%}
{%- if block.type == 'announcement' -%}
<div class="announce">
{%- if block.settings.announce_text != blank -%}
{{ block.settings.announce_text }}
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
仅应用最后一种样式,因为你要覆盖类上的样式。内联添加样式或使用id为每个块创建唯一的类。我在下面的代码中使用块ID为每个块创建一个不同的类。
<div class="page-width" data-section-id="{{ section.id }}">
<style>
{% for block in section.blocks %}
.announcement-{{block.id}} {
font-size: {{block.settings.fontSize | append: "px"}};
}
{% endfor %}
</style>
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
<div class="announcement-{{block.id}}">
{{block.settings.announcementText}}
</div>
{% endfor %}
{% endif %}
</div>
{% schema %}
{
"name": "Test Section",
"class": "test-section",
"max_blocks": 5,
"blocks": [
{
"type": "sample-block",
"name": "Block",
"settings": [
{
"type": "text",
"id": "announcementText",
"label": "Announcement Text"
},
{
"type": "range",
"id": "fontSize",
"min": 10,
"max": 50,
"step": 4,
"unit": "px",
"label": "Font Size",
"default": 10
}
]
}
]
}
{% endschema %}
非常感谢,100%解决了我的问题。我在Shopify备忘单上阅读了有关的信息
block.id
,但不知道如何正确使用它。再次感谢