一、定义配置数据

1.1 schema 标签的基本结构

• name：区块的名称，在主题编辑器中显示，帮助用户识别不同的设置。

• class：附加到区块的 CSS 类，便于样式定制。

• settings：包含该区块所有设置的数组。每个设置对象可能包含以下字段：
• type：设置的类型，如 text、textarea、richtext、image_picker、color、font_picker、url、radio、checkbox、range 和 select。
• id：设置的唯一标识符，用于在 Liquid 模板中引用。
• label：设置的标签，在主题编辑器中显示，帮助用户理解每个设置的功能。
• default：设置的默认值，确保用户在未自定义时有合理的初始值。
• info：关于此设置的额外信息，以工具提示形式显示，帮助用户更好地理解设置的用途。
• placeholder：输入字段的占位符文本，提供输入示例。
• options：某些类型（如 radio 和 select）需要的选项数组，每个选项包含 value 和 label 字段。
• min、max、step：用于 range 类型设置，定义最小值、最大值和步长。

1.2 示例代码

1.3 常用的预定义 type 值

• text：用于简单文本输入。

• textarea：用于多行文本输入，适合较长内容。

• image_picker：允许用户选择图片，增强视觉效果。

• color：提供颜色选择器，便于主题个性化。

• checkbox：提供复选框，适合布尔值设置。

• radio：提供单选按钮，适合多个互斥选项。

• select：提供下拉选择框，适合选项较多的场景。

• range：提供滑动条选择器，适合数值范围的选择。

二、获取动态配置的数据

2.1 实战示例

2.2 代码解析

• 背景颜色：通过 section.settings.background_color 获取用户选择的背景颜色，并应用于外层 <div>。

• 内容类型判断：使用 if 语句判断 content_type 设置的值，动态显示博客文章或产品信息。

• 循环展示：使用 for 循环遍历博客文章或产品集合，显示标题和摘要/价格。

2.3 注意事项

• 设置仅在定义它们的区块内部可用，无法在一个区块中访问另一个区块的设置。

• 设置的值在用户保存主题编辑器后才会更新，确保用户的更改被正确应用。

三、总结