在Shopify中添加自定义CSS和JS

Question

我正在为Shopify页面使用“Atlantic”主题制作垂直选项卡。由于此主题默认不支持垂直选项卡，因此我使用了外部JS和CSS“jquery-jvert-tabs”。

我的问题是，如果我将JS和CSS文件上传为资产，如何将它们链接到我想要使用它们的页面上，并在之后如何在页面上使用这些内容，如果页面中有某些样式元素可用？

- gagneet

Answer 1

只需将filename.js文件上传到assets文件夹中。

然后将以下内容放置在您的theme.liquid文件的head部分：

{{ 'filename.js' | asset_url | script_tag }}

顺便提一下，您应该 重新命名文件并添加 .liquid 扩展名

filename.js.liquid

祝你好运！

- jlcharette

---

添加.liquid扩展名的好处是什么？ - Ronnie

@Ronnie，.liquid扩展名允许您在js和css文件中使用Liquid。 - jlcharette

这对我不起作用。我已经尝试了一切，但我包括了jQuery，然后是Slick，然后是使用Slick的文件，尽管正确加载了所有文件，但它仍然显示“slick不是一个函数”。 - Antony D'Andrea

我收到一个错误 Refused to apply style from ... because its MIME type ('text/x-liquid') is not a supported stylesheet MIME type, and strict MIME checking is enabled. - Mermoz

Answer 2

如果我理解正确，asset_url 过滤器就是您要找的。

要在 .liquid 文件中包含一个 JS 文件，您可以使用：

{{ 'script.js' | asset_url | script_tag }}

还有一个 CSS 文件：

{{ 'style.css' | asset_url | stylesheet_tag }}

- Steph Sharp

---

感谢@Steph-Sharp的更新，我试图将这些文件包含在“页面”中而不是主题中。我尝试使用asset_url，但它在那里不起作用... - gagneet

@gagneet 你可以在任何 .liquid 文件中使用 asset_url 过滤器，所以在 page.liquid 中应该可以正常工作。如果你仍然遇到问题，也许你可以发布一些代码。 - Steph Sharp

Answer 3

如果您不想污染全局命名空间，可以将JavaScript或CSS限制在特定区域内。

Shopify使用一个简单的if语句与页面句柄一起使用（对于www.foo.com/abcd/bar-"bar"将是句柄）。

{% if page.handle == "bar" %}
    {{ 'your_custom_javascript.js' | asset_url | script_tag }}
    {{ 'your_custom_css.css' | asset_url | stylesheet_tag }}
{% endif %} 

这非常有用，如果你想对某些页面进行较小的修改。

- Bergrebell

Answer 4

对于JS文件，永远不要通过Shopify的“创建空白文件”对话框直接创建文件。 相反，将文件本地创建为.js（而不是.js.liquid），然后上传到资产文件夹中。 然后，您可以在theme.liquid头部节简单引用该文件。

{{ 'filename.js' | asset_url | script_tag }}

背景：

似乎在创建新文件时，Shopify总是将mime类型设置为text/x-liquid，如果主题使用了liquid，则不考虑文件扩展名。 这将导致浏览器出现类似于Chrome的错误：

拒绝应用来自...的样式，因为它的MIME类型（'text/x-liquid'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查

- Andreas

Answer 5

打开 theme.liquid 文件，查看如何包含 CSS 和 JS，并按照它们的方式添加您自己的文件。将您的自定义文件添加到 assets 中。添加 CSS 和 JS。附上图片。

- Vikash Kr. Jangir