跳到主要内容

概述

Layout 是 theme 的基础，所有 template 都通过 layout 进行渲染。

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

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

  • 在 Liquid template 中，渲染页面所使用的 layout 通过 layout 属性指定。

位置​

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

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

子类型​

Layout 有以下几种类型：

类型

描述

通用

通用 layout 可应用于所有页面。

所有 theme 都必须包含默认 layout 文件 theme.liquid。

密码页

该 layout 类型应用于密码访问页面，对应文件为 password.liquid。

Schema​

由于 layout 文件是 theme 的基础，大多数情况下应遵循标准 HTML 文档的结构。大多数 layout 文件还包含以下 Liquid 对象：

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

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

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

内容​

Layout 允许您将需要在多个页面类型中重复出现的内容放在同一位置管理。例如，layout 可以包含页眉和页脚 section 以及 SEO 元数据。

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

Layout 可以访问任何全局 Liquid 对象，并可包含以下 Liquid 对象：

🚧 注意

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

content_for_header​

content_for_header 对象在 theme.liquid 中是必需的，必须放置在 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 选择器​

您可以通过在 <body> 标签的 class 中输出 template 对象的数据，为特定 template 创建 CSS 规则。

<body class="template-{{ template.name }}">
  ...
</body>
.template-product {
  margin-top: 100px;
  margin-bottom: 100px;
}