Html 在slider中更改字体颜色-Shopify

{section.blocks%中的块的%s}

{%endfor%}
{section.blocks%中的块的%s}
{{block.settings.title}
.标题颜色{
颜色：{{block.settings.title_color}}；
}
{%endfor%}
{%schema%}
{
“名称”：“图像滑块”，
“最大积木”：5，
“设置”：[
{
“类型”：“标题”，
“内容”：“图像滑块”
}
],
“区块”：[
{
“类型”：“图像”，
“名称”：“图像”，
“设置”：[
{
“类型”：“图像选择器”，
“id”：“图像”，
“标签”：“图像”
},
{
“类型”：“文本”，
“id”：“标题”，
“标签”：“图像标题”
},
{
“类型”：“颜色”，
“id”：“标题颜色”，
“标签”：“标题颜色”，
“默认值”：“#ffffff”
}
]
}
],
“预设”：[
{
“类别”：“图像”，
“名称”：“图像滑块”
}
]
}
{%endschema%}

如果在迭代循环时使用

{{{forloop.index}}

，则可以将其动态分配给HTML标头和

CSS

类。这样，每个块

h5

将有自己的颜色类别

{{block.settings.title}

.title color-{{forloop.index}{
颜色：{{block.settings.title_color}}；
}

随着循环的进行，您将逐渐建立动态的

HTML

和

CSS

第一次跑步

<h5 class="title-color-1">block title</h5>

<h5 class="title-color-2">block title</h5>

第二次跑步

<h5 class="title-color-1">block title</h5>

<h5 class="title-color-2">block title</h5>

---

请注意，每个块的

h5

类和

CSS

现在通过其索引是唯一的，因此不会被新块覆盖。

这非常有效，但您能向我解释一下逻辑吗@andy@AliMirza我用更多的解释更新了我的答案。