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

支持
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: