shopify theme (四)(46)"blocks": [{ "type": "@theme" }] 官网文档地址

(46)`"blocks": [{ "type": "@theme" }]`

{% schema %}
{
  "name": "Slide",
  "blocks": [
     ` { "type": "@theme" },`
      { "type": "button" },
      { "type": "text" },
      { "type": "_marquee" }
    ]
}
{% endschema %}

案例：

① 有 `{ "type": "@theme" }`

② 无 `{ "type": "@theme" }`

延伸：blocks里面没有"type": "Heading"，为什么会出现Heading？？

A: 可能是：列举的 {"type": "text"} 包含了 “标题” 的功能（比如 text.liquid 同时支持普通文本和标题样式），因此在编辑器中以 “Heading” 的形式呈现。

B: 可能是预设 presets 的原因。

(47) 预设 `presets`

官网地址

① `category` 将相关预设归为一类（比如把 “轮播”“基础横幅” 都归到 “Banners” 分类），让面板更整洁

name 预设名称显示在主题编辑器的“添加区块”选择器和侧边栏中

② `blocks` - 区块ID

最外层："blocks": { "text_1": {...}, "text_2": {...}, "button": {...} }

blocks 本身是一个对象，里面的 text_1、text_2、button 是 子块的 “唯一标识名” （开发者自定义，非给商家看的），作用有两个：

A. 区分同一个类型的不同子块（比如两个 text 子块，用 text_1 和 text_2 分开，避免混淆）,为每个预定义的区块分配一个唯一的标识符；

B. 配合外层的 block_order 控制显示顺序（比如 ["text_1", "text_2", "button"] 定义 “先标题→再描述→最后按钮”）。

规则：

可以是任意字符串
在同一个 preset 中必须唯一
用于在主题代码中引用特定区块

③ `blocks` - type

"type": "text" 和 "type": "button"

作用：定义 “这个子块的类型”，告诉系统要加载哪个子块文件；
规则：type 的值必须和 blocks/ 目录下的子块文件名完全一致（比如 type: "text" 对应 blocks/text.liquid，type: "button" 对应 blocks/button.liquid）；
实际效果：系统根据 type 加载子块功能 ——text 子块能显示文字，button 子块能跳转链接；如果 type 写错（比如写成 txt），子块会加载失败，编辑器里显示空白。

延伸：为啥区别 button-ABAB 有 "name": "t:names.button",另外2个区别（text_1AA，text_2BB）没有 name ??

name属性，以便在商家于编辑器中添加区块时显示

④ `blocks` - settings

settings 是 子块的 “预填配置” ，里面每一对键值，对应商家在编辑器中 “可修改的选项”—— 开发者提前填好值，商家选预设后不用手动调，直接生效。

以子区别 "button-ABAB" 为例，解说

(48) `image`

{% liquid
    if section.settings.image_1 != blank and section.settings.image_2 != blank
        assign media_width_desktop = 100 | divided_by: 2 | append: 'vw'
    else
        assign media_width_desktop = '100vw'
    endif
        assign media_width_mobile = '100vw'
     
    assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
   
  # 拼接逻辑：
  # '(min-width: 750px) ' + '100vw' + ', ' + '100vw'
  # 最终结果：
  # '(min-width: 750px) 100vw, 100vw'

    assign widths = '832, 1200, 1600, 1920, 2560, 3840'
   
    assign fetch_priority = 'auto'

  # 条件判断：若当前区块是页面中的“第1个区块”（section.index == 1，首屏核心区块）
  if section.index == 1
    # 加载优先级设为“high”（高优先级）：浏览器会优先加载该区块的媒体资源，提升首屏速度
    assign fetch_priority = 'high'
  endif

%}

{{
  section.settings.image_1
  | image_url: width: 3840
  | image_tag:
    width: section.settings.image_1.width,
    widths: widths,
    height: section.settings.image_1.height,
    alt: section.settings.image_1.alt,
    class: 'hero__image',
    sizes: sizes,
    fetchpriority: fetch_priority
}}