布局 - Shopify主题开发文档

布局是主题的基础，所有模板都是通过布局呈现的。

布局是一种 Liquid 文件，它允许你在一个位置包含在多个页面类型中重复出现的内容。例如页眉和页脚。

Location

布局文件位于主题的layout目录中：

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

子类型

有以下布局类型：

类型	描述
一般	一般布局适用于所有非结账页面。默认布局文件为 theme.liquid，必须包含在所有主题中。
结账(checkout)	此布局类型适用于所有结账页面。仅适用于 Shopify Plus 商家

Schema

由于布局文件是主题的基础，它们在大多数情况下应遵循标准 HTML 文档的结构。大多数布局文件还包含以下 Liquid 对象：

content_for_header
content_for_layout

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

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

内容

布局允许您在单个位置包含在多个页面类型中重复出现的内容。例如，布局可能包括页眉和页脚部分以及SEO元数据。

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

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

content_for_header
content_for_layout.

注意事项
这些对象在 theme.liquid 中是必需的。如果不包含这些对象的引用，就无法使用代码编辑器或 Shopify CLI 等工具保存或更新文件。

content_for_header

content_for_header对象在theme.liquid中是必需的。它必须置于 HTML 标记内。它将 Shopify 所需的所有脚本动态加载到文档头部。这些脚本是 reCAPTCHA、Shopify 应用程序等功能所必需的。

content_for_layout

content_for_layout 对象动态输出每个模板的内容。您需要在和 HTML 标记之间添加对该对象的引用。

给模板添加class

通过下面的代码，可以给模板添加特定的class。

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

.template-product {
  margin-bottom: 2em;
}

原文：https://shopify.dev/docs/themes/architecture/layouts#support-template-specific-css-selectors

布局

目录