spot_img
HomeShopify建站教程Shopify教程 使用分区组使分区真正无处不在 (2023)

Shopify教程 使用分区组使分区真正无处不在 (2023)

spot_img
JasperAI 10000字免费额度试用

分区组是一项新功能,可升级主题架构。 在引入此新功能之前,Sections Everywhere 并非无处不在——您无法在主题的页眉和页脚区域添加部分或应用程序。

这导致编辑器的设计灵活性有限,并迫使商家和应用程序在主题中编辑和注入代码,从而使他们脱离了主题升级路径。 这让商家面临一大堆潜在问题,例如无法获得错误修复和新功能。

有了分区组,这些问题就不再存在了。 在本文中,我们将了解什么是分区组、它们如何工作以及如何在主题设计中利用它们。

什么是分区组?

分区组使主题开发人员能够在主题布局中创建动态的分区集合。 换句话说,它们使您能够将主题中的某些部分组合在一起。 这反过来又允许商家直接在主题编辑器中添加、删除和重新排序部分。

此功能在主题的部分目录中创建,并通过 {% sections %} 液体标签。

WordPress divi主题
添加节组的 Liquid 代码片段
代码片段在 theme.liquid 添加节组的位置。
主题中部分文件夹的屏幕截图,红色箭头指向“footer-group.json”和“header-group.json”。 一些信息被模糊了。
主题中的部分文件夹的屏幕截图 footer-group.jsonheader-group.json.

分区组还提供了使用主题应用程序扩展为商家主题的页眉和页脚区域构建功能的机会,并且是一种向创建的任何其他分区组添加功能(如应用程序)的方法。

通过直接从主题编辑器为商家提供额外的控制级别,他们不再需要将代码注入到他们的主题中来实现他们需要的功能。 它还使您可以更好地控制主题的外观和更深入的自定义功能。

在下面的截图中,您可以在主题编辑器的标题部分下方和模板上方看到新的“添加部分”选项,允许在模板上方添加和重新排序部分。

主题编辑器前后的并排屏幕截图在模板上方有新的“添加部分”选项。
主题编辑器的屏幕截图前后显示模板上方的新“添加部分”选项。

除了上面的页眉示例之外,页脚组以及您决定创建的任何其他节组也可以使用节组。

为什么要使用分区组

分区组为主题开发人员和商家带来了一些主要好处。

1.商家可以灵活地在任何地方添加版块

可以在页眉、页脚和旁白组中添加部分,这在以前是不可能的。 商家可以在页眉上方和页脚下方添加部分,并自定义或重新排列部分组中的部分。 除此之外,部分可以重新排序或从主题编辑器中删除,而无需更改代码。

2.主题开发者可以构建更多可定制的主题

您现在可以提供一系列可用作页眉或页脚的部分,供商家选择。 这使您和商家在主题和商店的外观方面具有更大的灵活性。

高质量外链购买

此外,商家可以添加自动呈现在所有页面上的版块,而不必逐个模板重新添加版块模板。 通过使用部分组,添加到该组的任何部分都将在所有模板中重复。

3. App无需修改主题代码即可与主题集成

这一新功能将应用程序块的强大功能带到页眉和页脚等区域,以及您创建的任何其他部分组,这意味着商家可以轻松地将第三方应用程序集成到主题中,而无需修改主题代码。 应用程序现在还可以针对特定的主题部分组(例如页眉、页脚或旁边)。

分区组的工作原理

自 Shopify Winter ’23 Edition 发布以来,所有模版都可以使用分区组。 如果您熟悉静态呈现的部分,那么您也会熟悉部分组的组织方式和集成到主题中的方式。 下面,我们来看看为了用部分组替换静态呈现的部分(例如标题和公告栏)所需的更改。

WordPress建站服务
并排图形显示采用节组前后主题架构的比较。 新的主题体系结构显示了部分组如何在体系结构的顶部和底部包含部分列表。
采用版块分组前后的主题架构对比。 新的主题架构显示了以紫色区域突出显示的部分组如何包含部分列表。

主题结构

节组是 JSON 格式的文件,位于主题节目录中的 Liquid 节旁边。 每个主题在 sections 目录中最多可以有 20 个分区组文件。

在上面的例子中,两者 footer-group.jsonheader-group.json 在里面 /sections 目录是节组。 在命名这些分区组时,我们建议您以它们所代表的店面区域或它们将分组的分区类型命名。 我们还建议在文件名中使用“-group”前缀来指示该文件是一个节组。 此约定使得更容易区分 Liquid 节文件和节组。

