将外部 CSS 样式表与 Shopify 产品页面链接答案

【问题标题】：Link external CSS stylesheet with Shopify product page将外部 CSS 样式表与 Shopify 产品页面链接
【发布时间】：2020-10-14 16:53:46
【问题描述】：

我通常将这些代码放在下面，以便为我的产品页面添加额外的样式。但我正在寻找一种方法，我想在产品页面中链接 CSS 样式表并在不同的目录中进行 CSS 设计，例如：“assets/custom.css”。

那么我如何链接下面的样式。

<style>
.checkmarks li {
  list-style-type: none;
background: url("https://i.imgur.com/FqEWdiJ.png") 0px 5px no-repeat;
background-size: 20px;
padding-left: 30px;
  line-height: 200%;
}
</style>

<ul class="checkmarks">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

【问题讨论】：

标签： html css shopify

【解决方案1】：

如果您在 assets 文件夹中有文件，您可以使用 Liquid 中的 asset_url 过滤器访问它。（参考：https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url）

如果您将样式表创建为assets/custom.css，您可以使用以下方法获取 URL：

{{ 'custom.css' | asset_url }}

由于它是一个样式表，您可以添加 stylesheet_tag 过滤器，让 Shopify 自动将其转换为适合您的 HTML 标签：

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

另一个可能的改进是使您的样式表成为scss 文件，而不是标准的css 文件。这允许您使用一些花哨的功能来帮助保持较长的 CSS 文件更具可读性/可维护性。此外，Shopify 会在将所有内容编译成最终的 css 文件时缩小 scss 文件 - 这意味着文件大小会稍微小一些，因为所有空格都被删除了。如果您决定这样做，文件的编译（浏览器友好）版本将作为 <filename>.scss.css 访问 - 因此 custom.scss 可以输入为：

{{ 'custom.scss.css' | asset_url | stylesheet_tag }}

最后，如果您希望此文件仅出现在您的 product 页面上，您可以：

将此代码放在您的 templates/product.liquid 文件中，或者
将此代码放在layout/theme.liquid 文件中，并用一个简单的模板检查来查看我们是否在产品页面上：
```
{% if template.name == 'product' %}
 {{ 'custom.scss.css' | asset_url | stylesheet_tag }}
{% endif %}
```

【讨论】：