Shopify主题开发-如何在CSS或内联样式中使用section.block.variable？

我试图在我的Shopify代码中使用一个变量来声明背景和字体颜色

有人能告诉我哪里出了问题吗

非常感谢，以下是我的代码：

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "id": "contacts-section",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "info@example.com"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

{section.blocks%中的块的%s}
{%if block.type=='chemical contact%}
{{block.settings.contact-text}
{%endif%}
{%endfor%}
{%schema%}
{
“名称”：“化学触点”，
“id”：“联系人部分”，
“最大积木”：2，
“设置”：[
{
“类型”：“颜色”，
“id”：“联系人背景色”，
“标签”：“联系人背景色”，
“默认值”：“#EEEDF0”
},
{
“类型”：“颜色”，
“id”：“联系人颜色”，
“标签”：“接触颜色”，
“默认值”：“#E20437”
}
],
“区块”：[
{
“名称”：“化学接触”，
“类型”：“化学接触”，
“设置”：[
{
“id”：“联系人图标”，
“类型”：“图像”，
“标签”：“联系人图标”，
“类型”：“图像选择器”
},
{
“id”：“联系人文本”，
“类型”：“文本”，
“标签”：“联系人文本”，
“默认值”：info@example.com"
},
{
“id”：“联系人链接”，
“类型”：“url”，
“标签”：“联系人链接”
}
]
}
]
}
{%endschema%}
{%stylesheet%}
{%endstylesheet%}
{%javascript%}
{%endjavascript%}

请注意，这是我的尝试，我还尝试将其放在下面的样式部分：

<div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};">

如果您能提供任何建议，我们将不胜感激，谢谢

---

解决方案：如果您仅使用节设置，请确保您没有尝试使用块设置…

您误解了节和块。您已经在节中定义了颜色设置，但正在尝试通过块访问它。我已经更新了代码，并且在第节中也没有使用id属性

{section.blocks%中的块的%s}
{%if block.type=='chemical contact%}
{{block.settings.contact-text}
{%endif%}
{%endfor%}
{%schema%}
{
“名称”：“化学触点”，
“最大积木”：2，
“设置”：[
{
“类型”：“颜色”，
“id”：“联系人背景色”，
“标签”：“联系人背景色”，
“默认值”：“#EEEDF0”
},
{
“类型”：“颜色”，
“id”：“联系人颜色”，
“标签”：“接触颜色”，
“默认值”：“#E20437”
}
],
“区块”：[
{
“名称”：“化学接触”，
“类型”：“化学接触”，
“设置”：[
{
“id”：“联系人图标”，
“类型”：“图像”，
“标签”：“联系人图标”，
“类型”：“图像选择器”
},
{
“id”：“联系人文本”，
“类型”：“文本”，
“标签”：“联系人文本”，
“默认值”：info@delta-sci.com“
},
{
“id”：“联系人链接”，
“类型”：“url”，
“标签”：“联系人链接”
}
]
}
]
}
{%endschema%}
{%stylesheet%}
{%endstylesheet%}
{%javascript%}
{%endjavascript%}

您误解了章节和模块。您已经在节中定义了颜色设置，但正在尝试通过块访问它。我已经更新了代码，并且在第节中也没有使用id属性

{section.blocks%中的块的%s}
{%if block.type=='chemical contact%}
{{block.settings.contact-text}
{%endif%}
{%endfor%}
{%schema%}
{
“名称”：“化学触点”，
“最大积木”：2，
“设置”：[
{
“类型”：“颜色”，
“id”：“联系人背景色”，
“标签”：“联系人背景色”，
“默认值”：“#EEEDF0”
},
{
“类型”：“颜色”，
“id”：“联系人颜色”，
“标签”：“接触颜色”，
“默认值”：“#E20437”
}
],
“区块”：[
{
“名称”：“化学接触”，
“类型”：“化学接触”，
“设置”：[
{
“id”：“联系人图标”，
“类型”：“图像”，
“标签”：“联系人图标”，
“类型”：“图像选择器”
},
<div class="section contacts-section" style="background-color: {{ section.settings.contacts-background-color }}; color: {{ section.settings.contacts-color }};">
    <div class="section-inner">

        {% for block in section.blocks %}
            {% if block.type == 'chemical-contact' %}

                <div class="a-contact">
                    <a class="contact-link box-link" href="{{ block.settings.contact-link }}"></a>

                    <div class="a-contact-icon">
                        <img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}">
                    </div>
                    <div class="a-contact-content">
                        {{ block.settings.contact-text }}
                    </div>
                </div>

            {% endif %}
        {% endfor %}

    </div>
</div>

{% schema %}
    {
        "name": "Chemical Contacts",
        "max_blocks": 2,
        "settings": [
            {
                "type": "color",
                "id": "contacts-background-color",
                "label": "Contacts Background Color",
                "default": "#EEEDF0"
            },
            {
                "type": "color",
                "id": "contacts-color",
                "label": "Contact Color",
                "default": "#E20437"
            }
        ],
        "blocks": [
            {
                "name": "Chemical Contact",
                "type": "chemical-contact",
                "settings": [
                    {
                        "id": "contact-icon",
                        "type": "image",
                        "label": "Contact Icon",
                        "type": "image_picker"
                    },
                    {
                        "id": "contact-text",
                        "type": "text",
                        "label": "Contact Text",
                        "default": "info@delta-sci.com"
                    },
                    {
                        "id": "contact-link",
                        "type": "url",
                        "label": "Contact Link"
                    }
                ]
            }
        ]
    }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}