# 从零开始
> 从零手写第一个 Shoplazza 主题：创建 layout、首页 template、section、snippet、导航菜单和商品详情页，再上传预览。
# 从零创建主题
本指南带你从零创建第一个 Shoplazza 主题。完成后，你将拥有一个包含布局、首页、导航菜单和商品详情页的可运行主题。
## 你将学到什么
- Shoplazza 主题的基本目录结构
- 如何创建 layout、template、section 和 snippet
- 如何构建动态导航菜单和商品详情页
- 如何上传并预览主题
## 前置需求
1. 一个 [Shoplazza 商店](https://sso.shoplazza.com/login) — 没有商店就无法开发主题。
2. 文本编辑器，或使用内置的 [Shoplazza 主题编辑器](/docs/theme/developer-tools/theme-editor)。
3. HTML、CSS、JavaScript 和 [Liquid](/docs/theme/references/liquid/) 的基础知识 — Shoplazza 主题使用这些技术构建。
## 流程概览
```mermaid
flowchart LR
A[第一步: 搭建目录结构] --> B[第二步: 创建 layout 文件]
B --> C[第三步: 创建首页 template]
C --> D[第四步: 创建配置文件]
D --> E[第五步: 创建导航菜单]
E --> F[第六步: 创建商品详情页]
F --> G[第七步: 上传并预览主题]
```
## 第一步：搭建目录结构
新建一个主题文件夹，按以下结构创建：
```text
my-new-theme/
├── assets/
├── config/
│ └── settings_data.json
├── layout/
│ └── theme.liquid
├── sections/
│ ├── header.liquid
│ └── product-template.liquid
├── snippets/
│ └── navigation.liquid
└── templates/
├── index.liquid
└── product.liquid
```
各目录的完整说明见 [主题架构概览](/docs/theme/architecture/overview)。
:::tip
你也可以用 `shoplazza themes init` 几秒生成完整的目录结构，它会克隆 [Nova 2023](/docs/theme/developer-tools/nova-2023)。Nova 2023 是一个功能完整的参考主题，结构比这里手动搭建的最小骨架更丰富。详见 [使用 CLI 开发主题](/docs/theme/getting-started/develop-with-cli)。
:::
## 第二步：创建 layout 文件
Layout 文件是包裹所有页面的 HTML 外壳。创建 `layout/theme.liquid`：
```liquid
{{ shop.name }} - {{ page.title }}
{{ content_for_header }}
{% section 'header' %}
{{ content_for_layout }}
{{ content_for_js }}
```
`{{ content_for_header }}` 和 `{{ content_for_js }}` 加载 Shoplazza 所需的脚本。`{{ content_for_layout }}` 是 template 内容注入的位置。`{% section 'header' %}` 渲染你将在第五步创建的 header section。详见 [主题布局](/docs/theme/architecture/layouts/overview)。
## 第三步：创建首页 template
创建 `templates/index.liquid` — 这是商店首页的渲染内容：
```liquid
Welcome to {{ shop.name }}
This is your first Shoplazza theme.
```
## 第四步：创建配置文件
创建 `config/settings_data.json`，写入最小合法结构：
```json
{
"current": {}
}
```
主题配置详见 [Theme config](/docs/theme/architecture/config/overview)。
## 第五步：创建导航菜单
构建一个动态页眉导航，从商店的 [linklist](/docs/theme/references/liquid/objects/linklist) 配置读取数据并支持下拉子菜单。
首先创建 header section `sections/header.liquid`：
```liquid
```
这里引入了一个名为 `navigation` 的 [snippet](/docs/theme/architecture/snippets)，并传入 `main-menu` linklist 的链接。
接下来创建导航 snippet `snippets/navigation.liquid`：
```liquid
```
该 snippet 遍历 linklist 中的每个链接，如果某个链接有子链接，则渲染子菜单。Snippet 详见 [代码片段](/docs/theme/architecture/snippets)。
## 第六步：创建商品详情页
构建一个 [section](/docs/theme/architecture/sections/overview)，展示商品信息并通过主题编辑器提供商家可配置的设置项。
创建商品 section `sections/product-template.liquid`：
```liquid
{% if product %}
{{ product.title }}
{{ product.description }}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{{ product.price | money }}
{% else %}
该商品不存在。
{% endif %}
{% schema %}
{
"name": "Product template",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
}
]
}
{% endschema %}
```
`{% schema %}` 块定义了一个 `show_vendor` 开关，商家可在主题编辑器中控制。所有可用的设置类型见 [输入设置](/docs/theme/architecture/settings/input-settings)。
然后创建商品 template `templates/product.liquid`，在商品页面中渲染该 section：
```liquid
{% section 'product-template' %}
```
Section 内的 `product` 对象自动指向当前正在查看的商品。
## 第七步：上传并预览主题
1. 将 `my-new-theme/` 文件夹压缩为 `.zip` 文件。
2. 在 Shoplazza 管理后台进入**在线商店** → **主题**。
3. 点击**上传主题**，选择 `.zip` 文件。
4. 上传完成后，点击主题旁边的**操作** → **预览**。
浏览器将在新标签页中打开你的主题，展示导航菜单、首页和商品页面。在主题编辑器中，你可以将 linklist 分配给 `main-menu`，并在商品页面切换 **Show vendor** 设置项。
:::tip
如需更高效的开发体验（实时预览和热更新），请参阅 [基于 CLI 的教程](./index.md)。
:::
## 下一步
主题已经可以运行了，接下来可以深入这些主题：
- [主题架构概览](/docs/theme/architecture/overview) — 了解每个目录和文件类型
- [主题布局](/docs/theme/architecture/layouts/overview) — 自定义页眉、页脚和 HTML 外壳
- [主题配置](/docs/theme/architecture/config/overview) — 添加商家可配置的设置项
- [Section](/docs/theme/architecture/sections/overview) — 构建可复用、可自定义的内容模块
- [Snippet](/docs/theme/architecture/snippets) — 创建可复用的代码片段
- [多语言文件](/docs/theme/architecture/locales/overview) — 添加多语言支持
- [Liquid 对象](/docs/theme/references/liquid/objects/) — 了解 template 中可用的动态数据