向 Shopify 添加自定义 CSS 和 JS

Question

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

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

Answer 1

只需将您的filename.js文件上传到资产文件夹中。

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

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

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

filename.js.liquid

祝你好运！

Answer 2

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

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

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

和一个 CSS 文件：

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

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 %} 

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

Answer 4

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

Answer 5

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

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

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

背景：

似乎 Shopify 在创建新文件时总是将 mime 类型设置为 text/x-liquid 并且如果将液体用于主题，无论文件扩展名如何。 然后，这将导致 Chrome 出现类似这样的浏览器错误：

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