# 区块资源

> 用 section 专属的 javascript 与 stylesheet 这两个 Liquid 标签，把 CSS、JS 打包进 Shoplazza 主题的 section，并说明代码注入位置。

Section 可以使用以下 section 专用 Liquid tag 打包自己的 JavaScript 和样式表资源：

* [\{% javascript %}](./section-assets#javascript)
* [\{% stylesheet %}](./section-assets#stylesheet)

## javascript

[\{% javascript %}](/docs/theme/references/liquid/tags/theme-tags#javascript) tag 可用于为 section 引入 JavaScript：

```liquid title="示例"
{% javascript %}
  const type = document.querySelector('.product-detail').dataset.productId;
{% endjavascript %}
```

`{% javascript %}` tag 中的内容会被注入到 `</body>` 标签之前。

每个 `{% javascript %}` tag 中的内容需要包裹在自执行匿名函数中，以便将变量限定在闭包内，避免运行时异常影响其他 section。

## stylesheet

[\{% stylesheet %}](/docs/theme/references/liquid/tags/theme-tags#stylesheet) tag 可用于为 section 引入 CSS 样式：

```liquid title="示例"
<div class="product-detail">
  <!-- 商品详情内容 -->
</div>

{% stylesheet %}
  .product-detail {
    margin-top: 100px;
    margin-bottom: 100px;
  }
{% endstylesheet %}
```

`{% stylesheet %}` tag 中的内容将被放置在 section 元素之前的位置。