主题架构​

一个主题定义了 SHOPLINE Online Store 的视觉风格、用户体验和功能特性。主题代码按照特定于 SHOPLINE 的标准目录结构及资产（例如 Image、CSS 和 JavaScript）进行组织。要了解主题如何融入 SHOPLINE，并了解如何设置环境来构建和测试主题，请参阅 SHOPLINE 主题概述。

提示

如果你正在为 SHOPLINE 主题商店构建一个主题，那么你需要满足一些特定的要求，这些要求涉及你的主题所提供的自定义选项、主题的风格以及所包含的功能。

内容​

主题文件分为以下几类：

  • 标记和特性 - 这些文件控制主题的布局和功能。它们使用 Handlebars 模板生成构成商家在线商店页面的 HTML 标记。
  • 配套资产 - 这些文件是主题中其他文件调用或使用的资源、脚本或本地化文件。
  • 配置文件 - 这些文件使用 JSON 存储配置数据，商家可以通过主题编辑器进行自定义。

标记和功能​

以下组件决定了每个页面的组织结构：

8375d642f7b9842f57b89519038f79c1.png

序号组成描述
1layout 文件主题的基础。使用布局文件来包含重复的主题元素，如页眉和页脚。
2template 文件控制页面显示内容的模板。每个主题应该包括不同类型的模板来显示不同类型的内容，如主页和商品详情页。你也可以为同一资源类型创建多个模板并将其与商店资源关联，以实现多样化。
3template 渲染的 sections可重复使用、可自定义的内容模块，商家可以将其添加到 JSON templates 中。
4每个 section 包含的 blocks可重复使用的、可自定义的内容模块，可以添加到 sections、移除和重新排列。

功能可以通过 templates、sections、blocks 和 snippets 引入到主题中。你可以使用 Handlebars、CSS 和 JavaScript 实现主题功能。主题的功能决定了客户如何与在线商店的内容进行互动。例如，你的主题需要提供一个带有 product类型的 Handlebars form helper，以允许客户将商品添加到购物车中。

配套资产​

你可以向主题添加配套资产以控制组件和功能的呈现，或存储可在各组件中使用的可重用代码片段。

例如，你需要添加资产为主题设置样式。这些资产通过定义在线商店的外观和内容部分的样式来表达商家的品牌。主题的样式由应用于 layout、template 和 section 文件的 CSS 和 JavaScript 来定义。

你可以将希望在整个主题中重复使用的 Handlebars 和 HTML 存储在 snippets 目录中。将主题的 CSS 和 JavaScript 存储在主题的 assets 目录中。

此外，你可以使用本地化文件将你的主题翻译成不同的语言。本地化文件包含一组用于整个主题的文本字符串的翻译，并存储在主题的 locales 目录中。

允许自定义主题组件​

商家可以通过 SHOPLINE 管理后台中的 SHOPLINE 主题编辑器来自定义他们的主题。主题可以提供不同的定制选项，以帮助商家创建他们期望的客户体验：

  • 你可以通过创建多个 sections 和 blocks 使你的主题模板模块化。请参考我们的 sections 和 blocks 最佳实践，以了解如何有效地设计 sections 和 blocks。
  • 你可以创建 settings 以允许商家控制主题的外观或行为。商家可以通过使用动态源为 settings 设置动态值。

目录结构和组件类型​

主题必须使用以下目录结构：

├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers
注意

除了列出的目录之外，不支持使用子目录。要查看完整主题目录结构的示例以及各种组件类型，请浏览 Seed GitHub 仓库。

若需要将主题上传到 SHOPLINE 在线商店，必须包含如下的文件：

  • layout/theme.html
  • config/settings_data.json
  • config/settings_schema.json

assets​

assets 目录包含主题中使用的所有资产，包括 Image、CSS 和 JavaScript 文件。

使用 assets_url helper 来引用主题中的资产。

config​

config 目录包含主题的配置文件。config 文件定义了主题编辑器中主题设置区域的设置，并存储它们的值。 主题设置是托管通用设置（例如排版和颜色选项）的好地方。可以通过 settings 对象访问主题设置。

提示

你也可以为 sections 和 blocks 创建设置。这些设置作为父 section 或 block 对象的一部分定义，并在主题编辑器中与关联的对象一起显示。

layout​

layout 目录包含主题的 layout 文件，通过这些文件渲染 template 文件。

layout 是 Handlebars HTML 文件，允许你在一个地方包含应在多个页面类型上重复的内容。例如，layout 是一个很好的地方，可以在其中包含你希望在 <head> 元素中的任何内容，以及页眉和页脚的 HTML 文件。

此文件夹中必须存在一个 theme.html 文件，才能将主题上传到 SHOPLINE。

locales​

locales 目录包含主题的 locale 文件，用于提供翻译后的内容。本地化文件允许你在主题编辑器中提供翻译后的体验，为在线商店提供翻译，并允许商家定制在线商店中文本内容。

sections​

sections 目录包含一个主题的所有 section 文件。

section 是 Handlebars HTML 文件，允许你创建可由商家定制的可重复使用的内容模块。它们可以包含 blocks，允许商家在 section 中添加、移除和重新排序内容。

snippets​

snippets 目录包含 Handlebars HTML 文件，用于托管较小的可重用代码片段。你可以使用 Handlebars snippet helper 在整个主题中引用这些代码片段。

templates​

templates 目录包含主题的 template 文件，用于控制每种页面类型上渲染的内容。

templates/customers 目录包含面向客户的页面的模板文件，例如登录和帐户概览页面。 你可以使用模板来添加适合页面类型的功能。例如，在商品模板中添加额外的商品推荐，或在文章模板中添加评论表单。你也可以为不同的使用情况创建同一模板类型的多个版本，以创建定制模板。

并非所有页面类型都需要模板。但是，如果要渲染某种页面类型，你需要至少有一个匹配的模板文件。例如，要渲染商品详情页面，你需要至少有一个类型为 product 的模板文件。

这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2025 SHOPLINE Limited.