--- title: "templates" doc_type: static doc_category: static doc_version: v20270301 source_url: html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates' md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates.md' --- # templates `templates` 目录包含了主题的多种页面类型模板文件，模板文件定义了页面的布局和内容展示方式，支持 `.html` 和 `.json` 两种文件后缀格式： + **HTML 模板**：适用于固定页面内容，通常用于静态页面，内容固定且不依赖动态数据。 + **JSON 模板**：适用于动态页面，支持通过 [组件](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md) 灵活搭建页面结构 --- ## 目录结构{#OJcnm} 以下是标准主题的页面模板目录结构： ```bash templates ├── customers # 客户相关页面 │ ├── account.json # 账户页 │ ├── activate_account.json # 账户激活页 │ ├── addresses.json # 地址管理页 │ ├── company.json # 公司注册页 │ ├── forgot_password.json # 忘记密码页 │ ├── login.json # 登录页 │ ├── order.json # 订单详情页 │ ├── orders.json # 订单列表页 │ └── register.json # 注册页 ├── 404.json # 404错误页 ├── article.json # 博客详情页 ├── blog.json # 博客列表页 ├── cart.json # 购物车页 ├── collection.json # 商品分类详情页 ├── collections_all.json # 商品分类集合页 ├── gift_card.html # 礼品卡页面（静态 HTML） ├── index.json # 首页 ├── page.contact.json # 联系我们页面 ├── page.json # 自定义页面 ├── page.order_tracking.json # 订单跟踪页面 ├── password.json # 密码保护页 ├── policy.html # 政策页面（静态 HTML） ├── product.json # 商品详情页 ├── proofing.html # 打烊页（静态 HTML） └── search.json # 搜索结果页 ``` --- ## 模板类型 {#kwgVv} 每个模板文件都对应一种模板类型，一种模板有一个或多个访问路径： | 模板类型 | 访问路径 | 文件路径 | 描述 | | --- | --- | --- | --- | | index | / | templates/index.json | 店铺首页 | | password | /password | templates/password.json | 店铺密码保护页，展示密码填写表单信息 | | proofing | /proofing | templates/proofing.html | 店铺打烊页，展示打烊后的页面 | | 404 | /404 | templates/404.json | 无效URL时展示的404页 | | cart | /cart | templates/cart.json | 购物车页，展示商品加购后的购物车列表 | | search | /search | templates/search.json | 搜索结果页，展示搜索结果列表 | | product | /products/\{productHandle\} | templates/product.json | 商品详情页，展示商品的sku、优惠、加购按钮等信息 | | collections_all | /collections-all | templates/collections_all.json | 商品分类集合页，展示全部商品分类 | | collection | /collections/\{collectionHandle\} | templates/collection.json | 商品分类详情页，展示单个商品分类下的全部商品 | | gift_card | /gift_cards/\{storeId\}/\{handle\} | templates/gift_card.html | 礼品卡页面，展示发给用户的礼品卡 | | blog | /blogs/\{blogHandle\} | templates/blog.json | 博客列表页，展示全部博客列表 | | article | /blogs/\{blogHandle\}/\{articleHandle\} | templates/article.json | 博客详情页，展示博客信息 | | page | /pages/\{handle\} | templates/page.json | 自定义页面，展示自定义内容信息 | | policy | /policies/\{handle\} | templates/policy.json | 政策页，展示政策合规信息 | | login | /user/signIn | templates/customers/login.json | 客户登录页，展示用户登录表单 | | register | /register | templates/customers/register.json | 客户注册页，展示用户注册表单 | | company | /user/company | templates/customers/company.json | 公司注册页，展示公司注册表单 | | activate_account | /user/activate | templates/customers/activate_account.json | 账户激活页，展示账户激活表单 | | forgot_password | /user/passwordNew | templates/customers/forgot_password.json | 忘记密码页，展示重置密码表单 | | account | /user/center | templates/customers/account.json | 账户页，展示账户的信息 | | addresses | /user/address/new | templates/customers/addresses.json | 地址管理页，用于地址列表展示及创建地址表单 | | ^ | /user/address/\{addressSeq\}/edit | ^ | ^ | | orders | /user/orders | templates/customers/orders.json | 订单列表页，展示全部订单列表 | | order | /user/orders/\{id\} | templates/customers/order.json | 订单详情页，展示订单信息 | --- ## HTML 模板 {#qbWua} 静态页面模板，文件后缀名为 `.html`，可直接在文件中写 HTML / CSS / Javascript 及 [Sline](https://developer.shopline.com/zh-hans-cn/docs/sline/sline-overview.md) 模板语法，不支持商家在主题编辑器动态搭建内容，一般用于政策页、打烊页等不需要商家灵活配置且内容相对固定的页面。 --- ## JSON 模板 {#YWmjr} 动态页面模板，文件后缀名为 `.json`，以一定的数据结构规范，渲染出动态组件数据。 ### 核心字段 {#CV20d} JSON 数据中基本会包含以下几个字段： | 字段 | 数据类型 | 必填 | 描述 | | --- | --- | --- | --- | | layout | string | 否 | 指定布局文件（如 theme.html） | | sections | object | 是 | 存放页面组件配置数据 | | order | array | 是 | 存放组件显示顺序 | ### 结构规范 {#ffcRQ} 以下是一个 JSON 模板的数据规范： ```json { layout: , sections: { : { "type": , "disabled": , "settings": { : }, "blocks": { : { "type": , "settings": { : }, "blocks": { : { "type": , "settings": { : } } } } }, "block_order": } }, "order": } ``` ### 字段说明 {#j1RJc} | 字段 | 数据类型 | 描述 | | --- | --- | --- | | \ | String | 指定布局文件，默认为 `layout.theme.html` | | \ | String | 全局唯一随机 hash 字符串，组件的唯一标识 | | \ | String | 组件文件名 | | \ | Boolean | 组件显示或隐藏
• `true`：隐藏。
• `false`：显示。
默认值：`false` | | \ | String | 全局唯一随机 hash 字符串，区块的唯一标识 | | \ | String | 区块文件名 | | \ | String[] | \ 列表，决定区块的渲染顺序 | | \ | String[] | \ 列表，决定组件的渲染顺序 | | \ | String | 配置项 ID，在 [schema](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md#HWiNw) 中自定义 | | \ | String | 配置项值，由商家自定义 | ### 结构示例 {#zg0fw} 下面是一个密码页模板的数据结构示例： ```json { "layout": "password", "sections": { "main-password": { "type": "main-password", "settings": {...}, "blocks": { "content": { "type": "$content-group", "settings": {...}, "blocks": { "heading": { "type": "heading", "settings": { "text": "Opening soon" } } } } }, "block_order": ["content"] } }, "order": ["main-password"] } ``` --- ## 多模板风格支持 {#yvQuA} 为提升页面展示灵活性，支持为同一页面类型创建多个模板文件（如不同风格的商品详情页）。 以下是一个创建和使用新模板的基本步骤： ### 1. 复制模板文件 {#joyDk} 在 `templates` 目录下复制 `product.json` 并重命名为 `product.shoes.json`。文件内容如下： ```json { "sections": { "main-product-info": { ... }, "recommended-product": { ... } }, "order": ["main-product-info", "recommended-product"] } ``` > **注意** > > + 多模板支持功能只适用于 [JSON 模板](#YWmjr)。 > + 模板文件命名必须遵循 \{模板类型\}.\{模板名称\}.json 格式。 ### 2. 调整组件顺序（可选） {#PeWjx} 修改 `product.shoes.json` 中的 `order` 字段，调整组件显示顺序： ```json { "sections": { "main-product-info": { ... }, "recommended-product": { ... } }, "order": ["recommended-product", "main-product-info"] } ``` ### 3. 分配模板{#EnOvU} 在商家后台为指定商品选择 Shoes 模板： ![](https://cdn.myshopline.com/sl/slfs/sl-new/174701367712046/1740551271156-c10f3b91-96b2-4334-af92-baf012e595c7.jpeg) ### 4. 验证效果{#s8Qvl} 访问商品详情页，确认组件顺序已更新。