---
title: "layout"
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/layout'
md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/layout.md'
---
# layout
`layout` 目录包含了主题的所有布局文件，文件定义了页面的基础框架，用于统一管理页面的结构和样式。
布局文件必须包含以下占位符：
- **header**：页头部分。
- **layout**：页面内容区域。
- **footer**：页脚部分。
这些占位符用于注入全局脚本（如 JavaScript 或 CSS 文件）以及渲染页面内容。
此外，你还可以在布局文件中添加自定义的 HTML、CSS 或 JavaScript 代码，以便在多页面中快速应用相同的更改。
* * *
## 目录结构{#kVCc9}
以下是 [Bottle 主题](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/bottle.md) 的默认布局文件目录结构：
```bash
layout
├── gift_card.html # 礼品卡页专用布局文件
├── password.html # 密码页专用布局文件
├── proofing.html # 打烊页专用布局文件
└── theme.html # 默认布局文件（所有未显式指定的页面自动应用）
```
你可以创建自定义的布局文件，示例如下：
```bash
layout
├── gift_card.html
├── password.html
├── proofing.html
├── theme.html
└── custom_layout.html # 自定义布局文件
```
* * *
## 文件解析{#iu7aO}
### 模板结构{#HnqnF}
以下是一个基础的布局文件，占位符需要使用 [content](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/content.md) tag 引用。除了必须存在的占位符外，你还可以添加自定义的代码，以实现多页面模板同步应用：
```html
{{#content "header" /}}
{{#content "layout" /}}
{{#content "footer" /}}
```
### 占位符说明{#B31GU}
如下为布局文件中必须包含的占位符：
|
占位符
|
注入内容类型
|
典型应用场景
|
|
header
|
|
|
|
layout
|
|
|
|
footer
|
|
|
* * *
## 布局应用{#zFsQD}
### JSON 模板{#hpbaB}
在 [JSON 模板](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates.md#YWmjr) 中，你可以通过 `layout` 字段，显式指向自己的布局文件，以下是店铺密码保护页指向 `password.html` 布局文件的示例：
```json
// templates/password.json
{
"layout": "password", // 指向 layout/password.html
"sections": {
"main-password": {
"type": "password"
}
},
"order": ["main-password"]
}
```
### HTML 模板{#ptRdc}
在 [HTML 模板](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/templates.md#qbWua) 中，你可以使用 [layout](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/layout.md) tag 修改对默认布局文件的指定，以下是打烊页指向 `proofing.html` 布局文件的示例：
```html
{{#layout "proofing" /}}
}})
...
```
> **注意**
>
> 当页面模板没有显式指定布局文件时，该模板会自动应用 layout/theme.html 作为默认布局文件。
* * *
## 最佳实践{#StOFh}
### 默认布局优化{#LddwD}
在 `theme.html` 中预置响应式 `` 标签，示例如下：
```html
{{#content "header" /}}
{{#content "layout" /}}
{{#content "footer" /}}
```
### 扩展性设计{#KpYaa}
通过 CSS 类名区分布局类型，便于全局样式管理，示例如下：
```html
{{#content "header" /}}
{{#content "layout" /}}
{{#content "footer" /}}
```