如何在 Shopify 主题的特定部分加载 CSS？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何在 Shopify 主题的特定部分加载 CSS？

P粉752812853 2023-08-30 09:06:40

[CSS3讨论组]

933

<p>我正在尝试创建另一个部分并应用资产文件夹中的 CSS。但是当我把 <code>{{ 'style-section-block.css' |资产网址 | stylesheet_tag }}</code> 到我想要应用 CSS 的页面，它也会影响其他部分，即使我只放入我想要更改的部分。</p> <p>我希望能够编辑一个部分页面</p>

P粉752812853

全部回复(1)

P粉0837850142023-08-31 00:00:03 1楼

如果您想应用 CSS 特定部分，请首先向您想要设置样式的部分添加唯一的类或 ID。在 CSS 文件中使用该唯一的类或 ID 后，您可以设置部分的样式。示例是

<div class="my-section">
  <!-- section content -->
</div>

“my-section”是该节的唯一类名。您可以使用该类名称将样式添加到部分。

.my-section {
      font-size: 24px;      
    }

根据 Shopify 主题。您可以根据当前页面句柄或页面模板有条件地使用 CSS 文件。根据我的想法，您可以在主题的“布局”文件中执行此“模板”或“page.handle”变量。我的意思是“theme.liquid”文件。您可以将以下代码添加到“布局”文件的“head”部分。

{% if template contains 'your-specific-template' or page.handle == 'your-specific-page-handle' %}
  {{ 'style-section-block.css' | asset_url | stylesheet_tag }}
{% endif %}

将“您的特定模板”替换为您的模板名称，或将“您的特定页面句柄”替换为您的页面句柄名称。并从其他部分删除 CSS 链接。