Shopify Liquid技术文档

吞吞0711
55 阅读5分钟

1. shopify theme目录架构介绍

官网文档地址：shopify.dev/docs/storef… 以下内容为我精简的知识点。如果需要了解的更详细，可以直接阅读原文档

1. Layouts（布局）

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

布局是主题的基础，所有模板都通过它进行渲染。

布局是 Liquid 文件，允许你在单一位置包含应在多个页面类型中重复的内容。

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

布局中有2个重要的配置

  • content_for_header：content_for_header 对象在 theme.liquid 中是必需的。它必须放置在 HTML <head> 标签内。它将 Shopify 所需的所有脚本动态加载到文档头部。
  • content_for_layout：content_for_layout 对象会动态输出每个模板的内容。您需要在 <body> 和 </body> HTML 标签之间添加对该对象的引用。
<!DOCTYPE html>
<html>
<head>
...
{{ content_for_header }}
...
</head>

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

你可以编辑默认的 theme.liquid 布局，或者你可以创建多个自定义布局文件以满足你的需求。你可以在模板级别指定使用哪个布局，或者是否使用布局：

  • 在 JSON 模板中，用于渲染页面的布局通过 layout 属性指定。
// use layout "theme.liquid" file
{
    "layout": "theme",
    "sections": {...},
    "order": [...]
}
  • 在 Liquid 模板中，用于渲染页面的布局是通过 layout Liquid 标签指定的。
// use layout "theme.liquid" file
{% layout 'theme' %}
...

2. Templates（模版）

└── theme
    ├── layout
    ├── templates
    |   ├── 404.json
    |   ├── article.json
    |   ...
    ...

模板控制主题中每种页面渲染的内容。

您可以使用两种不同的文件类型来创建主题模板：JSON 和 Liquid。一个模板只能以 JSON 或 Liquid 模板的形式存在，不能同时存在。例如，如果 product.liquid 已经存在，那么你就不能创建 product.json 。

  • JSON 模板是带有 .json 扩展名的数据文件。这些模板允许您轻松地从区域中填充模板内容。商家可以使用主题编辑器添加、删除或重新排列区域。 如果您正在使用 JSON 模板，那么任何 HTML 或 Liquid 代码都需要包含在引用的section中。要了解更多，请参阅 JSON 模板。

    • 可通过 "settings" 覆盖
    • 动态配置，适合可视化编辑
    •   // 引用sections文件夹下card.liquid这个section文件
  {
      "layout": "theme",
      "sections": {
          "card": {
              "type": "card",
              "settings":{...}
          }
      },
      "order": [
          "card"
      ]
  }

  • Liquid 模板是 Liquid 标记文件，文件扩展名为 .liquid 。您可以直接在 Liquid 模板中添加 Liquid 和 HTML。要了解更多，请参阅 Liquid 模板。

    • 不可覆盖设置
    • 硬编码，适合固定内容
    •   // 引用sections文件夹下card.liquid这个section文件
  {% layout 'theme' %}
  {% section 'card' %}

3. Sections（章节）

└── theme
    ...
    ├── templates
    ├── sections
    │  ├─ header.liquid
    ...

section是 Liquid 文件，允许您创建可定制的、可重复使用的模块化内容。它们还可以包含blocks，允许商家在section内添加、删除和重新排序内容。

section文件内容是由三个部分组成

  • Main content（可选）： 您可以在section中包含任何 HTML 或 Liquid 内容。 section与其他 Liquid 主题文件一样，可以访问全局对象、标签和过滤器，以及以下特定于区域的对象

    • section 对象 - 包含区域的属性和设置值。
    • block 对象 - 包含单个区域块的属性和设置值。

  • Assets（可选）：

  • Schema（必需）：

  Sections 支持 {% schema %} Liquid 标签，标签用于定义以下部分属性和设置：

使用section文件的方式

4. Sections group（章节组）

└─ theme
    ...
    ├─ layout
    │  └─ theme.liquid
    ├─ sections
    │  ├─ footer-group.json
    │  ├─ header-group.json
    │  └─ ...
    ...

章节组是一个存储待渲染的章节和应用程序块列表及其相关设置的 JSON 数据文件

在大多数主题中，您应该仅对页眉和页脚使用章节组。如果您为主题的其他区域（例如导航侧边栏）创建额外的部分组，则应将章节组命名为反映其预期用途的名称。

您可以在布局文件中添加对章节组的引用

{% sections 'header-group' %}

章节组必须是有效的 JSON 文件，根目录应为一个具有以下属性的对象

{
 "type": "header",
 "name": "Header Group",
 "sections": {
   "header": {
     "type": "header",
     "settings": {}
   }
 },
 "order": ["header"]
}

5. Blocks（模块）

Blocks 允许开发者通过将section拆分为更小、可重用的 Liquid 片段来创建灵活的布局。每个 block 都有自己的settings，可以在section内部添加、删除和重新排序。

有三种类型的 block：

  • Theme blocks: 在 /blocks 文件夹中作为独立的 Liquid 文件创建，可在多个sections中重复使用。 了解更多关于如何在您的主题中使用主题模块的信息
  • Section blocks: 在section的 Liquid 文件中创建，仅限于在该section内使用。 只支持单级层次结构，不能嵌套。 Section blocks 不能与主题块（Theme blocks）在同一个section中使用。 Section blocks是在section的 Liquid 文件中直接定义的，并在section的 {% schema %} 标签中进行配置
  • App blocks: 由安装在商家店铺中的应用提供。

6. Snippets（代码片段）

└─ theme
    ...
    ├─ layout
    │  └─ theme.liquid
    ├─ snippets
    │  ├─ product-card.liquid
    │  └─ ...
    ...

代码片段是可重用的 Liquid 代码片段，帮助您在主题中保持一致性并减少重复。它们允许您将复杂的逻辑和标记封装到单独的文件中，这些文件可以在主题中的任何位置进行渲染。

与 sections 和 blocks 不同，代码片段在主题编辑器中对商家不可见。

在您的 Liquid 代码中使用 render 标签来引用代码片段。它接受命名参数，您可以使用这些参数将数据传递给代码片段。

有关将数据传递给代码片段的其他选项，请参阅 render 标签参数。

{% render 'product-card',
  product: product,
  show_price: true,
  max_description_length: 120
%}

Theme Blocks和Snippets都是用于模块化代码的组件，但它们的用途、功能和适用场景有显著区别

结尾

本文主要介绍了shopify的基础知识

更多的细节学习可以直接访问shopify.dev官网

avatar
文章
阅读
粉丝