【问题标题】: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 语句起作用,但我做不到。

【问题讨论】:

  • 你是把这个 CSS 内联(在
  • 这是来自 assets 文件夹中的 CSS 文件

标签: frontend shopify liquid shopify-template


【解决方案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的路径来检查它是否是索引页面。

【讨论】:

  • 我尝试使用这两种方法,但它们都不起作用,我将其插入到我的 theme.css 文件中,我需要做些什么具体的事情吗?
  • 您的文件必须是 theme.css.liquid 才能工作。
【解决方案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 {

【讨论】:

    猜你喜欢
    • 2019-07-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-28
    • 2017-05-01
    • 1970-01-01
    • 2016-05-10
    • 1970-01-01
    相关资源
    最近更新 更多