Der Hintergrund muss ein Bild sein, das für jede Kategorie einzigartig ist (kein globaler CSS-Stil).
Was ich versucht habe
Benutzerdefiniertes JavaScript, um das Bild und den Text einzufügen. Es funktioniert, aber das Bild wird zuerst geladen und dann in der Größe geändert, was zu ruckeligen Übergängen/Layoutverschiebungen führt.
Die Komponente Category Banner kam dem nahe, aber ich konnte dieses exakte Layout und die anforderungen für kategoriespezifische Bilder nicht erfüllen.
Frage
Was ist der empfohlene Ansatz in Discourse, um dies zu erreichen?
Gibt es Beispiele oder CSS/HTML-Muster, um Platz zu reservieren (z. B. Wrapper mit festem Seitenverhältnis/object-fit) und CLS zu vermeiden?
Tipps zur Verwendung von kategoriespezifischen Uploads oder Theme-Einstellungen, um das Hintergrundbild sauber festzulegen.
Sehr grottige Demo (und ich benutze keine Themenkarten), aber ich denke, das kannst du ganz einfach mit dem integrierten Hintergrundbild der Kategorie machen:
wird das Bild auf dem Body-Tag platziert. Vielleicht passt du dann das CSS nach Belieben an (mein Beispiel ist 400px):
`+ einige Anpassungen an der Textausrichtung, dann solltest du eine Annäherung an das bekommen, was du willst, denke ich? Der Hauptnachteil ist, dass es wirklich bildschirmfüllend ist, sodass es auf breiteren Bildschirmen herausragt.
Ich denke, die am ehesten dem entsprechende Theme-Komponente, die ich gesehen habe, ist diese:
Sie könnten sich diese ansehen, um einige Ideen zu bekommen, aber es klingt, als müssten Sie möglicherweise eine benutzerdefinierte Komponente erstellen. Sie könnten unter Marketplace posten, wenn Sie Entwickler suchen, die Ihnen helfen können.
