在节中使用 JavaScript 和样式表

每个部分都可以包含 JavaScript 和 Stylesheets,这两种语言用于液体标签:{% javascript %}{% endjavascript %}{% stylesheet %}{% endstylesheet %}

当将代码放在这两个标签内时,Shopify 会将每个部分编译成 shopify_compiled.jsshopify_compiled.css。这样可以在每个部分的代码中提供更高的可读性,因为你不必搜索长文档来查找每个部分。

如果你不想使用 CSS,则可以使用 {% stylesheet 'scss' %} 代替使用 SCSS。

但是,使用它们还有一些缺点。液体不能用于任何一种,就像它不能用于没有 .liquid 扩展的普通*.js*.css*.scss 文件一样。

此外,在使用 SCSS 样式表标记时,这不是全局样式表,因此在主题的 .scss 文档中定义的任何变量都将无法访问,需要重新定义。

用法示例

JavaScript

{% javascript %}
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
{% endjavascript %}

CSS

{% stylesheet %}
    .container {
        width: 100%;
    }
    .container p {
        color: #ff0000;
    }
{% endstylesheet %}

上海社会科学院

{% stylesheet 'scss' %}
    $red: #ff0000;
    .container {
        width: 100%;
        p {
            color: $red;
        }
    }
{% endstylesheet %}