概述
Sections 是 Handlebars 文件,允许你创建可由商家自定义的可重用内容模块。它们还可以包含 blocks,使得商家能够在 Section 内添加、删除和重新排列 section 内容的 blocks。
例如,你可以创建一个带文本的图像 section,该 section 显示并排的图像和文本,并提供选项供商家选择图像、设置文本以及选择显示顺序。
Sections 可以通过 JSON templates 动态添加到页面,给与商家灵活性以轻松自定义页面布局。包含在 JSON templates 的 sections 可以支持 App Blocks,这使得商家可以在不编辑主题代码的情况下,将应用内容包含在 sections 内。JSON templates 最多可以渲染 25 个 sections,每个 section 最多可以有 16 个 blocks。
Sections 也可以包含静态的 sections,这可以为商家提供上下文中的静态内容自定义选项。
默认情况下,Sections 可用于任何模板。你可以在 section schema 中限制哪些模板可以访问。
以下图表显示了主要的主题架构组件,其中 sections 以蓝色突出显示,blocks 以红色突出显示:
位置
Section 文件位于主题的 sections
目录中:
└── theme
...
├── templates
├── sections
...
内容
Section 可以包含三种主要类型的内容:
类型 | 描述 | 是否必须 |
---|---|---|
主内容 | 任何你想保护在 section 的 HTML 或 Handlebars 内容。 Sections 与其他 Handlebars 主题文件一样,可以访问全局对象和 Handlebars helper,还可以访问以下 section 特定对象: - section 对象 object - 包含 section 的属性和设置值- block 对象 object - 包含单个 section block 的属性和设置值除了全局对象之外,在 section 之外创建的变量在 section 内是不可访问的。 section 和 block 对象,以及在 section 中创建的变量,在它们各自的 section 之外是不可用的。唯一的例外是,当你引用代码片段中的 section 和 block 对象时,代码段是在你引用的 section 中呈现的。 | 否 |
Assets | Sections 可以使用以下特定于 section 的 Handlebars helper 来捆绑它们自己的 JavaScript 和 CSS 资源: - asset_url | 否 |
Schema | Sections 支持特定于 section 的 {{#schema}} 的 Handlebars 标记,此标记用于定义 section 的属性和设置,具体请查看 Section schema | 是 |
使用
在处理 sections 时,您应该熟悉以下内容:
渲染 section
你可以通过以下几种方式渲染 section:
- 在 JSON templates 中引用 section
- 使用 section helper 静态渲染 section
- 使用 片段渲染 API 渲染 section
如果你想在模板内渲染 section,请使用 JSON templates。JSON templates 为商家提供了更广泛的自定义选项,并且可以提高主题编辑器的性能。
静态渲染 section
你可以使用 Handlebars section helper 静态渲染 section。
例如,如果你有一个 /sections/header.html
文件,其中包含你的主题的标题内容,那么你可能想在theme.html 中包含该 section,以便在所有使用该布局的页面上呈现标题。
可以在多个主题文件中包含静态渲染的 section。然而,section 只存在一个实例。如果在一个位置更改了 section 的设置,则该更改将应用于所有渲染该 section 的位置。
将 Section 与主题编辑器集成
当用户通过主题编辑器自定义 section 时,这些 section 的 HTML 将动态地添加、删除或重新渲染到现有的 DOM 中,而不需要重新加载整个页面。然而,页面加载时运行的任何相关的 JavaScript 将不会再次运行。
此外,必须确保当选择 section 或 block 时,该 section 或 block 变为并保持可见。例如,选择轮播图 section 时,应当滚动到视图中,并且轮播图滚动到所选 block,并在选择该 block 时暂停。
为了帮助识别主题编辑器操作,如 section 和 block 选择或重新排序,您可以使用主题编辑器发出的 JavaScript 事件。
你可能还想阻止特定代码在主题编辑器中运行。为此,你可以使用 Handlebars 和 JavaScript 变量来检测主题编辑器的状态。
Section 文件必须在其 schema 中定义预设,以支持通过主题编辑器添加到 JSON templates 中。没有预设的 section 文件应该手动包含在 JSON 文件中,且无法通过主题编辑器删除。
支持 App Blocks
App Blocks 允许应用程序开发人员为商家创建 block,使他们可以在主题中添加应用内容,而无需直接编辑主题代码。
要了解如何使你的主题与 App Block 兼容,请参阅 App blocks。