Warm tip: This article is reproduced from serverfault.com, please click

html-Shopify

(html - Shopify)

发布于 2020-12-02 13:48:53

在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 -%}
Questioner
DogFoxX
Viewed
0
Bilal Akbar 2020-12-02 23:00:33

仅应用最后一种样式,因为你要覆盖类上的样式。内联添加样式或使用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 %}