将自定义 CSS 和 JS 添加到 Shopify

Posted 2023-02-15

【中文标题】将自定义 CSS 和 JS 添加到 Shopify

【英文标题】：Adding custom CSS and JS to Shopify

【发布时间】：2013-12-26 08:42:12

【问题描述】：

我正在使用“大西洋”主题为 Shopify 上的页面获取垂直标签。 由于这个主题默认没有垂直标签，所以我使用了外部 JS 和 CSS “jquery-jvert-tabs”。

我的问题是，如果我将 JS 和 CSS 文件作为资产上传，我如何将它们链接到我想要使用这些文件的页面以及之后如何在页面上使用这些文件，如果我确定的话样式元素也可用吗？

【参考方案1】：

对于 JS 文件，切勿直接通过 Shopifys“创建空白文件”对话框创建文件。 而是在本地将文件创建为 .js（不是 .js.liquid），然后上传到 assets 文件夹。

然后您可以简单地引用 theme.liquid 头部部分中的文件：

 'filename.js' | asset_url | script_tag 

背景：

似乎 Shopify 在创建新文件时总是将 mime 类型设置为 text/x-liquid 以及是否将液体用于主题，无论文件扩展名如何。 这将导致来自 Chrome 的浏览器错误，如下所示：

拒绝从 ... 应用样式，因为它的 MIME 类型 ('text/x-liquid') 不是受支持的样式表 MIME 类型，并且严格 MIME 检查已启用

【参考方案2】：

打开 theme.liquid 并检查 css 和 js 是如何包含的，然后按照它们添加您的。将您的自定义文件添加到 assets.Css And Js Add 附上图片

【参考方案3】：

只需将您的 filename.js 文件上传到 assets 文件夹即可。

然后将以下内容放入您的 theme.liquid head 部分：

 'filename.js' | asset_url | script_tag 

顺便说一句，您应该重命名您的文件并添加 .liquid 扩展名

filename.js.liquid

祝你好运！

【讨论】：

添加.liquid 扩展有什么好处？

@Ronnie .liquid 扩展名允许您在 js 和 css 文件中使用液体。

这对我不起作用。我已经尝试了一切，但我先包括 jQuery，然后是 Slick，然后是使用 Slick 的文件，尽管正确加载了所有文件，但它一直说“slick 不是函数”。

我收到一个错误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.

【参考方案4】：

如果您不想污染全局命名空间，可以将 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 % 

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

【参考方案5】：

如果我理解正确，asset_url filter 就是您要查找的内容。

要在 .liquid 文件中包含 JS 文件，请使用：

 'script.js' | asset_url | script_tag 

还有一个 CSS 文件：

 'style.css' | asset_url | stylesheet_tag 

【讨论】：

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

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