# 主题架构概述

> Shoplazza 主题的组织方式：Liquid 标记文件、辅助资产与 JSON 配置文件，以及 layout、template、section 和 block 之间的关系。

theme 控制着商家在线商店的组织结构与视觉风格。theme 代码按照 Shoplazza theme 专属的[标准目录结构](/zh-CN/docs/theme/architecture/overview#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84%E4%B8%8E%E7%BB%84%E4%BB%B6%E7%B1%BB%E5%9E%8B)进行组织，并包含图片、样式表和脚本等辅助资产。如需了解 theme 在 Shoplazza 中的定位以及如何搭建开发环境，请参阅 Shoplazza theme 概述。

## 内容

theme 文件分为以下几大类：

*   [标记文件](/zh-CN/docs/theme/architecture/overview#%E6%A0%87%E8%AE%B0%E6%96%87%E4%BB%B6) — 这些文件控制 theme 的布局与功能，使用 Liquid 生成构成商家在线商店各页面的 HTML 标记。
*   [辅助资产](/zh-CN/docs/theme/architecture/overview#%E8%BE%85%E5%8A%A9%E8%B5%84%E4%BA%A7) — 这些文件是 theme 中其他文件调用或使用的资产、脚本或 locale 文件。
*   [配置文件](/zh-CN/docs/theme/architecture/overview#%E6%94%AF%E6%8C%81-theme-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89) — 这些文件使用 JSON 存储配置数据，商家可通过[主题编辑器](/zh-CN/docs/theme/developer-tools/theme-editor)自定义这些数据。

### 标记文件

以下几个部分决定了每个页面的组织结构：

![](https://cnres.appracle.com/42841d4052ec426e86fa2232ea4ebd48.png)

| 编号 | 组件 | 描述 |
| --- | --- | --- |
| **1** | [layout 文件](/zh-CN/docs/theme/architecture/layouts/overview) | theme 的基础。使用 layout 文件承载页眉、页脚等需要在多个页面重复出现的 theme 元素。 |
| **2** | [template](/zh-CN/docs/theme/architecture/templates/overview) | 控制页面显示内容的 template。每个 theme 应包含不同类型的 template，以展示不同类型的内容，例如[首页](/zh-CN/docs/theme/architecture/templates/home)和[商品页](/zh-CN/docs/theme/architecture/templates/product)。 |
| **3** | template 渲染的 [section](/zh-CN/docs/theme/architecture/sections/overview) | 商家可添加到 Liquid template 中的可复用、可自定义内容模块。 |
| **4** | 每个 section 包含的 [block](/zh-CN/docs/theme/architecture/sections/section-schema#blocks) | 可添加到 section 中的可复用、可自定义内容模块，支持添加、移除和重新排序。 |

### 辅助资产

您可以在 theme 中添加辅助资产，用于控制组件和功能的呈现方式，或存储可跨组件复用的代码片段。

例如，您需要添加资产来为 theme 定义样式。这些资产通过定义在线商店的视觉风格以及各 section 的样式来体现商家品牌特色。theme 的样式由应用于 layout、template 和 section 文件的 CSS 和 JavaScript 定义。

您希望在 theme 中复用的 Liquid、HTML、CSS 和 JavaScript 可以存放在 [snippet](/zh-CN/docs/theme/architecture/overview#snippets) 中。theme 的 CSS 和 JavaScript 也存储在 theme 的 [assets](/zh-CN/docs/theme/architecture/overview#assets) 目录中。

此外，您还可以使用 locale 文件将 theme 翻译为不同语言。locale 文件包含 theme 中各处文本字符串的翻译内容，存储在 theme 的 [locales](/zh-CN/docs/theme/architecture/locales/overview) 目录中。

### 支持 theme 组件的自定义

商家可以在 Shoplazza 管理后台通过 [Shoplazza 主题编辑器](/zh-CN/docs/theme/developer-tools/theme-editor)自定义其 theme。Theme 可以提供多种自定义选项，让商家打造理想的客户体验：

*   您可以通过创建多个 section 和 block，使 theme template 和 layout section group 模块化。请参阅我们的 [section 和 block 最佳实践](/zh-CN/docs/theme/best-practices/sections-and-blocks)，了解如何有效设计 section 和 block。
*   您可以创建[设置项](/zh-CN/docs/theme/architecture/settings/overview)，允许商家控制 theme 的外观或行为。商家可以通过[动态数据源](/zh-CN/docs/theme/architecture/settings/dynamic-sources)为设置项赋予动态值。

## 目录结构与组件类型

Theme 只能使用以下目录：

**Shoplazza theme 目录结构**

```text
.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers
```

不支持上述列表以外的子目录。

**备注**

theme 上传至 Shoplazza 的唯一必需条件是：`layout` 目录中包含 `theme.liquid` 文件。其他目录都是可选的。

### assets

`assets` 目录包含 theme 使用的所有资产，包括图片、CSS 和 JavaScript 文件。

在 theme 中引用资产时，请使用 [shoplaza_asset_url](/zh-CN/docs/theme/references/liquid/filters/hosted-file#shoplaza_asset_url) Liquid URL filter。

### config

`config` 目录包含 theme 的[配置文件](/zh-CN/docs/theme/architecture/config/overview)。配置文件用于定义主题编辑器**主题设置**区域中的[设置项](/zh-CN/docs/theme/architecture/settings/overview)，并存储其对应的值。

主题设置非常适合用于承载排版、颜色等通用设置。主题设置可通过 [settings 对象](/zh-CN/docs/theme/references/liquid/objects/settings)访问。

**提示**

您也可以为 [section](/zh-CN/docs/theme/architecture/sections/section-schema#settings) 和 [block](/zh-CN/docs/theme/architecture/sections/section-schema#blocks) 创建设置项。这些设置项作为父级 section 或 block 对象的一部分定义，并与关联对象一起显示在主题编辑器中。

### layout

`layout` 目录包含 theme 的 [layout](/zh-CN/docs/theme/architecture/layouts/overview) 文件，所有 [template](#templates) 文件都通过 layout 进行渲染。

Layout 是 Liquid 文件，允许您将需要在多个页面类型中重复出现的内容放在同一位置管理。

此文件夹中必须存在 `theme.liquid` 文件，theme 才能上传至 Shoplazza。

### locales

`locales` 目录包含 theme 的 [locale 文件](/zh-CN/docs/theme/architecture/locales/overview)，用于提供翻译内容。Locale 文件允许您在[主题编辑器](/zh-CN/docs/theme/developer-tools/theme-editor)中提供翻译体验，为在线商店提供译文，并允许商家自定义在线商店中的文本内容。

### sections

`sections` 目录包含 theme 的 [section](/zh-CN/docs/theme/architecture/sections/overview)。

Section 是 Liquid 文件，允许您创建商家可自定义的可复用内容模块。Section 还可以包含 [block](/zh-CN/docs/theme/architecture/sections/section-schema#blocks)，允许商家在 section 内添加、移除和重新排序内容。

### snippets

`snippets` 目录包含承载较小可复用代码片段的 Liquid 文件。您可以在整个 theme 中通过 Liquid [include 标签](/zh-CN/docs/theme/references/liquid/tags/theme-tags#include)或 [render 标签](/zh-CN/docs/theme/references/liquid/tags/theme-tags#render)来引用这些 snippet。

### templates

`templates` 目录包含 theme 的 [template 文件](/zh-CN/docs/theme/architecture/templates/overview)，用于控制每种类型页面的渲染内容。

`templates/customers` 目录包含面向客户的页面（如登录页及相关账户概览页）的 template 文件。

您可以使用 template 添加适合该页面类型的功能。例如，可以在商品 template 中添加额外的商品推荐内容。

template 不是必需的，但您需要为每种要渲染的页面类型提供对应的 template。例如，要渲染商品页面，至少需要一个 `product` 类型的 template。