Discourse-Startbildschirm mit benutzerdefinierten SVG-Bildern branden

[awesomerobot (Kris)]

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:

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

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

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):

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.

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. ↩︎

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

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

[Don]

Hallo

@awesomerobot

Wenn ein statisches SVG verwendet wird, erscheint es über der Lade-Punkt-Animation, andernfalls, wenn ein animiertes verwendet wird, ersetzt es diese:

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

[ばこん (べーこん(bac0n))]

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

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

[awesomerobot (Kris)]

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.

[ばこん (べーこん(bac0n))]

Hier ist es

[awesomerobot (Kris)]

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.

[ばこん (べーこん(bac0n))]

Vielen Dank!

[awesomerobot (Kris)]

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.

[Falco]

Google hat gerade Gemini Pro 3.1 veröffentlicht, und ihr erstes Highlight des Modells waren animierte SVGs. Natürlich habe ich versucht, einen Ladebildschirm für https://discourse-on-a-pi5.falco.dev/ zu erstellen, und erhielt dies nach nur 2 Prompts

Passt wirklich gut zu dieser neuen Funktion!

[Bas (Bas van Leeuwen)]

Das ist erstaunlich, Falco

Ich muss sehen, was Gemini mit dem Discourse-Logo machen kann

[Falco]

Ja, ich war mit dem Ergebnis ziemlich zufrieden! Ich habe das lange mit Modellen versucht, dies ist das erste Modell, das damit gut umgehen kann.

Hier ist der Prompt

Generiere ein animiertes SVG, das als Ladeanimation auf einem Forum über den Raspberry Pi Mini Board PC verwendet wird. Die Animation muss mit Inline-CSS von SVG erstellt werden.

was Folgendes erzeugte

dann folgte ich mit

Das ist großartig! Kannst du die Himbeere selbst, die roten Sechsecke, die Animation ändern? Sie bewegen sich diagonal von links oben nach rechts unten, sind aber dezentriert und es sieht seltsam aus. Vielleicht behalten wir diese statisch und zentriert und mit einer subtileren Animation bei?

was dann die Version erzeugte, die ich geteilt habe

Einziger Streitpunkt ist, dass der SVG-Code viele CSS-Kommentare enthält wie

/* Base Animation & Board Styles */

die ungültig sind, wenn man sie als SVG-Datei speichert. Daher habe ich die 7 Zeilen mit diesen manuell entfernt.

[Bas (Bas van Leeuwen)]

Du erzielst viel bessere Ergebnisse als ich.

Nach ein paar Durchläufen aufgegeben, das ist das Beste, was ich bekommen habe

[Bearbeiten], ich füge noch zwei Zwischenzustände hinzu:
Dieser war ziemlich gut… außer dass das Logo kaputt war:

Ich dachte, das wäre der interessanteste, aber er funktionierte wirklich nicht als Logo-Animation (und wurde ohne ersichtlichen Grund als Video mit Ton anstelle eines SVG gerendert):

---

Entschuldigt alle, dass ich das vom Thema ablenke Lasst uns wieder Falcos Arbeit bewundern und über den Splashscreen diskutieren!

[Falco]

@Bas

Du erzielst viel bessere Ergebnisse als ich.

Nach ein paar Iterationen aufgeben

Ich fürchte, die Beschränkung auf das Discourse-Logo ist zu streng für die KI.

Ich habe versucht:

Generiere eine animierte SVG, die als Ladeanimation für ein Diskussionsforum verwendet wird. Das Forum läuft auf Discourse, daher könnten einige Motive davon auf der SVG verwendet werden, wie zum Beispiel regenbogenfarbene Sprechblasen? Die Animation muss mit inline SVG CSS erstellt werden.

Und erhielt:

[Falco]

Wir sollten einen animierten Discourse-Splash-Wettbewerb veranstalten!

[Canapin (Coin-coin le Canapin)]

@Bas

Du erzielst viel bessere Ergebnisse als ich.

Haben Sie daran gedacht, Gemini in den „Pro“-Modus zu versetzen? Möglicherweise ist dies nicht standardmäßig der Fall.

[keegan (Keegan George)]

@Falco

Wir sollten einen Wettbewerb für animierte Discourse-Splashscreens veranstalten!

Habe einen Versuch gemacht, einen im Einklang mit dem neuen Branding-Stil zu erstellen

[noahl (Noah Lovell)]

@Falco

Wir sollten einen animierten Discourse-Splash-Wettbewerb veranstalten!

Nun ja – ich glaube, ich mache jetzt bei diesem Trend mit

Aufforderung

Wandle dies in ein animiertes SVG um.

Regeln:

• Es muss ein animiertes SVG sein
• Es wird als Ladesymbol zwischen den Seiten dienen, daher muss es dezent und minimal sein.

Idee:

• Ich möchte die Gesamtform beibehalten, ohne Verzerrung
• Ich denke, wir könnten etwas mit den 3 inneren Formen machen – eine Art Rotation, ähnlich dem, was man bekommen würde, wenn man einen Tischtennisschläger am Griff in den Händen dreht

Du MUSST die Markenidentität bewahren und ihr Gesamtdesign nicht verletzen – dies ist für die Marke unerlässlich.

Ausgabe (Nach 3 Überarbeitungen):