并排图形显示左侧的新页眉组和右侧的新页脚组。
紫色区域反映了以它们所代表的店面区域命名的分区组。

每个部分组都包含一个部分列表和部分设置。 换句话说,它们是数据文件,机械师可以像管理 json 模板一样使用主题编辑器轻松管理它们。

我们来看看里面的内容 header-group.json 节组。 下面的示例显示了一个部分组,其中包含两个部分的设置数据:标题和公告栏。

如您所见,节组 json 数据共享一个与 json 模板中使用的结构非常相似的结构。 让我们首先检查在 json 模板和部分组中共享的字段:

wordpress建站公司

<

在线商店主题编辑器部分面板的屏幕截图,上面叠加了一个大红色箭头,指出了如何使用部分组的名称属性。
显示如何使用部分组的名称属性的在线商店主题编辑器部分面板。

姓名: 表示分区组名称的必填字段。 当分区组作为页面的一部分呈现时,此名称将显示在主题编辑器中。 该字段还接受使名称可翻译的翻译参考。

部分: 使用节 ID 作为键并使用节数据作为值的对象。 您可以将此属性留空。

section data的格式与settings_data.json中的section data相同。 每个切片组最多可以接受 25 个液体切片。

命令: 部分 ID 数组,按应呈现的顺序列出。 ID 必须存在于 sections 对象中。

现在,让我们看看分区组中允许的字段。

类型: 每个节组必须使用一种标准节组类型:

除了这些标准化的部分组类型,我们了解到每个主题都可以有自己的布局设计、约束和用例,这反过来会影响每个部分组在主题中扮演的角色。 因此,主题开发人员还可以使用以下约定根据需要创建自定义部分类型:

custom.<type-name>

如何渲染分区组

现在我们已经创建了一个分区组并将其保存在主题的 sections 目录中,我们可以开始使用 sections Liquid 标签将其与我们的主题布局代码集成。 节组只能集成到主题布局文件中,这将允许节组在使用该布局的所有模板上呈现。 为了在布局文件中呈现一个节组,例如 layouts/theme.liquid,我们可以简单地在 sections Liquid 标签中引用没有 .json 扩展名的部分组文件的名称。 例如,采用我们的以下主题结构:

我们可以简单的参考 footer-groups.jsonheader-group.json 在 – 的里面 layout/theme.liquid 文件:

{% sections "header-group" %}
{% sections "footer-group" %}

使用单独的 Liquid 标签来集成和渲染部分组为您提供了额外的灵活性:

  • 对主题布局的设计和结构没有限制
  • 每个部分组都可以轻松设置样式

让我们看一下 Dawn 如何在 layout/theme.liquid 文件:

Dawn 主题中“theme.liquid”文件差异的并排屏幕截图显示了用部分组替换静态呈现部分的过程。 左边是红色的是旧版本,右边是绿色的是新版本。
区别在于 theme.liquid Dawn 主题中的文件显示了用部分组替换静态呈现部分的过程。

如何控制哪些部分可以添加到部分组

正如名言所说,能力越大,责任越大。 分区组为商家设计店面带来了很大的灵活性和控制力。 它允许商家在这些部分组内自由添加、删除和重新排序部分。 由于版块组呈现在所有页面上,我们希望确保您能够在构建最佳店面时指导商家。 因此,我们弃用了 theme section templates 属性,并将其替换为两个更强大且可扩展的新属性: enabled_ondisabled_on.

使用这些新的主题部分属性,您可以通过主题编辑器控制每个部分可以插入的位置,从而防止商家在不应插入的地方添加部分。

并排显示标题部分组的部分属性之前和之后的屏幕截图。
左图显示了特色产品系列和特色产品部分如何可用于标题部分组。 右图显示了新的 enabled_ondisabled_on 部分属性使商家无法将特色产品系列和特色产品部分插入到标题部分组中。

我们以简单的特色产品部分为例。

场景 1:分区可以添加到所有模板和所有分区组

由于该部分没有使用任何属性——enabled_on, disabled_on, 或者 templates—该部分将自动可用于插入所有模板和部分组。

writesonic

这也相当于说:

{
"enabled_on": {
  "templates”: ["*"],
  "groups”: ["*"]
}

情况 2:该部分无法添加到密码模板,但它仍然可以添加到所有部分…

5分钟生成10篇英文软文article forge软件试用
siteground guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES