# Sections 和 blocks

在设计 theme 时，您需要考虑何时在 section 或 block 中提供功能。Section 和 block 是模块化组件，为商家提供了自定义和扩展 theme 的机会。商家可以添加、移除 section 和 theme block，调整 section 和 block 的设置，以及引入 [app blocks](/zh-CN/docs/theme/architecture/sections/app-blocks-for-themes) 和 [metafields](/zh-CN/docs/theme/references/liquid/objects/metafield)。

## Sections

[Sections](/zh-CN/docs/theme/architecture/sections/overview) 可在所有页面上使用。

在构建 theme template 时，您应确保 template 的默认内容包含在主 template section 中，且 section 支持添加、移除和重新排序。您可以使用 section 实现以下操作：

*   在 template 层级添加、移除或重新排序内容
*   控制作用于整个 section 布局和内容的 theme 设置

![](https://cnres.appracle.com/3a42f4a334d7066de6a49b1eee1f3660.png)

## Blocks

当需要在 section 层级添加、移除或重新排序内容，或能够提升 section 可用性时，您应提供 [blocks](/zh-CN/docs/theme/architecture/sections/section-schema#blocks)。

![](https://cnres.appracle.com/8a6e19ad0b65e91def23c9a3848331af.png)

在开发 block 时，请牢记以下原则：

*   确保 [theme 设置](/zh-CN/docs/theme/architecture/settings/overview) 的作用范围限定在 block 内。
*   根据内容选择合适的 [block 布局](#block-%E5%B8%83%E5%B1%80)，并确保无论 block 类型或顺序如何，block 的排列逻辑清晰。
*   选择适当的[灵活性级别](#block-%E4%B8%8E%E7%81%B5%E6%B4%BB%E6%80%A7)以引入 block。

### Block 布局

在设计 section 的网格布局时，确保无论 block 类型和排列顺序如何，block 都遵循清晰直观的阅读流向。

在确定 block 在 section 中的排列方式时，请考虑以下几点：

*   对于有层级关系的文本内容，应将 block 垂直堆叠排列。

![](https://cnres.appracle.com/44ba0a1303b18219be08126806dfa47a.png)

*   如果不需要体现层级关系，可以将 block 水平堆叠，或创建能够适应 section 中可用 block 类型的网格布局。

![](https://cnres.appracle.com/9c6e3e3479e62563d6f05c1da8d8e75a.png) ![](https://cnres.appracle.com/34535c2313884f4d47b560cad34ded70.png)

*   水平堆叠 block 时，应确保 section 网格能够在多行中自动换行，或提供水平滑动控件以保持舒适的 block 宽度。确保 section 网格具有响应式设计，block 能够根据屏幕尺寸自适应排列。

✅

![](https://cnres.appracle.com/e9d9f06ea8e28a7be0b50d2663b5ceb3.png) ![](https://cnres.appracle.com/790ddebfc02ac3148466ee6e5fc549fe.png)

❌

![](https://cnres.appracle.com/0d46006a0a8a9999fa3ed66287bb0c9d.png)

*   不要依赖特定的 block 类型或顺序来设计布局，也不要通过特定的 block 排序来改变网格布局。

✅

![](https://cnres.appracle.com/ccbced21afa005f9a9a33b3ee4072783.png)

❌

![](https://cnres.appracle.com/562d35db84c0e9fda1dc48f2a922d042.png)

✅

❌

![](https://cnres.appracle.com/fa423f7f4194d7dedc227bbdabb64f65.png)

### Block 与灵活性

为了在简洁性与灵活性之间取得平衡，您需要仔细考量何时添加 block 以及每个 block 应包含哪些内容。过多的 block 会造成界面杂乱和复杂度上升。您可以参考以下原则来定义 block。

*   将相关设置分组到 block 中，以简化编辑体验并整理编辑器侧边栏。例如，您可以将自定义图片 block 的 theme 设置嵌套在该 block 内部。
*   当元素遵循特定层级关系时，将元素归组，并可选择性地允许在前后插入 block。例如，您可以创建一个控制购物车页面商品行的单一 block。
*   避免提供过于细粒度的 block。细粒度过高会增加 theme 代码和商家编辑体验的复杂性。例如，应将作者、日期和评论归入一个 block 或作为设置项，而非将这三个属性分别设置为独立的 block。

✅

❌

![](https://cnres.appracle.com/d24e294cc68713f97c1d6cd4f5157b2d.png)

## Theme 设置

使用 [theme 设置](/zh-CN/docs/theme/architecture/settings/overview) 提供不同的外观和风格选项。Theme 设置可在 section、block 和 theme 三个层级应用。

![](https://cnres.appracle.com/146c4066e86c54c097871591ec3b31fc.png)

### Metafields

Shoplazza 提供了多种标准 [metafields](/zh-CN/docs/theme/references/liquid/objects/metafield)，可满足您目标细分市场的需求。请查阅可用的 metafield，并考虑哪些使用场景适合该 theme。例如，您可以为护理指南或尺码表 metafield 添加 section 或 block。这些 metafield 作为[动态数据源](/zh-CN/docs/theme/architecture/settings/dynamic-sources)引用时，会根据其上下文（例如当前渲染的商品）动态更新内容。

![](https://cnres.appracle.com/23beec3c8bdc242a4fd00d853d56a773.png)

在将 metafield 集成到 theme 时，建议为 metafield 构建专属 block。您还可以对目标细分市场的电商网站进行审查，分析内容呈现方式，从而发现设计特定组件的机会。例如，您可以使用 metafield 为电子产品创建格式规范的信息列表，或添加关于咖啡拼配和产地的介绍信息。