我通常将这些代码放在下面,以便为我的产品页面做额外的样式。但我正在寻找一种方法,我想在产品页面中链接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>
如果
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 在将所有内容编译成最终的 scss
文件时会缩小 css
文件 - 这意味着文件大小会稍微小一些,因为所有空白都会被删除。如果您决定这样做,则文件的编译(浏览器友好)版本将作为 <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 %}
在 Shopify 2024 中链接资产的完整代码
<link rel="stylesheet" href="{{ 'style.css' | asset_url }}" media="print" onload="this.media='all'">