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

支持
1

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

2

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

3

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

4

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

<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 的类，例如：

filter-mode-top
filter-mode-new
filter-mode-latest

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

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

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

另外，您的网站很棒 :+1:

5

非常感谢！帮了大忙！