概述

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 以红色突出显示:

image.png

位置

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 中呈现的。
AssetsSections 可以使用以下特定于 section 的 Handlebars helper 来捆绑它们自己的 JavaScript 和 CSS 资源:
- asset_url
SchemaSections 支持特定于 section 的 {{#schema}} 的 Handlebars 标记,此标记用于定义 section 的属性和设置,具体请查看 Section schema

使用

在处理 sections 时,您应该熟悉以下内容:

渲染 section

你可以通过以下几种方式渲染 section:

提示

如果你想在模板内渲染 section,请使用 JSON templates。JSON templates 为商家提供了更广泛的自定义选项,并且可以提高主题编辑器的性能。

静态渲染 section

你可以使用 Handlebars section helper 静态渲染 section。

例如,如果你有一个 /sections/header.html 文件,其中包含你的主题的标题内容,那么你可能想在theme.html 中包含该 section,以便在所有使用该布局的页面上呈现标题。

{{ section 'header' }}
注意

可以在多个主题文件中包含静态渲染的 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

这篇文章对你有帮助吗?