# Shopify 液体主题 ## 主题架构。 ├──sections/ # 具有 {% schema %} 的全角页面模块 — 英雄、产品网格、推荐 ├──blocks/ # 具有 {% schema %} 的可嵌套组件 — 幻灯片、功能项、文本块 ├── snippets/ # 通过 {% render %} 可重用的片段 — 按钮、图标、图像助手 ├──layout/ # 页面包装器（必须包含 {{ content_for_header }} 和 {{ content_for_layout }}） ├── templates/ # JSON 文件定义哪些部分出现在每种页面类型上 ├── config/ # 全局主题设置（settings_schema.json、settings_data.json） ├── locales/ # 翻译文件（en.default.json、fr.json等） └── assets/ # 静态CSS、JS、图片（最好使用{% stylesheet %}/{% javascript %}） ### 何时使用什么需要|使用 |为什么 ---|---|--- 全宽可定制模块| **部分** |具有“{% schema %}”，出现在编辑器中，渲染块具有编辑器设置的小型可嵌套组件 | **阻止** |具有 `{% schema %}`，可以嵌套在节/块内可重用逻辑，商家不可编辑 | **片段** |通过“{% render %}”渲染的模式不接受参数跨块/片段共享逻辑 | **片段** |块不能`{% render %}`其他块 ## 液体语法 ### 分隔符 * `{{ ... }}` — 输出（打印一个值） * `{{- ... -}}` — 带有空格修剪的输出 * `{% ... %}` — 逻辑标记（if、for、assign） — 不打印任何内容 * `{%- ... -%}` — 带有空格修剪的逻辑标签 ### 运算符 **比较：** `==`、`!=`、`>`、`<`、`>=`、`<=` **逻辑：** `and`、`or`、`contains` ### 关键问题 1. **条件中没有括号** - 使用嵌套的 `{% if %}` 代替 2. **无三元** — 始终使用 `{% if cond %}value{% else %}other{% endif %}` 3. **`for` 循环最多 50 次迭代** — 对于较大的数组使用 `{% paginate %}` 4. **`contains` 仅适用于字符串** — 无法检查数组中的对象 5. **`{% stylesheet %}`/`{% javascript %}` 不渲染 Liquid** — 其中没有 Liquid 6. **代码片段无法访问外部作用域变量** - 将它们作为渲染参数传递 7. **`include` 已弃用** — 始终使用 `{% render 'snippet_name' %}` 8. **`{% Liquid %}`标签**——无分隔符的多行逻辑；使用 echo 进行输出 ### 变量 {% 分配 my_var = '值' %} {% capture my_var %}计算的{{ value }}{% endcapture %} {% 递增计数器 %} {% 递减计数器 %} ## 过滤器快速参考过滤器用“|”链接起来。一个过滤器的输出类型提供下一个过滤器的输入。 **数组：** `compact`、`concat`、`find`、`find_index`、`first`、`has`、`join`、`last`、`map`、`reject`、`reverse`、`size`、`sort`、`sort_natural`、`sum`、`uniq`、`where` **字符串：** `append`、`capitalize`、`downcase`、`escape`、`handleize`、 `lstrip`、`newline_to_br`、`prepend`、`remove`、`replace`、`rstrip`、`slice`、`split`、`strip`、`strip_html`、`truncate`、`truncatewords`、`upcase`、`url_decode`、`url_encode` **数学：** `abs`、`at_least`、`at_most`、`ceil`、 `divided_by`、`floor`、`minus`、`modulo`、`plus`、`round`、`times` **金钱：** `金钱`、`money_with_currency`、`money_without_currency`、`money_without_trailing_zeros` **颜色：** `color_brightness`、`color_darken`、`color_lighten`、`color_mix`、`color_modify`、 `color_saturate`、`color_desaturate`、`color_to_hex`、`color_to_hsl`、`color_to_rgb` **媒体：** `image_url`、`image_tag`、`video_tag`、`external_video_tag`、`media_tag`、`model_viewer_tag` **URL：** `asset_url`、`asset_img_url`、`file_url`、 `shopify_asset_url` **HTML：** `link_to`、`script_tag`、`stylesheet_tag`、`time_tag`、`placeholder_svg_tag` **本地化：** `t`（翻译）、`format_address`、`currency_selector` **其他：** `date`、`default`、`json`、`structed_data`、`font_face`、`font_url`、` payment_button` > 完整详细信息：[语言过滤器]()、[HTML/media过滤器]（），[商业过滤器]（） ## 标签快速参考类别 |标签 ---|--- **主题** | `content_for`、`layout`、`section`、`sections`、`schema`、`stylesheet`、`javascript`、`style` **控制** | `if`、`elsif`、`else`、`除非`、`case`、`when` **迭代** | `for`、`break`、`continue`、`cycle`、`tablerow`、`paginate` **变量** | `分配`、`捕获`、`递增`、`递减`、`回显` **HTML** | `form`、`render`、`raw`、`comment`、`liquid` **文档** | `文档` > 包含语法和参数的完整详细信息：[references/tags.md]() ## 对象快速参考 ### 全局对象（随处可用） `购物车`、`集合`、`客户`、`本地化`、`页面`、`请求`、`路线`、`设置`、`商店`、`模板`、`主题`、`链接列表`、`图像`、`博客`、`文章`、`所有产品`、`元对象`、`规范_url`、`content_for_header`、`content_for_layout`、 `page_title`、`page_description`、`handle`、`current_page` ### 页面特定对象模板|对象 ---|--- `/产品` | `产品`, `远程产品` `/集合` | `集合`、`当前标签` `/购物车` | `购物车` `/文章` | `文章`、`博客` `/博客` | `博客`、`当前标签` `/页` | `页面` `/搜索` | `搜索` `/客户/*` | ‘客户’、‘订单’ > 完整参考：[商业对象]()，[内容对象]（），[第 2 层]（）， [第 3 层]() ## 模式标签部分和块需要带有有效 JSON 对象的“{% schema %}”。节使用“section.settings.*”，块使用“block.settings.*”。 ### 节模式结构 { "name": "t:sections.英雄.name", “标签”：“部分”， "class": "英雄部分", “限制”：1， “设置”：[]， “最大块数”：16， “块”：[{“类型”：“@主题”}]， "presets": [{ "name": "t:sections.hero.name" }], “enabled_on”：{“模板”：[“索引”]}， “disabled_on”：{“模板”：[“密码”]} } ### 块模式结构 { "name": "t:blocks.slide.name", “标签”：“div”， “类”：“幻灯片”， “设置”：[]， “块”：[{“类型”：“@主题”}]， "预设": [{ "名称": "t:blocks.slide.name" }] } ### 设置类型决策表需要|设置类型 |重点领域 ---|---|--- 开/关切换 | `复选框` | `默认值：真/假` 短文| `文本` | `占位符` 长文| `文本区域` | `占位符` 富文本（带有 `

