能否在CSS文件夹中使用Liquid编辑首页区块的设置参数？

结论先行 #

你当前分开创建hero.css.liquid和hero.liquid的实现方式无法正常运行，核心原因是：section.settings的作用域仅限定在对应section的liquid文件内部，单独的.css.liquid文件在渲染为静态CSS资源时，无法读取到section的配置变量，最终生成的CSS里{{ section.settings.hero-image-image }}会原样输出，不会被替换为实际的图片地址。

可行的两种实现方案 #

你可以根据自己的维护习惯选一种：

1. 直接在section文件内加{% style %}区块（更推荐）
   把带liquid变量的CSS直接写在hero.liquid内部，既能正常读取配置，也能保证样式和section强绑定，避免全局冗余，修改后的完整代码如下：

{% style %}
.hero_image {
   background-image: url( {{ section.settings.hero-image-image }} );
   /* 其他固定的hero样式也可以放这里 */
   width: 100%;
   height: 70vh;
   background-size: cover;
   background-position: center;
}
{% endstyle %}

<!-- 注意这里你之前的class写法多了个冒号，要改成标准HTML写法 -->
<div class="hero_image"></div>

{% schema %}
{
    "name": "hero",
    "class": "hero-section",
    "settings": [
        {
            "type": "image_picker",
            "id": "hero-image-image",
            "label": "Hero Image"
        }
    ],    
    "presets": [
        {
            "category": "hero",
            "name":"hero"
        }
    ]
}
{% endschema %}

2. 拆分静态CSS和动态行内样式
   如果希望固定样式单独维护到.css.liquid文件里，可以把动态的背景图片地址写到行内样式中：

• hero.css.liquid里只放不带变量的静态样式：

.hero_image {
   width: 100%;
   height: 70vh;
   background-size: cover;
   background-position: center;
}

• hero.liquid里修改div的写法，把动态背景地址放style属性：

<div class="hero_image" style="background-image: url({{ section.settings.hero-image-image }})"></div>

{% schema %}
{
    "name": "hero",
    "class": "hero-section",
    "settings": [
        {
            "type": "image_picker",
            "id": "hero-image-image",
            "label": "Hero Image"
        }
    ],    
    "presets": [
        {
            "category": "hero",
            "name":"hero"
        }
    ]
}
{% endschema %}

额外注意 #

你原来代码里<div class: "hero_image">的写法有误，HTML的类名属性不需要加冒号，正确写法是<div class="hero_image">，否则类名不会生效，样式也无法匹配。

内容的提问来源于stack exchange，提问作者Daniel Coleman