仅更改主页的 CSS | Shopify答案

【问题标题】：Chaning CSS for Home Page Only | Shopify仅更改主页的 CSS | Shopify
【发布时间】：2021-11-19 17:31:06
【问题描述】：

我正在使用 Shopify 来构建我的网站，我喜欢主页导航的样子，但我想将其他页面的导航栏更改为 100% 宽度。由于它们都共享相同的代码，我知道我必须构建一个 if 语句，我只是对 Shopify 不够熟悉，无法构建它。

{%if page.handle == "Home page"%}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif %}

这是我正在使用的代码，但它不起作用。我只是想看看是否可以让 if 语句起作用，但我做不到。

【问题讨论】：

【解决方案1】：

在索引页面上，您没有“页面”对象。

你可以试试这个：

{% if template.name == "index" %}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif %}

其中使用模板名称来检查是否是索引页（首页）。

或者这个：

{% if request.path == "/" %}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif%}

它使用URL的路径来检查它是否是索引页面。

【讨论】：

【解决方案2】：

资产文件不知道你在哪个页面

assets 文件夹中的文件是静态资源，可以被服务器和浏览器强缓存。这意味着每次请求assets 文件夹中的资源时，服务器都会返回完全相同的文件。

这意味着资产文件不知道您网站上的任何动态信息 - 包括查看者所在的页面、他们正在查看的产品、购物车的内容等。您唯一知道的 Liquid 变量应该在您的资产文件中访问的是主题的 settings 变量和翻译。

不过，您可以通过多种方式重新排列代码或网站结构以适应这种情况。一些想法包括：

例子：

{% if template.name == 'index' %}
  {{ 'index-styles.css' | asset_url | stylesheet_tag }}
{% endif %}

将{{ template.name }} 和/或{{ template.suffix }} 作为类名或数据属性添加到<body> 标记或其他一些高级标记。然后，您可以非常轻松地为特定页面设置选择器的范围。

例子：

HTML:
<body class="template-{{ template.name }}">`

CSS:
.template-index .page-width {

【讨论】：