`）| `富文本` | — 内联富文本（无`

`）| `inline_richtext` | — 数字输入| `数字` | `占位符` 滑块| `范围` | `min`、`max`、`default`（全部必需）、`step`、`unit` 下拉/分段| `选择` | `选项：[{值，标签}]` 单选按钮 | `收音机` | `选项：[{值，标签}]` 文本对齐 | `文本对齐` | `默认值：“左”/“中”/“右”` 颜色选择器 | `颜色` | `默认值：“#000000”` 图片上传| `图像选择器` | — 视频上传| `视频` | — 外部视频网址 | `video_url` | `接受：[“youtube”，“vimeo”]` 产品选择器 | `产品` | — 收藏选择器 | `集合` | — 页面选择器 | `页面` | — 博客选择器 | `博客` | — 文章选择器 | `文章` | — 网址输入 | `网址` | — 菜单选择器| `链接列表` | — 字体选择器 | `font_picker` | `默认`（必填）编辑器标题 | `标题` | `content`（不需要`id`）编辑器描述 | `段落` | `content`（不需要`id`） ### `visible_if` 模式 { "visible_if": "{{ block.settings.layout == '垂直' }}", “类型”：“选择”， “id”：“对齐方式”， "label": "t:labels.alignment", “选项”：[...] } 根据其他设置值有条件地显示/隐藏编辑器中的设置。 ### 块条目类型 * `{ "type": "@theme" }` — 接受任何主题块 * `{ "type": "@app" }` — 接受应用程序块 * `{ "type": "slide" }` — 仅接受 `slide` 块类型 > 完整架构详细信息和所有 33 种设置类型：[references/schema-and-settings.md]() ## CSS 和 JavaScript ### 每个组件的样式和脚本在部分、块和片段中使用“{% stylesheet %}”和“{% javascript %}”： {% 样式表 %} .my-component { 显示：flex; } {% 结束样式表 %} {% JavaScript %} console.log('已加载'); {% endjavascript %} * **每个文件一个标签** — 多个 `{% stylesheet %}` 标签将会出错 * **内部没有液体** - 这些标签不处理液体；使用 CSS 变量或类代替 * 仅在 `sections/`、`blocks/` 和 `snippets/` 中受支持 ### `{% style %}` 标签（液体感知 CSS）对于需要 Liquid 的动态 CSS（例如，编辑器中实时更新的颜色设置）： {% 风格 %} .section-{{section.id}} { 背景：{{section.settings.bg_color}}； } {% 结束样式 %} ### 设置的 CSS 模式 **单一 CSS 属性** — 使用 CSS 变量：

**多个 CSS 属性** — 使用 CSS 类作为选择值：

## LiquidDoc (`{% doc %}`) **需要：** 片段（始终）、块（当通过 `{% content_for 'block' %}` 静态渲染时） {% 文档%} 该文件呈现内容的简要描述。 @param {type} name - 所需参数的描述 @param {type} [name] - 可选参数的描述（括号=可选） @例子 {% render 'snippet-name', 名称: 值 %} {% 结束文档 %} **参数类型：** `string`、`number`、`boolean`、`image`、`object`、`array` ## 翻译 ### 每个面向用户的字符串都必须使用 `t` 过滤器

<按钮>{{ 'products.add_to_cart' | t }}

欢迎来到我们的商店

### 变量插值 {{ '产品.价格范围' | t：最小值：product.price_min |金钱，最大值：product.price_max |钱 }} 区域设置文件： { “产品”：{ "price_range": "从 {{ min }} 到 {{ max }}" } } ### 语言环境文件结构语言环境/ ├── en.default.json # 英文翻译（必填） ├── en.default.schema.json # 编辑器设置翻译（必填） ├── fr.json # 法语翻译 └── fr.schema.json # 法语编辑器翻译 ### 按键命名约定 * 使用 **snake_case** 和 **分层键**（最多 3 级） * 所有文本均使用 **句首字母大写**（仅第一个单词大写） * 模式标签使用 `t:` 前缀：`"label": "t:labels.heading"` * 按组件分组： `sections.hero.heading`, `blocks.slide.title` ## 参考文献 * 过滤器：[语言]() (77), [HTML/media]() (45), [商业]() (30) * [标签参考（30 个标签）]() * 对象：[商业]() (5), [内容]() (10), [层2]() (69), [层3]() (53) * [架构和设置参考（33 种）]() * [完整示例（片段、块、部分）]()

{{ 'sections.hero.heading' | t }}

欢迎来到我们的商店

Shopify 液体主题

包含技能