# 主题 layout 概述

> Shoplazza 主题的 layout 如何渲染所有 template、theme.liquid 里该放什么，以及 template 怎样指定自定义 layout 或不使用 layout。

Layout 是 theme 的基础，所有 [template](/zh-CN/docs/theme/architecture/templates/overview) 都通过 layout 进行渲染。

Layout 是 Liquid 文件，允许您将需要在多个页面类型中重复出现的内容放在同一位置管理。例如，layout 非常适合放置 `<head>` 元素中的内容，以及页眉和页脚。

您可以编辑默认的 `theme.liquid` layout，也可以根据需要创建多个自定义 layout 文件。您可以在 template 层级指定使用哪个 layout，或者不使用 layout：

*   在 Liquid template 中，渲染页面所使用的 layout 通过 [layout 属性](/zh-CN/docs/theme/architecture/templates/liquid-templates#schema)指定。

![](https://cnres.appracle.com/d8a4c3b943e613c4e923afbd55143344.png)

## 位置

Layout 文件位于 theme 的 `layout` 目录中：

**目录**

```text
└── theme
    ├── layout
    |   ├── theme.liquid
    |   ...
    ├── templates
    ...
```

## 子类型

Layout 有以下几种类型：

| 类型 | 描述 |
| --- | --- |
| **通用** | 通用 layout 可应用于所有页面。<br>所有 theme 都必须包含默认 layout 文件 `theme.liquid`。 |
| **密码页** | 该 layout 类型应用于密码访问页面，对应文件为 `password.liquid`。 |

## Schema

由于 layout 文件是 theme 的基础，大多数情况下应遵循[标准 HTML 文档](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)的结构。大多数 layout 文件还包含以下 Liquid 对象：

*   [content_for_header](/zh-CN/docs/theme/references/liquid/objects/content_for_header)
*   [content_for_layout](/zh-CN/docs/theme/references/liquid/objects/content_for_layout)

**basic_layout_example.liquid**

```liquid
<!DOCTYPE html>
<html>
  <head>
    ...
    {{ content_for_header }}
  </head>

  <body>
    ...
    {{ content_for_layout }}
    ...

    {{ content_for_js }}
    ...
  </body>
 </html>
```

## 内容

Layout 允许您将需要在多个页面类型中重复出现的内容放在同一位置管理。例如，layout 可以包含页眉和页脚 [section](/zh-CN/docs/theme/architecture/sections/overview) 以及 [SEO 元数据](/zh-CN/docs/theme/theme-features/seo/metadata)。

Layout 文件是 `.liquid` 文件，因此可以使用标准 HTML 和 Liquid 构建内容。

Layout 可以访问任何[全局 Liquid 对象](/zh-CN/docs/theme/references/liquid/objects/)，并可包含以下 Liquid 对象：

*   [content_for_header](#content_for_header)
*   [content_for_layout](#content_for_layout)

**注意**

这两个对象在 `theme.liquid` 中是必需的。如果未引用这些对象，将无法通过代码编辑器或 Shoplazza CLI 等工具保存或更新该文件。

### content_for_header

`content_for_header` 对象在 [theme.liquid](/zh-CN/docs/theme/architecture/layouts/overview) 中是必需的，必须放置在 HTML `<head>` 标签内。它会动态加载 Shoplazza 所需的所有脚本到文档头部，这些脚本是 reCAPTCHA、Shoplazza app 等功能正常运行的必要条件。

请勿尝试修改或解析 `content_for_header` 对象。如果 `content_for_header` 发生变化，您的 Liquid 的行为也会随之改变。

### content_for_layout

`content_for_layout` 对象用于动态输出每个 template 的内容。您需要在 HTML `<body>` 和 `</body>` 标签之间添加对该对象的引用。

## 用法

在使用 layout 文件时，您应熟悉以下概念：

*   [支持特定 template 的 CSS 选择器](/zh-CN/docs/theme/architecture/layouts/overview#%E6%94%AF%E6%8C%81%E7%89%B9%E5%AE%9A-template-%E7%9A%84-css-%E9%80%89%E6%8B%A9%E5%99%A8)

### 支持特定 template 的 CSS 选择器

您可以通过在 `<body>` 标签的 class 中输出 [template 对象](/zh-CN/docs/theme/references/liquid/objects/template)的数据，为特定 template 创建 CSS 规则。

**theme.liquid**

```liquid
<body class="template-{{ template.name }}">
  ...
</body>
```

**theme_css.liquid**

```css
.template-product {
  margin-top: 100px;
  margin-bottom: 100px;
}
```