跳到主要内容

Sections 和 blocks

在设计 theme 时，您需要考虑何时在 section 或 block 中提供功能。Section 和 block 是模块化组件，为商家提供了自定义和扩展 theme 的机会。商家可以添加、移除 section 和 theme block，调整 section 和 block 的设置，以及引入 app blocks 和 metafields。

Sections​

Sections 可在所有页面上使用。

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

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

Blocks​

当需要在 section 层级添加、移除或重新排序内容，或能够提升 section 可用性时，您应提供 blocks。

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

  • 确保 theme 设置 的作用范围限定在 block 内。
  • 根据内容选择合适的 block 布局，并确保无论 block 类型或顺序如何，block 的排列逻辑清晰。
  • 选择适当的灵活性级别以引入 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 的 theme 设置嵌套在该 block 内部。
  • 当元素遵循特定层级关系时，将元素归组，并可选择性地允许在前后插入 block。例如，您可以创建一个控制购物车页面商品行的单一 block。
  • 避免提供过于细粒度的 block。细粒度过高会增加 theme 代码和商家编辑体验的复杂性。例如，应将作者、日期和评论归入一个 block 或作为设置项，而非将这三个属性分别设置为独立的 block。
✅
❌

Theme 设置​

使用 theme 设置 提供不同的外观和风格选项。Theme 设置可在 section、block 和 theme 三个层级应用。

Metafields​

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

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