使用 section 和 block 构建主题
当你在设计一个主题时，你需要考虑哪些功能应该放在 section 里，哪些功能应该放在 block 里。Section 和 block 是模块化组件，能让商家自定义和扩展他们的主题。商家可以添加或移除 section 和主题 block，调整 section 和 block 的设置，并引入 app block 和 metafield。
这些指南适用于 Online Store 2.0 主题，它们使用 JSON template 和 section group。你不能从 Liquid template 或 layout 中添加或移除 静态 section。
Section
Section 可用于所有页面。
在构建主题模板时，你需要确保模板的默认内容是放在主 template section 中的，而且 section 可以被添加、移除和重新排序。你可以使用 section 来完成以下事情：
- 在模板或 section group 层级添加、移除或重新排序内容
- 控制作用于整个 section 布局和内容的主题设置
Block
你应该使用 block 来在 section 层级添加、移除或重新排序内容，或者当 block 能提升 section 的可用性时使用它。
开发 block 时要记住以下原则：
Block 布局
在设计 section 的网格布局时，要确保无论 block 类型和顺序如何，block 都能遵循逻辑且直观的阅读流。
以下是一些判断 block 如何在 section 中排列的建议：
- 对于需要层级的文字内容，将 block 垂直堆叠。
如果不需要展示层级关系，则可以水平堆叠 block，或创建一个可以根据 section 中的 block 类型自适应的网格。
当 block 是水平排列时，要确保 section 网格可以换行，或者提供横向滑动控件，以维持合适的 block 宽度。同时确保你的 section 网格是响应式的，可以根据屏幕大小重新排布 block。
不要依赖特定的 block 类型或顺序来设计布局，也不要通过调整 block 顺序来改变网格布局。
Block 的灵活性
为了平衡简洁性和灵活性，你需要认真考虑什么时候添加 block，以及每个 block 应该包含什么内容。block 太多会导致界面混乱、使用复杂。你可以根据以下原则来定义 block：
- 将设置分组到 block 中，以简化编辑体验，并减少编辑器侧边栏的杂乱。例如，你可以将图像 block 的自定义主题设置嵌套在这个 block 里。
- 当元素有特定层级时，把它们组合在一起，并可选地在前后允许插入 block。例如，你可以创建一个控制购物车页面商品项的单一 block。
- 避免设置过于细碎的 block。颗粒度太高会增加主题代码和商家编辑体验的复杂度。例如，不要把作者、日期和评论分成三个独立的 block，而是应该将它们组合成一个 block 或写入设置中。
App block 的考虑因素
商家可以把 应用提供的 block 添加到他们的主题中。作为主题开发者，你需要为这些类型的 block 添加支持。在决定是否在某个 section 中支持 app block 时，请考虑以下几点：
- 只在那些明确需要叠加额外转化工具或购买决策因素的 section 中提供 app block。例如，你可能希望在产品页的产品信息部分，或购物车模板中加入一个 app block。
- 在使用 app block 扩展主题时，始终要考虑抗脆弱性和 section 的目的。当插入一个未知类型的 block 时，布局会不会轻易破坏？是否需要写一堆处理边缘情况的 CSS？是否会让这个 section 的用途变得模糊或不一致？如果答案是“是”，那就避免使用 app block。
主题设置
使用 主题设置 来提供不同的外观和风格选项。主题设置可以作用在 section、block 和整个主题层级上。
Metafield
Shopify 提供了多种标准的 metafield，可以满足你目标客户群的需求。你可以查看有哪些可用的字段，并思考哪些使用场景适合放在主题中。例如，你可能会为护理指南或尺码表的 metafield 添加一个 section 或 block。当这些 metafield 被作为 动态数据源 引用时，它们会根据上下文（比如当前渲染的产品）自动更新。
在把 metafield 集成进你的主题时，可以考虑为 metafield 创建专门的 block。你也可以对目标用户的电商网站进行调研，分析他们是如何展示内容的，从而找出设计专属组件的机会。例如，你可以使用 metafield 来创建一个格式良好的电子产品信息列表，或者展示一款咖啡豆的混合与产地信息。
若有收获，就点个赞吧
0 人点赞
