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

どうもありがとうございます！大変助かりました！