Section assets

Sections 可以通过以下专门的 Liquid 标签打包自己的 JavaScript 和样式表（stylesheet）资源：

• {% javascript %}
• {% stylesheet %}

只有当你的 section 打算安装到多个主题或者多个店铺时，你才需要用这些标签。否则的话，直接把 section 需要的 JavaScript 或 CSS 样式放到主题的 assets 目录就可以了。

注意

在 {% javascript %} 或 {% stylesheet %} 标签里，Liquid 语法是不会被渲染的。如果你在里面写了 Liquid 代码，可能会导致语法错误，或者让样式应用失败。

小提示

如果你想在 section 里用主题里已经存在的资源，可以搭配 asset_url filter，再用 script_tag filter 或 stylesheet_tag filter 引用就行了。如果某个资源已经在上层 layout 或 template 中引入过了，那你就不用再引一次了。

javascript

{% javascript %} 标签可以用来给 section 添加 JavaScript：

{% javascript %}
document.querySelector('.slideshow').slideshow();
{% endjavascript %}

注意

每个 section 只能有一个 {% javascript %} 标签，如果有多个，会直接报错。

所有 section 里的 {% javascript %} 内容，Shopify 会自动合并成一个文件，然后通过 content_for_header Liquid object 注入到主题里。这个文件会通过带 defer 属性的 <script> 标签异步加载。

每段 {% javascript %} 的内容，Shopify 会自动包在一个自执行的匿名函数里，这样变量就只在自己的作用域里有效，而且如果某一段代码运行时出错了，也不会影响到别的 section。

针对实例的 JavaScript

打包的资源每个 section 只会注入一次，不会为每个实例都注入。如果你需要针对每个实例有不同的 JavaScript，可以在 section 的 HTML 标记里加上 data-attributes，然后在你的 JavaScript 里引用这些属性。比如：

<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
  <!-- slideshow content -->
</div>
{% javascript %}
  var slideshowSpeed = parseInt(document.querySelector('.slideshow-wrapper').dataset.slideSpeed);
{% endjavascript %}

stylesheet

{% stylesheet %} 标签可以用来给 section 添加 CSS 样式：

<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
  <!-- slideshow content -->
</div>
{% stylesheet %}
.slideshow-wrapper {
  // your styles
}
{% endstylesheet %}

注意

每个 section 只能有一个 {% stylesheet %} 标签，如果有多个，会直接报错。

所有 section 里的 {% stylesheet %} 内容，Shopify 会自动合并成一个文件，然后通过 content_for_header 全局 Liquid object 注入到主题里。

针对实例的样式

打包的样式每个 section 只会注入一次，不会为每个实例都注入。如果你需要每个实例有不同的 CSS 样式，可以直接用内联的 <style> 标签来搞定。