カテゴリ固有のCSSがF5以外ではリフレッシュされない

皆さん、こんにちは。

この特定のCSSがあります。

body[class^="category-documentation"] {
        .topic-list .topic-list-header .posts,
        .topic-list .topic-list-header .views,
        .topic-list .topic-list-body .posts,
        .topic-list .topic-list-body .views,
        .topic-list .topic-list-body .posters,
        .topic-list .topic-list-header .posters
        {
            display: none !important;
        }

        .topic-list .topic-list-body .main-link,
        .topic-list .topic-list-header .topic-list-data
        {
            width: 90% !important;
        }

        .topic-list .topic-list-header .activity, .full-width .contents .topic-list .topic-list-body .activity {
            width: 10% !important;
        }

        .topic-list .topic-excerpt {
            display: none !important;
        }
    }

これは「ドキュメンテーション」カテゴリの多くの要素を非表示にするのに非常に効果的です(はい、ドキュメントプラグインが存在することは知っていますが、ネイティブのレイアウトの方が優れていると思います)。私の問題は、「Ford」から「Documentation」にクリックしたときに、CSSがリフレッシュされず、ページ全体をF5 / Ctrl + Rでリフレッシュしない限り、私の要素が非表示にならないことです。

これが機能するようにするために、何か見落としていることはありますか?

逆も同様です。

https://community.cyanlabs.net の任意のカテゴリにアクセスしてからドキュメントに移動すると、非表示のCSS要素が表示されたままになります。

「いいね!」 1

Air テーマを使用しているようです。このテーマには Discourse Loading Slider テーマコンポーネントが含まれています。

このコンポーネントを 管理 > カスタマイズ > テーマ > コンポーネント から無効にして、もう一度試してみていただけますか?このコンポーネントが原因で、ページを更新するまでクラスが残ってしまう問題が発生することがあります。

「いいね!」 4

ご返信ありがとうございます。

これをテストしましたが、残念ながら今回は何も変わりませんでした。

簡単なものでなければ、JavaScriptでbodyクラスを確認します。api.onPageChange(()を使用しますが、少し奇妙なようです。

「いいね!」 1

なるほど…よく見ると、テーマによって body タグに category-documentation-21category-ford-5 のような動的なクラスが追加されているようです。ページ遷移時にこれらのクラスが適切に削除されていないようです。

「いいね!」 1

EDIT、意図が分かりました。なぜかbody要素にそのクラスが保持されています :thinking:

EDIT2:コンポーネントなしのテーマのコピーを作成しましたが、同じ問題が残っています。したがって、プラグインまたはコアの問題であるはずです。

最もダサい解決策賞は私に :smiley:

<script type="text/discourse-plugin" version="0.8.19">
  api.onPageChange((url) => {
        if (url.indexOf("/c/documentation/") >= 0) {
            $("<style id='documentationworkaround'>.topic-list .topic-list-body .posters,.topic-list .topic-list-body .posts,.topic-list .topic-list-body .views,.topic-list .topic-list-header .posters,.topic-list .topic-list-header .posts,.topic-list .topic-list-header .views{display:none!important}.topic-list .topic-list-body .main-link,.topic-list .topic-list-header .topic-list-data{width:90%!important}.full-width .contents .topic-list .topic-list-body .activity,.topic-list .topic-list-header .activity{width:10%!important}.topic-list .topic-excerpt{display:none!important}</style>").appendTo( "head" )
        } else {
            $("#documentationworkaround").remove();
        }

    });
</script>

原因を知っている方がいれば教えてください :slight_smile:

「いいね!」 1

これはコアのバグのようですので、再分類します。

再現手順:

  1. Support - Discourse Meta のようなカテゴリにアクセスします。
  2. ページを更新します。
  3. 別のカテゴリに切り替えます。
  4. bodyタグのクラスを確認すると、前のカテゴリが残っています。

Screen Shot 2022-05-10 at 2.31.33 PM

これはサーバーサイドで追加されているようです。エンジニアにトラブルシューティングを手伝ってもらったところ、具体的には以下の箇所から来ているようです。

「いいね!」 3

アップデートありがとうございます。今のところ、私のぎこちないJavaScriptでこの問題は回避できていますが、このバグの状況を追跡するにはどうすればよいですか?

修正された(または関連するその他の)際に、このトピックを更新します。トピックの下部にあるドロップダウンでトラッキングレベルを「監視中」に変更すると、新しい投稿の通知を受け取ることができます。

素晴らしい、GitHubのイシューなどがあるか知りませんでした。このトピックはすでにウォッチしているので、最新情報を把握しておきます。

改めて、ご協力ありがとうございます。

このコミットで修正されるはずなので、次にDiscourseをアップデートする際には、カテゴリクラスが期待どおりに追加/削除されるはずです。

「いいね!」 4

ありがとうございます。クラスは正しく更新されましたが、カテゴリを切り替えてもCSSが適用されません。

body[class^="category-documentation"] {
        .topic-list .topic-excerpt, .topic-list .topic-list-body .posts, .topic-list .topic-list-header .posts {
            display: none !important
        }
    }

カテゴリ間を移動しても、正しく機能しません。

「いいね!」 1

おっと、それは予期せぬことですね…それはJSで追加されたCSSですか?

いいえ、common または desktop.css ファイルにプレーンな CSS を記述するだけで、両方試しました。

ああ、わかりました… class^= はクラスの先頭をチェックしますが、カテゴリが常にリストの最初のクラスとは限りません。

body[class*="category-documentation"] に更新すると機能するはずです。これは、クラス名がリストのどこに表示されるかをチェックします。

「いいね!」 5

これで + コア修正でうまくいくようです。ありがとうございます。

「いいね!」 3