某些 url Liquid Shopify 上的自定义 CSS答案

【问题标题】：custom css on certain url Liquid Shopify某些 url Liquid Shopify 上的自定义 CSS
【发布时间】：2021-03-06 12:42:02
【问题描述】：

我正在尝试在某些 URL Liquid Shopify 上添加 CSS。只有在那个子页面上，我才需要与其他页面不同风格的元素。我在其他液体代码中发现了一些附在里面的示例，但它不起作用。这些是我尝试过的例子：我要设置样式的元素没有唯一的类或 ID。

<style>
{% if page.url == 'fullUrl' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
{% if page.url == '/subpage' '%}
  #someEmelent {margin: 0 auto}
{% endif %}
</style>

我在纯 CSS 中尝试过其他的东西，比如：

@document url("http://www.example.com/subpade/") {
#someEmelent {margin: 0 auto}
}

【问题讨论】：

如果可以包含JS，可以尝试添加新类。
我会尝试，还有什么可以在 Liquid 或纯 CSS 中使用吗？
如果你把页面链接发给我，我可以帮忙。

标签： css styles shopify liquid

【解决方案1】：

您可以使用请求对象： https://shopify.dev/docs/themes/liquid/reference/objects/request#request-path

所以这样的事情应该可以工作：

{% if request.path contains 'variable_part_of_url' %}
    <style>
        /* your styles */
    </style>
{% endif %}

另一种方法是创建特定模板并将其应用于您的页面。然后你可以在 body 中添加一个特定的类并在你的 CSS 文件中使用它。

【讨论】：

【解决方案2】：

我认为您想要的是将您的 CSS 基于模板标题。例如：如果你想要一个特定集合的 CSS 类，你可以使用：

class="{{ collection.title | handleize }}"

您可以使用任何模板名称更改集合

【讨论】：