如何在液体中的可折叠内容菜单中更改单个行的背景颜色?

发布于 2025-02-03 06:00:26 字数 1565 浏览 1 评论 0原文

我只是习惯了液体,无法为自己的一生而弄清楚如何在手风琴样式可折叠菜单中输入代码为每行分配颜色。

我设法为主题编辑器制作了模式,但无法控制液体。

我认为它属于我在下面的[在这里]写的地方,但不知道。如果有人能提供帮助,我将非常感谢它!

下面的代码:

      {% endif %}
      <div class="grid__item">
        {%- for block in section.blocks -%}  

[这里?? ]

        <div class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.row.color }} gradient{% endif %}" {{ block.shopify_attributes }}>
            <details id="Details-{{ block.id }}-{{ section.id }}"{% if section.settings.open_first_collapsible_row and forloop.first %} open{% endif %}>
              <summary id="Summary-{{ block.id }}-{{ section.id }}">
                {% render 'icon-accordion', icon: block.settings.icon %}
                <h3 class="accordion__title h4">
                  {{ block.settings.heading | default: block.settings.page.title }}
                </h3>
                {% render 'icon-caret' %}
              </summary>
              <div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
                {{ block.settings.row_content }}
                {{ block.settings.page.content }}
              </div>
            </details>
          </div>
        {%- endfor -%}
      </div>

我创建的模式:

{ “类型”:“颜色”, “ id”:“ row_color”, “默认”:“ #ffffff”, “标签”:“行颜色”, “信息”:“更改此单个行的颜色” },,

I'm just getting used to liquid and can't for the life of me figure out how to input the code to assign a color for each row in an accordion style collapsible menu.

I've managed to make the schema for the theme editor but can't get it to control the liquid.

I'm thinking it belongs where I've written [HERE] below but have no idea. If anyone could help I would super appreciate it!

Code below:

      {% endif %}
      <div class="grid__item">
        {%- for block in section.blocks -%}  

[ HERE?? ]

        <div class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.row.color }} gradient{% endif %}" {{ block.shopify_attributes }}>
            <details id="Details-{{ block.id }}-{{ section.id }}"{% if section.settings.open_first_collapsible_row and forloop.first %} open{% endif %}>
              <summary id="Summary-{{ block.id }}-{{ section.id }}">
                {% render 'icon-accordion', icon: block.settings.icon %}
                <h3 class="accordion__title h4">
                  {{ block.settings.heading | default: block.settings.page.title }}
                </h3>
                {% render 'icon-caret' %}
              </summary>
              <div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
                {{ block.settings.row_content }}
                {{ block.settings.page.content }}
              </div>
            </details>
          </div>
        {%- endfor -%}
      </div>

Schema I created:

{
"type": "color",
"id": "row_color",
"default": "#FFFFFF",
"label": "Row Color",
"info": "Changes color for this individual row"
},

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

青萝楚歌 2025-02-10 06:00:26

您可以访问类似的“部分块架构数据:

{{ block.settings.id }}

id是您为特定设置定义的ID,在这种情况下为row_color

综上所述:

{{ block.settings.row_color }} // Returns either your default value `#ffffff` or the one selected in the customizer

You can access the section block schema data like this:

{{ block.settings.id }}

id is the ID you defined for the specific setting, in this case it would be row_color.

In conclusion:

{{ block.settings.row_color }} // Returns either your default value `#ffffff` or the one selected in the customizer
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文