Hinzufügen einer Kategorieklasse zu einer veröffentlichten Seite

Entwickler
1

Wenn wir type="text/discourse-plugin" nicht in einem Skript-Tag verwenden können, gibt es eine Möglichkeit, den aktuellen Kategorie-Slug einer veröffentlichten Seite abzurufen?
Der Zweck ist, eine neue Klasse mit dem Slug in einem HTML-Tag der Seite hinzuzufügen.

2 „Gefällt mir“
2

Hallo,

Ich bin mir nicht sicher, ob ich es vollständig verstehe, aber die Kategorie ist auf „body“ verfügbar, sodass Sie diese anvisieren können.

Zum Beispiel:

Screenshot 2022-11-01 at 17.42.55
Screenshot 2022-11-01 at 17.42.55598×127 17.1 KB

Sie können alle Lounge-Kategorie-Themen mit Folgendem anvisieren:

.published-page.lounge {
  ...
}
2 „Gefällt mir“
3

Entschuldigung, ich war nicht klar genug und hätte den Zweck besser erklären sollen.

Derzeit verwendet die Seitenveröffentlichung nicht den Kategoriehintergrund.

Einstellung:

image
image636×743 82.3 KB

Themenansicht:

image
image1432×772 71.6 KB

Ansicht der veröffentlichten Seite:

image
image898×330 19 KB

Der Kategoriehintergrund ist in color_definitions.scss definiert:

body.category-test-category {
    background-image: url(/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg)
}

Die veröffentlichte Seite hat nicht die Klasse category-test-category und erbt daher nicht das Hintergrundbild.

Meine Idee ist es, JavaScript zu verwenden, um die Kategorie-Slug zu erhalten und dem Body-Tag eine Klasse category-[category slug] hinzuzufügen, unabhängig vom Kategorienamen, damit Hintergrundbilder für Kategorien automatisch angewendet werden, anstatt benutzerdefiniertes CSS für die Kategorien jeder veröffentlichten Seite zu schreiben, wie zum Beispiel:

.published-page {
    &.test-category {
        background-image: url("/uploads/default/original/1X/1851d5e9eb66a9ecf49f0dc747dfbad1a0fd220b.jpeg");
    }
}
4 „Gefällt mir“
4

Ich stimme zu, sehr gute Idee :+1:

2 „Gefällt mir“
5

Ich verstehe… Ja, es ist eine gute Idee, aber leider glaube ich nicht, dass es möglich ist, eine veröffentlichte Seite mit einer Theme-Komponente (JavaScript) zu ändern. Wahrscheinlich mit einem Plugin oder indem der category--Teil vor dem Kategorienamen in den Kern aufgenommen wird.

Ich denke, für den Moment funktioniert der manuelle Weg. Erstellen Sie eine Theme-Komponente mit dem relevanten SCSS für die Kategorien veröffentlichter Seiten und fügen Sie dafür Einstellungen hinzu.

Ich meine vielleicht so etwas: GitHub - VaperinaDEV/published-page-category-background-image

Aber vielleicht gibt es eine bessere Lösung, ich bin mir nicht sicher. :slightly_smiling_face:

3 „Gefällt mir“
6

Das ist eine sehr clevere Lösung, aber ich stimme zu, dass es schön wäre, so etwas standardmäßig (oder anpassbar) im Kern zu haben. Die aktuelle Absicht ist, explizit einen Standardhintergrund mit den Farben des Themes zu verwenden, wie wir in publish.scss sehen können:

.published-page {
  background-color: var(--secondary);
  color: var(--primary);

Was wäre, wenn die URLs der benutzerdefinierten Kategorie-Hintergrundbilder in CSS-Variablen gespeichert würden, auf die wir in unserem benutzerdefinierten CSS leicht zugreifen könnten? Zumindest müssten wir uns nicht darum kümmern, die vollständige Bild-URL in unserem CSS zu verwenden.

Ich habe hier eine Funktionsanfrage gestellt: Published pages could inherit categories' background image setting

4 „Gefällt mir“