---
title: "blocks"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/blocks'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/blocks.md'
---
# blocks

`blocks` 目录下的文件定义的是在组件下可添加的区块，每个区块都有自己的一套配置。你可以创建这些区块，使这些区块在组件中可以重复使用。

区块的类型有三种：

-   公有区块：可以被任意组件或区块引用的区块。
    
-   私有区块：只能在对应的组件下使用。
    
-   App block：由应用创建，为主题提供扩展能力。
    

* * *

## 目录结构{#e4hmn}

`blocks` 目录下的每个区块必须要包含 `.html` 文件，也可以附加 `.css` 和 `.js` 后缀文件。

```html
blocks
├── product
│   ├── card.css
│   ├── card.js
│   └── card.html
└── heading.html
```

`blocks` 目录可以存放在两个地方：

-   **主题根目录**：公有区块的存放位置
    
-   **组件目录**：私有区块存放位置
    

* * *

## 公有区块{#F8Ljd}

公有区块可以被任意的组件或区块引用，需存放在主题根目录的 `blocks` 目录下。

```html
...
sections
blocks
└── product
    ├── card.css
    ├── card.js
    └── card.html
templates
...
```

以下是在精选商品分类组件 `featured-collection` 中使用公有区块商品卡片 `product/card` 的例子：

```html
<!-- sections/featured-collection/featured-collection.html -->

<section>
  {{#blocks}}
    {{#if forblock.type == "product/card"}}
      {{#var products_pagination = section.settings.collection | get_product_pagination(4) /}}
      <ul>
        {{#for product in products_pagination.list}}
          <li>
            {{#block product=product /}}
          </li>
        {{/for}}
      </ul>
    {{/if}}
  {{/blocks}}
</section>

{{#schema}}
{
  "name": "featured-collection",
  "settings": {
    "type": "collection",
    "id": "collection",
    "label": "collection"
  },
  "blocks": [
    {
      "type": "product/card",
      "limit": 1
    }
  ]
}
{{/schema}}

```

1.  使用 [blocks](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/blocks.md) tag 循环，获取 [forblock](https://developer.shopline.com/zh-hans-cn/docs/sline/object/forblock.md) object，判断其 type 字段。
    
2.  在判断为 `forblock.type == "product/card"` 的 if 语句块中使用 [get\_product\_pagination](https://developer.shopline.com/zh-hans-cn/docs/sline/filter/get-product-pagination.md) filter 对 `section.settings.collection` 获取分页信息。
    
3.  遍历 `products_pagination.list` 获取 [product](https://developer.shopline.com/zh-hans-cn/docs/sline/object/product.md) object。
    
4.  通过 [block](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/block.md) tag 把 [product](https://developer.shopline.com/zh-hans-cn/docs/sline/object/product.md) object 传入 `product/card` 区块。
    

对于无需自定义渲染区块内容或者传递参数的情况，可以直接使用 [content](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/content.md) tag 进行渲染，比如以下例子展示了最简单区块渲染：

```html
<div class="block-button-group">
  {{#content "blocks" /}}
</div>

{{#schema}}
{
  "name": "button-group",
  "blocks": [
    {
      "type": "button",
      "limit": 2
    }
  ]
}
{{/schema}}
```

* * *

## 私有区块{#qnRQy}

对于某些组件来说，需要把专有的功能模块拆分成区块来给商家进行配置。此时可以使用私有区块的能力来对组件进行组合。私有区块只能被当前组件或者当前组件下的其他区块引入使用。

私有区块的文件存放在组件目录下的 `blocks` 目录。

```html
sections
├── blog
   ├── blocks
   │   ├── articles.css
   │   └── articles.html
   └── blog.html

```

在 schema 中 blocks 字段里面的 type 字段使用 `$` 符号前缀加区块文件名，表示引入私有区块：

```html
<!-- sections/blog/blog.html -->

<section>
{{#blocks}}
  {{#if forblock.type == "$articles" /}}
    {{#block blog=section.settings.blog /}}
  {{/if}}
{{/blocks}}
</section>

{{#schema}}
{
  "name": "blog",
  "settings": {
    "type": "blog",
    "id": "blog",
    "label": "blog"
  },
  "blocks": [
    {
      "type": "$articles",
      "limit": 1
    }
  ]
}
{{/schema}}

```

* * *

## 嵌套区块{#wTxIJ}

区块可以嵌套在组件和区块中，使得主题编辑器获得更加灵活的配置能力。

> **注意**
>
> 在主题编辑器能够展示的最大嵌套层级为 6 层。

以上述的私有区块为例子，在 `articles` 区块中嵌套引入公共的 `article card` 区块，在区块里面使用 [props](https://developer.shopline.com/zh-hans-cn/docs/sline/object/props.md) object 获取传入的参数：

```html
<!-- sections/blog/blocks/articles.html -->
{{#var articles_pagination = props.blog | get_article_pagination(10) /}}
{{#var articles = articles_pagination.list /}}

<ul>
  {{#blocks}}
    {{#for article in articles}}
      <li>
        {{#block article=article /}}
      </li>
    {{/for}}
  {{/blocks}}
</ul>

{{#schema}}
{
  "name": "articles",
  "blocks": [
    {
      "type": "article/card",
      "limit": 1
    }
  ]
}
{{/schema}}

```

* * *

## App Block{#OrRlo}

App block 是属于主题应用扩展的一种，由 SHOPLINE App 进行注入，然后在主题编辑中添加，最后在呈现在主题页面中，详细请参阅 [主题与应用集成](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/integrate-apps-with-themes/theme-app-extension/overview.md)。

* * *

## schema{#xHpGT}

区块支持添加 [schema](https://developer.shopline.com/zh-hans-cn/docs/sline/tag/schema.md) tag，在此 tag 内可以定义一个区块的各种属性，例如区块的名称。

这里面的内容和组件`schema` 保持一致。详情请参阅 [组件 schema](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md#HWiNw)。

在区块中获取配置的值，使用的对象是 `block.settings`，例如：

```html
<!-- /blocks/article/card.html -->
{{#var articles_pagination = props.blog | get_article_pagination(10) /}}
{{#var articles = articles_pagination.list /}}

<h2>{{ block.settings.title }}</h2>

<ul>
  {{#blocks}}
    {{#for article in articles}}
      <li>
        {{#block article=article /}}
      </li>
    {{/for}}
  {{/blocks}}
</ul>

{{#schema}}
{
  "name": "articles",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "title"
    }
  ],
  "blocks": [
    {
      "type": "article/card",
      "limit": 1
    }
  ]
}
{{/schema}}
```