分区可使用以下特定于分区的 Liquid 标签捆绑自己的 JavaScript 和样式表资产：
- {% javascript %}
- {% stylesheet %}
只有当您的分区要安装在多个主题或店铺上时，才需要使用这些标签。否则，您应在主题的 assets 目录中包含您的部分所需的 JavaScript 或 CSS 样式。
注意事项
在 {% javascript %} 或 {% stylesheet %} 标记中不会渲染 Liquid代码。包含 Liquid 代码会导致语法错误，或无法应用样式。
提示
如果想在某个分区中使用主题中的现有资产，可以使用asset_url filter和script_tag filter或 stylesheet_tag filter将其包含在内。如果资产已包含在父布局或模板中，则无需再次包含。
javascript
{% javascript %} 标签可用于为某个分区包含 JavaScript：
{% javascript %}
document.querySelector('.slideshow').slideshow();
{% endjavascript %}注意事项
每个分区只能有一个 {% javascript %} 标记。超过一个将导致错误。
Shopify 会将所有分区的 {% javascript %} 标签内容合并为一个文件，然后通过 content_for_header Liquid 对象注入主题。该文件通过带有 defer 属性的<script>标签异步加载。
每个 {% javascript %} 标记的内容都被封装在一个自执行匿名函数中，因此任何变量都是在闭包中定义的，运行时异常不会影响其他分区。
特定JavaScript实例
捆绑的资产只会为每个分区注入一次，而不会为分区的每个实例注入。如果您需要特定于实例的 JavaScript，那么请在您的分区标记中添加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 %} 标签可用于为某个分区添加 CSS 样式：
<div class="slideshow-wrapper" data-slide-speed="{{ section.settings.speed }}">
<!-- slideshow content -->
</div>
{% stylesheet %}
.slideshow-wrapper {
// your styles
}
{% endstylesheet %}注意事项
每个部分只能有一个 {% stylesheet %} 标签。超过一个将导致错误。
Shopify 会将所有分区的 {% stylesheet %} 标签内容合并为一个文件，然后通过 content_for_header 全局 Liquid 对象注入主题。
特定样式实例
捆绑的资产只会为每个分区注入一次，而不会为分区的每个实例注入。如果您需要特定于实例的 CSS，请使用内联方式
发表回复