Personalizzare la schermata di avvio di Discourse con immagini SVG personalizzate

[awesomerobot (Kris)]

Questa funzionalità è stata molto richiesta qui su Meta Personal branding for the splash screen .

Abbiamo ora aggiunto l’opzione per aggiungere un SVG, statico o animato, come immagine della schermata di avvio per sostituire questo indicatore predefinito di puntini di caricamento:

Se viene utilizzato un SVG statico, questo appare sopra l’animazione dei puntini di caricamento:

altrimenti, se viene utilizzato un SVG animato, questo sostituisce completamente i puntini:

Nota che per motivi di prestazioni, gli SVG animati dovrebbero utilizzare solo animazioni di trasformazione CSS o di opacità. ^[1]
È possibile abilitare questa funzionalità tramite il nostro sistema Upcoming Changes ( /admin/config/upcoming-changes):

Per questo viene utilizzata l’impostazione del sito splash screen image. È possibile utilizzare le variabili CSS var(--primary), var(--secondary) e var(--tertiary) all’interno del proprio SVG per fare riferimento ai colori del tema e adattarsi alla modalità scura.

È importante notare che l’abilitazione di questa funzionalità potrebbe avere un impatto sul punteggio LCP, quindi la cosa migliore per provare è apportare la modifica, attendere un po’ e verificare se ha un impatto su LCP o sull’indicizzazione nella Google Search Console.

---

1. Inizialmente abbiamo tentato di consentire elementi di animazione SMIL (\u003canimate\u003e, \u003canimateTransform\u003e, ecc.), ma queste animazioni vengono messe in pausa dal browser quando viene eseguito javascript, causando scatti. Le animazioni CSS di trasformazione e opacità non sono bloccate da JS ed evitano questo problema. ↩︎

[philh]

hmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

Come sostituisco questi puntini? Per me appare solo per mettere il mio logo svg

[Don]

Ciao

@awesomerobot

Se viene utilizzato un SVG statico, appare sopra l’animazione del punto di caricamento, altrimenti se se ne utilizza uno animato li sostituisce:

Quindi verrà sostituito se si utilizza un SVG animato.

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

Ho applicato un’animazione SVG, ma appare molto piccola.

C’è un modo per ingrandirla?

[awesomerobot (Kris)]

Al momento non abbiamo un modo per aggiungere CSS personalizzato perché questa schermata viene caricata prima di gran parte dell’app e ci sono molti più vincoli. Puoi condividere qui l’immagine SVG che stai utilizzando (o inviarmela in privato)? Potrei fare dei test e vedere se le nostre impostazioni predefinite potrebbero essere più adatte.

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

Eccolo qui

[awesomerobot (Kris)]

Grazie per il riferimento!

Sto aggiungendo una modifica che consentirà dimensioni leggermente maggiori e centrerà meglio gli schermi con loghi statici: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

Ho anche notato che la tua SVG ha molto spazio in alto che influisce sulla centratura, non so se è intenzionale, ma questa versione lo rimuove

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

Grazie mille!

[awesomerobot (Kris)]

Si noti che c’è una leggera modifica in ciò che stiamo consentendo per l’animazione SVG (e ho aggiornato l’OP per rifletterlo). Inizialmente stavamo consentendo le animazioni SMIL negli SVG, ma si scopre che queste hanno dei singhiozzi perché il browser mette in pausa questo tipo di animazione mentre viene eseguito javascript.

Quindi, invece, la raccomandazione è di utilizzare solo animazioni di trasformazione CSS e opacità nei tuoi SVG, poiché queste non sono bloccate da JS.

Se dai un’occhiata all’SVG di @ばこん sopra… fornisce un buon esempio di un’animazione consentita:

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

Fai anche attenzione a dare alle tue animazioni nomi univoci in modo che non entrino in conflitto con altre animazioni in Discourse (nomi come “blink”, “rotate”, “fade” ecc. potrebbero essere troppo generici). Usare un prefisso come unique- è un ottimo modo per evitarlo.