[{"value":"目录结构","id":"kVCc9","hLevel":2,"level":1},{"value":"文件解析","id":"iu7aO","hLevel":2,"level":1,"children":[{"value":"模板结构","id":"HnqnF","hLevel":3,"level":2},{"value":"占位符说明","id":"B31GU","hLevel":3,"level":2}]},{"value":"布局应用","id":"zFsQD","hLevel":2,"level":1,"children":[{"value":"JSON 模板","id":"hpbaB","hLevel":3,"level":2},{"value":"HTML 模板","id":"ptRdc","hLevel":3,"level":2}]},{"value":"最佳实践","id":"StOFh","hLevel":2,"level":1,"children":[{"value":"默认布局优化","id":"LddwD","hLevel":3,"level":2},{"value":"扩展性设计","id":"KpYaa","hLevel":3,"level":2}]}]

layout

layout 目录包含了主题的所有布局文件，文件定义了页面的基础框架，用于统一管理页面的结构和样式。

布局文件必须包含以下占位符：

header：页头部分。
layout：页面内容区域。
footer：页脚部分。

这些占位符用于注入全局脚本（如 JavaScript 或 CSS 文件）以及渲染页面内容。

此外，你还可以在布局文件中添加自定义的 HTML、CSS 或 JavaScript 代码，以便在多页面中快速应用相同的更改。

目录结构

以下是 Bottle 主题的默认布局文件目录结构：

layout
├── gift_card.html   # 礼品卡页专用布局文件
├── password.html    # 密码页专用布局文件
├── proofing.html    # 打烊页专用布局文件
└── theme.html       # 默认布局文件（所有未显式指定的页面自动应用）

你可以创建自定义的布局文件，示例如下：

layout
├── gift_card.html
├── password.html
├── proofing.html
├── theme.html
└── custom_layout.html	# 自定义布局文件

文件解析

模板结构

以下是一个基础的布局文件，占位符需要使用 content tag 引用。除了必须存在的占位符外，你还可以添加自定义的代码，以实现多页面模板同步应用：

<!DOCTYPE html>
<html>
<head>
  {{#content "header" /}}  <!-- 头部占位符 -->
</head>
<body>
  {{#content "layout" /}}  <!-- 内容占位符 -->
  {{#content "footer" /}}  <!-- 页脚占位符 -->
  <!-- 自定义脚本示例 -->
  <script>
    console.log('This is a custom script');
  </script>
</body>
</html>

占位符说明

如下为布局文件中必须包含的占位符：

占位符	注入内容类型	典型应用场景
header	通用脚本样式应用资源	主题事件 SDK 自定义代码应用
layout	页面主体 HTML	商品详情购物车页模板
footer	通用脚本样式应用资源	埋点上报性能监控脚本

布局应用

JSON 模板

在 JSON 模板中，你可以通过 layout 字段，显式指向自己的布局文件，以下是店铺密码保护页指向 password.html 布局文件的示例：

// templates/password.json
{
  "layout": "password",  // 指向 layout/password.html
  "sections": {
    "main-password": {
      "type": "password"
    }
  },
  "order": ["main-password"]
}

HTML 模板

在 HTML 模板中，你可以使用 layout tag 修改对默认布局文件的指定，以下是打烊页指向 proofing.html 布局文件的示例：

<!-- templates/proofing.html -->
{{#layout "proofing" /}}  <!-- 显式指向 layout/proofing.html -->
<div class="page-width stage__proofing">
  <div>
    <img width="240" height="160" src="{{`images/image-store-close.png` | asset_url()}}" alt="close the store" />
    ...
  </div>
</div>

注意

当页面模板没有显式指定布局文件时，该模板会自动应用 layout/theme.html 作为默认布局文件。

最佳实践

默认布局优化

在 theme.html 中预置响应式 <meta> 标签，示例如下：

<!DOCTYPE html>
<html>
<head>
  <!-- 自定义 meta 标签 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {{#content "header" /}}
</head>
<body>
  {{#content "layout" /}}
  {{#content "footer" /}}
</body>
</html>

扩展性设计

通过 CSS 类名区分布局类型，便于全局样式管理，示例如下：

<!DOCTYPE html>
<html>
<head>
  {{#content "header" /}}
</head>
<body class="layout-{{ layout.name }}">	<!-- 自定义 class -->
  {{#content "layout" /}}
  {{#content "footer" /}}
</body>
</html>