自定义css在某些url Liquid Shopify

Question

我正在尝试添加css在某些URL Liquid Shopify。只有在该子页面上，我需要该元素的样式与其他页面不同。我在其他液体代码中发现了一些附在里面的例子，但它不起作用。这些是我尝试过的例子:我想样式化的元素没有唯一的类或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}
}

Answer 1

您可以使用请求对象:https://shopify.dev/docs/themes/liquid/reference/objects/request请求路径

这样就可以了:

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

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

Answer 2

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

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

你可以用任何模板名更改集合