Discourse-Startbildschirm mit benutzerdefinierten SVG-Bildern branden

Ankündigungen
1

Diese Funktion wurde hier auf Meta Personal branding for the splash screen sehr häufig gewünscht.

Wir haben nun die Möglichkeit hinzugefügt, eine SVG, entweder statisch oder animiert, als Startbildschirmbild hinzuzufügen, um diese standardmäßige Lade-Punkt-Anzeige zu ersetzen:

image
image1080×768 2.65 KB

Wenn eine statische SVG verwendet wird, erscheint sie über der Lade-Punkt-Animation:

image
image1232×868 4.64 KB

Wenn stattdessen eine animierte SVG verwendet wird, ersetzt diese die Punkte vollständig:

image
image1034×572 2.94 KB

Beachten Sie, dass für die Leistung animierte SVGs nur CSS-Transform- oder Opazitätsanimationen verwenden sollten. [1]
Sie können diese Funktionalität über unser System für bevorstehende Änderungen aktivieren ( /admin/config/upcoming-changes):

image
image1930×302 42.2 KB

Dafür wird die Website-Einstellung splash screen image verwendet. Sie können die CSS-Variablen var(--primary), var(--secondary) und var(--tertiary) innerhalb Ihrer SVG verwenden, um auf die Farben Ihres Themas zu verweisen und sich an den Dunkelmodus anzupassen.

image
image1728×488 44.2 KB

Es ist wichtig zu beachten, dass die Aktivierung dieser Funktionalität Auswirkungen auf Ihren LCP-Wert haben kann. Der beste Weg, dies auszuprobieren, ist, die Änderung vorzunehmen, eine Weile zu warten und zu prüfen, ob sich dies auf den LCP oder die Indexierung in der Google Search Console auswirkt.

  1. Wir haben ursprünglich versucht, SMIL-Animationselemente (\u003canimate\u003e, \u003canimateTransform\u003e usw.) zuzulassen, aber diese Animationen werden vom Browser angehalten, wenn JavaScript ausgeführt wird, was zu Ruckeln führt. Transform- und Opazitäts-CSS-Animationen werden nicht durch JS blockiert und vermeiden dieses Problem. ↩︎

25 „Gefällt mir“
Personal branding for the splash screen
How to change Discourse splash animation?
Change loading animation
Discourse Logo with Throbber
3

hmmmmm Discourse Logo with Throbber

1 „Gefällt mir“
4

Wie ersetze ich diese Punkte? Bei mir erscheint nur die Möglichkeit, mein SVG-Logo einzufügen

Splash
Splash1920×885 32.3 KB

1 „Gefällt mir“
5

Hallo :waving_hand:

Es wird also ersetzt, wenn Sie ein animiertes SVG verwenden.

2 „Gefällt mir“
6

Ich habe eine SVG-Animation angewendet, aber sie erscheint sehr klein.

Screenshot_20260204-224211
Screenshot_20260204-2242111337×928 25.1 KB

Gibt es eine Möglichkeit, sie zu vergrößern?

2 „Gefällt mir“
7

Wir haben derzeit keine Möglichkeit, benutzerdefiniertes CSS hinzuzufügen, da dieser Bildschirm geladen wird, bevor ein Großteil der App geladen ist, und es viel mehr Einschränkungen gibt. Können Sie das SVG-Bild, das Sie verwenden, hier teilen (oder mir per PN schicken)? Ich könnte einige Tests durchführen und sehen, ob unsere Standardeinstellungen entgegenkommender sein könnten.

3 „Gefällt mir“
9

svg
svg300×200 22.3 KB

Hier ist es

2 „Gefällt mir“
10

Danke für den Verweis!

Ich füge eine Änderung hinzu, die etwas größere Abmessungen zulässt und Bildschirme mit statischen Logos besser zentriert: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

Mir ist auch aufgefallen, dass Ihre SVG oben viel Platz hat, was die Zentrierung beeinträchtigt. Ich bin mir nicht sicher, ob das beabsichtigt ist, aber diese Version entfernt ihn.

かい鯖グループフォーラムのsvgにしたいけど、penguinmode_cleaned (3) (1)

1 „Gefällt mir“
12

Vielen Dank!

1 „Gefällt mir“
13

Beachten Sie, dass es eine leichte Änderung bei dem gibt, was wir für SVG-Animationen zulassen (und ich habe den ursprünglichen Beitrag entsprechend aktualisiert). Ursprünglich erlaubten wir SMIL-Animationen in SVGs, aber es stellte sich heraus, dass diese stottern, weil der Browser diese Art von Animation pausiert, während JavaScript ausgeführt wird.

Stattdessen wird empfohlen, in Ihren SVGs nur CSS-Transformations- und Opazitätsanimationen zu verwenden, da diese nicht durch JS blockiert werden.

Wenn Sie sich die SVG von @ばこん oben ansehen… sie bietet ein gutes Beispiel für eine zulässige Animation:

@keyframes unique-slide {
  0% { transform: translateX(-80px); }
  100% { transform: translateX(260px); }
}

Achten Sie auch darauf, Ihren Animationen eindeutige Namen zu geben, damit sie nicht mit anderen Animationen in Discourse kollidieren (Namen wie „blink“, „rotate“, „fade“ usw. könnten zu allgemein sein). Die Verwendung eines Präfixes wie unique- ist eine großartige Möglichkeit, dies zu vermeiden.

4 „Gefällt mir“