「最新」ページと「トップ」ページを個別にスタイル設定する方法はありますか？

サポート
1

「最新」ページと「トップ」ページの要素のスタイル設定で問題が発生しました。両方のページでbodyクラスが全く同じ（class=“staff docked navigation-topics”）であるため、個別にスタイルを設定できません。「カテゴリ」ページは異なるクラス（class=“staff docked navigation-categories categories-list”）を持っているため、問題なくスタイルを設定できます。どなたか解決策をお持ちですか？

2

ルート（discovery.top、discovery.latest）に基づいてカスタムクラスを追加したり、その他の処理を行ったりできます。中央のブロックは次のようなものになります。

@discourseComputed("router.currentRouteName")
  canDisplay(currentRouteName) {
    if (currentRouteName === `discovery.top`) {
       ...
    }

ただし、カスタムスクリプトを使用しない解決策があれば、ぜひお聞きしたいです。

「いいね！」 2
3

返信ありがとうございます。さらに検索を続け、自分にとってうまくいった別の解決策を見つけました。これは他の誰かの役にも立つかもしれません。

// Javascript - URL内のテキストに基づいてターゲット要素を非表示にします。この場合、URL内のテキストは「top」であり、非表示にしたいIDは「main-title」でした。


<script>
    window.onload = function() {
      if (window.location.href.indexOf('/top')) {
        document.querySelectorAll('#main-title')[0].style.display = 'none';
      }
    };
</script>

編集: これは意図したとおりに機能しません。問題は、javascript関数をトリガーするためにページをリフレッシュする必要があることです。

「いいね！」 1
4

はい、@manuel のソリューションは非常に簡単に実現できる良いアプローチです。window.location.href を使用すると、いずれにしても Ember の runloop のために正しい URL を取得する際に問題が発生する可能性があります。

あなたがやっていることをより「Ember」的なアプローチに調整するには、次のようなことを行う必要があります。

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    }
  });
</script>

ただし、おそらく単に body クラスを追加してそのクラスをスタイル設定するのが最善でしょう。これにより、より複雑なスタイル変更も可能になります。

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

.route-discovery-top #main-title {
    display: none;
}
「いいね！」 3