Liquid Tag：HTML

HTML

• style

style

用来生成HTML <style> 标签

1.语法：

{% style %}
  CSS_rules
{% endstyle %}

2.举例

// 1.数据
{
  "settings": {
    "colors_accent_1": "#121212"
  }
}


// 2.代码
{% style %}
  .h1 {
    color: {{ settings.colors_accent_1 }};
  }
{% endstyle %}


// 3.输出
<style>
  .h1 {
    color: #121212;
  }
</style>

3.为什么用{% style %}标签，而不是直接用 <style>?

原因如下：

3.1在section里面，会加入css，使用 {% style %}标签，可以加入section id，在模版装修动态更新iframe的内容需要用到

在sections/countdown-timer.liquid 可以看到

{%- style section.id -%}
  #f-countdown-{{ section.id }} {
    --section-padding-top: {{ section.settings.padding_top }}px;
    --section-padding-bottom: {{ section.settings.padding_bottom }}px;
  }
  {{ section.settings.custom_css |  card_custom_css: section.id }}
{%- endstyle -%}

渲染后：

• 可以看到，渲染后的<style>加入了id属性

<style id="section_style_countdown-timer-7P0qCdfNr5">
    #f-countdown-countdown-timer-7P0qCdfNr5{
        --section-padding-top:50px;
        --section-padding-bottom:50px
    }
</style>

3.2对生成的css代码，进行压缩，去掉回车，空格等字符，减小体积

因此，在装修卡片里面添加css，需要使用{% style %}标签