# 通过 CSS 区别处理 /latest 与 /new 等路径

**URL:** <https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240>\
**Category:** Support\
**Created:** [2019年十二月6日 08:52 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240 "2019-12-06T08:52:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Krischan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/krischan/32/47290_2.png) [@Krischan](https://meta.discourse.org/u/Krischan)\
**Post date:** [2019年十二月6日 08:52 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/1 "2019-12-06T08:52:00Z")

</div>

我希望我们的主页（即 /latest）的样式与 /new、/unread 等页面有所不同。目前是否可以通过 CSS 实现？谢谢！

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年十二月6日 09:21 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/2 "2019-12-06T09:21:32Z")

</div>

我们不会根据当前筛选条件添加任何类。您想做什么？

---

<div class="post-metadata">

**Author:** ![Krischan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/krischan/32/47290_2.png) [@Krischan](https://meta.discourse.org/u/Krischan)\
**Post date:** [2019年十二月6日 09:23 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/3 "2019-12-06T09:23:43Z")

</div>

我们使用主题列表预览插件来显示缩略图，并希望仅在主页上显示它们：[https://1e9.community/](https://1e9.community/)

---

<div class="post-metadata">

**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\
**Post date:** [2019年十二月6日 09:33 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/4 "2019-12-06T09:33:53Z")

</div>

您可以将此代码添加到主题的 `header` 选项卡中，它会在您导航时向 `<body>` 标签添加相应的类。

```markdown
<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:d-navigation", {
  didInsertElement() {
    document.body.classList.add(`filter-mode-${this.filterType}`);
  },

  willDestroyElement() {
    document.body.classList.remove(`filter-mode-${this.filterType}`);
  }
});
</script>

```

它将添加类似 `filter-mode-FILTERMODE` 的类，例如：

```plaintext
filter-mode-top
filter-mode-new
filter-mode-latest

```

然后，您可以将其与 `navigation-topics` 类结合使用，使您的 CSS 更具针对性，如下所示：

```plaintext
.navigation-topics.filter-mode-new {
  // 执行操作
}

```

请注意，使用 CSS 隐藏图片 **不会** 阻止浏览器下载它们。因此，这不会节省任何带宽，仅会产生视觉上的变化。

另外，您的网站很棒 👍

---

<div class="post-metadata">

**Author:** ![Krischan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/krischan/32/47290_2.png) [@Krischan](https://meta.discourse.org/u/Krischan)\
**Post date:** [2019年十二月6日 09:36 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/5 "2019-12-06T09:36:05Z")

</div>

非常感谢！帮了大忙！

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2020年一月5日 10:48 UTC](https://meta.discourse.org/t/address-latest-differently-then-new-etc-via-css/135240/9 "2020-01-05T10:48:54Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
