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: