主题结构概述

主题控制着商家网店的组织、功能和风格。主题代码由 Shopify 主题专用文件的标准目录结构组织，以及图像、样式表和脚本等。

内容

主题文件一般分为以下几类：

• 标记和功能 – 这些文件控制着主题的布局和功能。它们使用 Liquid 生成 HTML 标记，构成商家网店的页面。
• 支持资产 – 这些文件是资产、脚本或本地文件，它们被主题中的其他文件调用或使用。
• 配置文件 – 这些文件使用 JSON 来存储配置数据，商家可使用主题编辑器对其进行自定义。

标记和功能

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

	部件	说明
1	布局文件（layout文件夹）	主题的基础,布局文件用于存放重复的主题元素，如页眉和页脚。
2	模板（templates文件夹）	控制页面显示内容的模板。每个主题都应包含不同类型的模板，以显示不同类型的内容，如主页和产品。您还可以为同一类型页面创建多个模板，让你的网店页面有更多的变化。
3	布局使用的分区（sections文件夹）	商家能够在页眉页脚这样的地方添加的分区。
4	模板使用的分区（sections文件夹）	商家能够在主题编辑器中给页面添加的分区（页面使用的json模板）
5	分区包含的区块	可添加至分区的可重复使用、可定制的内容模块，

可在 Liquid 模板文件、版块、区块和片段中为主题引入功能。您可以使用 Liquid、CSS 和 JavaScript 来实现主题功能。主题的功能决定了客户与网店内容的交互方式。例如，您的主题需要通过提供带有产品类型的 Liquid form tag，让客户将产品添加到购物车。

辅助资产

您可以在主题中添加辅助资产，以控制组件和功能的展示，或存储可跨组件使用的可重用代码片段。

例如，您需要添加资产来设计主题风格。这些资产通过定义网店的美感和内容部分的样式来帮助表达商家的品牌。主题的样式由应用于布局、模板和分区文件的 CSS 和 JavaScript 定义。

你可以在片段中存储希望在主题中重复使用的 Liquid 和 HTML。将主题的 CSS 和 JavaScript 保存在主题的 assets 目录中。

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

允许自定义主题组件

商家可以通过使用Shopify主题编辑器，在Shopify管理中自定义自己的主题。主题可以提供不同的自定义选项，使商家能够创建自己想要的客户体验：

• 您可以通过创建多个分区和区块，将主题模板和布局分区组模块化。
• 您可以创建设置，让商家控制主题的外观或行为。商家可以使用动态源为设置设置动态值。

目录结构和组件类型

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

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

除列出的子目录外，不支持其他子目录。

要查看完整的主题目录结构示例以及各种组件类型，请访问 Dawn GitHub 代码库。

assets

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

使用 asset_url引用主题中的资产。

通过添加 .liquid 扩展名，您可以在非二进制资产文件中访问有限的 Liquid 功能。常见用例包括 JavaScript（.js.liquid）和 CSS（.css.liquid）文件。带有此扩展名的文件可以访问以下功能：

• 设置对象
• Liquid filters

config

config 目录包含主题的配置文件。配置文件定义主题编辑器中主题设置区域的设置，并存储其值。

主题设置是存放一般设置（如排版和颜色选项）的好地方。可以通过设置对象访问主题设置。

layout

layout目录包含主题的布局文件

布局是一种 Liquid 文件，可让你在一个位置包含多个页面类型中需要重复的内容。例如、页眉和页脚。

要将主题上传到 Shopify，该文件夹中必须有一个 theme.liquid 文件。

locales

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

sections

sections目录包含主题的分区和分区组。

分区是 Liquid 文件，可以创建可重复使用的内容模块，供商家自定义。它们还可以包含区块，允许商家添加、删除和重新排列区块中的内容。

分区组是 JSON 容器，允许商家添加、移除和重新排列版面文件中的区块，如页眉和页脚。

snippets

snippets目录包含 Liquid 文件，其中包含较小的可重复使用的代码片段。你可以使用 Liquid render 标签在整个主题中引用这些代码片段。

templates

templates 目录包含主题的模板文件，这些文件控制着每种类型页面的渲染内容。

templates/customers 目录包含以客户为中心的页面（如登录和账户概览页面）的模板文件。

你可以使用模板添加对页面类型有意义的功能。例如，可以在产品模板中添加额外的产品推荐，或在文章模板中添加评论表单。您还可以创建同一模板类型的多个版本，为不同用例创建自定义模板。

模板不是必须的。不过，你需要为你要呈现的任何页面类型创建一个匹配的模板。例如，要呈现产品页面，至少需要一个产品类型的模板。

原文：https://shopify.dev/docs/themes/architecture