Shopify - 具有单独样式的重复块

Question

在 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 -%}

Answer 1

只应用最后一个样式，因为您正在覆盖类上的样式。要么内联添加样式，要么使用 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 %}