Écran de démarrage Discourse avec des images SVG personnalisées

[awesomerobot (Kris)]

Cette fonctionnalité a été très demandée ici sur Meta Personal branding for the splash screen .

Nous avons maintenant ajouté la possibilité d’ajouter un SVG, statique ou animé, comme image de l’écran de démarrage pour remplacer cet indicateur de chargement par défaut par des points :

Si un SVG statique est utilisé, il apparaît au-dessus de l’animation des points de chargement :

sinon, si un SVG animé est utilisé, il remplace complètement les points :

Notez que pour des raisons de performance, les SVG animés ne devraient utiliser que les animations de transformation CSS ou d’opacité. [^1]
Vous pouvez activer cette fonctionnalité via notre système Upcoming Changes ( /admin/config/upcoming-changes ) :

Le réglage du site splash screen image est utilisé à cette fin. Vous pouvez utiliser les variables CSS var(--primary), var(--secondary) et var(--tertiary) dans votre SVG pour référencer les couleurs de votre thème et vous adapter au mode sombre.

Il est important de noter que l’activation de cette fonctionnalité peut avoir un impact sur votre score LCP , donc la meilleure façon de l’essayer est d’appliquer la modification, d’attendre un moment et de vérifier si cela a un impact sur le LCP ou l’indexation dans la Google Search Console.

[^1] : Nous avons initialement tenté d’autoriser les éléments d’animation SMIL (<animate>, <animateTransform>, etc.), mais ces animations sont mises en pause par le navigateur lorsque javascript s’exécute, provoquant des saccades. Les animations CSS de transformation et d’opacité ne sont pas bloquées par JS et évitent ce problème.

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

Comment puis-je remplacer ces points ? Pour moi, il n’apparaît que pour mettre mon logo svg

[Don]

Bonjour

@awesomerobot

Si un SVG statique est utilisé, il apparaît au-dessus de l’animation du point de chargement, sinon si un SVG animé est utilisé, il les remplace :

Donc, il sera remplacé si vous utilisez un SVG animé.

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

J’ai appliqué une animation SVG, mais elle apparaît très petite.

Y a-t-il un moyen de l’agrandir ?

[awesomerobot (Kris)]

Nous n’avons actuellement aucun moyen d’ajouter du CSS personnalisé car cet écran se charge avant une grande partie de l’application et il y a beaucoup plus de contraintes. Pouvez-vous partager l’image SVG que vous utilisez ici (ou me l’envoyer en message privé) ? Je pourrais faire quelques tests et voir si nos paramètres par défaut pourraient être plus accommodants.

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

La voici

[awesomerobot (Kris)]

Merci pour la référence !

J’ajoute un changement qui permettra des dimensions légèrement plus grandes et centrera mieux les écrans avec des logos statiques : UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

J’ai également remarqué que votre SVG présente beaucoup d’espace en haut, ce qui affecte le centrage, je ne sais pas si c’est intentionnel, mais cette version le supprime

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

Merci beaucoup !

[awesomerobot (Kris)]

Veuillez noter qu’il y a un léger changement dans ce que nous autorisons pour l’animation SVG (et j’ai mis à jour l’OP pour refléter cela). À l’origine, nous autorisions les animations SMIL dans les SVG, mais il s’avère qu’elles saccadent car le navigateur met en pause ce type d’animation pendant l’exécution de javascript.

Par conséquent, la recommandation est désormais de n’utiliser que les animations de transformation CSS et d’opacité dans vos SVG, car celles-ci ne sont pas bloquées par le JS.

Si vous regardez le SVG de @ばこん ci-dessus… il fournit un bon exemple d’animation autorisée :

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

Faites également attention à donner des noms uniques à vos animations afin qu’elles n’entrent pas en conflit avec d’autres animations dans Discourse (des noms comme “blink”, “rotate”, “fade”, etc. pourraient être trop génériques). Utiliser un préfixe comme unique- est un excellent moyen d’éviter cela.