Kategoriespezifisches CSS wird erst nach F5 neu geladen

Fehler
1

Hallo Leute,

Ich habe dieses spezifische 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;
        }
    }

Dies funktioniert hervorragend, um viele Elemente in einer „Dokumentations“-Kategorie auszublenden (ja, ich weiß, dass es ein Docs-Plugin gibt, ich finde das native Layout aber besser). Mein Problem ist, dass, wenn ich von z. B. „Ford“ zu „Dokumentation“ wechsle, das CSS nicht neu geladen wird und daher meine Elemente nicht ausgeblendet werden, es sei denn, ich lade die gesamte Seite mit F5 / Strg + R neu.

Fehlt mir etwas, damit dies funktioniert?

Dasselbe gilt auch umgekehrt

Sie können jede Kategorie auf https://community.cyanlabs.net besuchen und dann zu Dokumentation gehen, und Sie werden sehen, dass die ausgeblendeten CSS-Elemente immer noch angezeigt werden.

1 „Gefällt mir“
2

Es sieht so aus, als ob Sie das Air-Theme verwenden, das die Discourse Loading Slider-Theme-Komponente enthält.

Wenn Sie diese Komponente unter admin > customize > themes > components deaktivieren und es dann erneut versuchen… ändert das etwas? Manchmal kann diese Komponente ein Problem verursachen, bei dem Klassen zwischen Seiten verbleiben, bis Sie aktualisieren.

4 „Gefällt mir“
3

Vielen Dank für Ihre Antwort,

Ich habe dies gerade getestet und leider hat dies in diesem Fall keinen Unterschied gemacht.

Wenn es nichts Einfaches gibt, werde ich die Body-Klasse mit api.onPageChange() in JavaScript überprüfen, aber das scheint etwas seltsam zu sein.

1 „Gefällt mir“
4

Ah ok… wenn ich mir das genauer ansehe, scheint es, dass eine dynamische Klasse von einem Theme zum Body-Tag hinzugefügt wird, z. B. category-documentation-21 und category-ford-5… bei Seitenübergängen scheinen diese Klassen nicht richtig entfernt zu werden.

1 „Gefällt mir“
5

EDIT, ich sehe jetzt, was du meinst, es behält diese Klasse aus irgendeinem Grund im Body-Element bei :thinking:

EDIT2: Ich habe eine Kopie des Themes ohne Komponenten gemacht, das gleiche Problem besteht weiterhin, also muss es in einem Plugin oder im Core liegen.

image
image722×1191 108 KB

Der Preis für die ruckeligste Lösung geht an mich :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>

Aber ja, wenn jemand weiß, was die Ursache ist, lasst es mich bitte wissen :slight_smile:

1 „Gefällt mir“
6

Dies scheint ein Fehler im Kern zu sein, daher kategorisiere ich ihn neu.

Zur Reproduktion:

  1. Besuchen Sie eine Kategorie wie Support - Discourse Meta
  2. Aktualisieren Sie die Seite
  3. Wechseln Sie zu einer anderen Kategorie
  4. Betrachten Sie die Klassen im Body-Tag, die vorherige Kategorie bleibt bestehen

Screen Shot 2022-05-10 at 2.31.33 PM

Es scheint serverseitig hinzugefügt zu werden. Ein Ingenieur hat mir bei der Fehlerbehebung geholfen, und genauer gesagt scheint es von Folgendem zu stammen:

3 „Gefällt mir“
7

Danke für das Update, vorerst funktioniert mein wackeliges JavaScript, um das Problem zu umgehen. Wie kann ich den Status dieses Fehlers verfolgen?

8

Wir werden dieses Thema aktualisieren, sobald es behoben ist (oder etwas anderes damit zusammenhängt). Wenn Sie Ihre Tracking-Stufe im Dropdown-Menü am unteren Rand des Themas auf „Beobachten“ ändern, erhalten Sie Benachrichtigungen über neue Beiträge.

Screen Shot 2022-05-10 at 2.53.53 PM
Screen Shot 2022-05-10 at 2.53.53 PM390×136 10.3 KB

9

Ideal, ich wusste nicht, ob es ein GitHub-Problem gab oder so, ich beobachte dieses Thema bereits und werde auf dem Laufenden bleiben.

Vielen Dank nochmals für Ihre Hilfe.

13

Dies sollte in diesem Commit behoben werden, sodass beim nächsten Mal, wenn Sie Discourse aktualisieren, die Kategorieklassen wie erwartet hinzugefügt/entfernt werden.

4 „Gefällt mir“
14

Danke, die Klassen sind jetzt korrekt aktualisiert, aber das CSS wird beim Wechseln zwischen Kategorien immer noch nicht angewendet

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

Bewegen Sie sich zwischen den Kategorien, es wird nicht richtig funktionieren.

1 „Gefällt mir“
15

Oh, hm, das ist unerwartet … wurde das mit JS hinzugefügt?

16

Nein, nur Plain CSS in den Dateien common oder desktop.css, ich habe beides versucht.

19

Ah ok, das ist mir gerade klar geworden… class^= prüft den Anfang der Klasse, und die Kategorie ist nicht immer die erste Klasse in der Liste.

Wenn Sie auf body[class*="category-documentation"] aktualisieren, sollte es funktionieren. Dies prüft, wo auch immer der Klassenname in der Liste vorkommt.

5 „Gefällt mir“
20

Das + die Kernkorrektur scheint zu funktionieren. Danke

3 „Gefällt mir“