Diseño de la pantalla de inicio de Discourse con imágenes SVG personalizadas

[awesomerobot (Kris)]

Esta funcionalidad ha sido muy solicitada aquí en Meta Personal branding for the splash screen .

Ahora hemos añadido la opción de añadir un SVG, ya sea estático o animado, como imagen de la pantalla de bienvenida para reemplazar este indicador predeterminado de puntos de carga:

Si se utiliza un SVG estático, aparece encima de la animación del punto de carga:

de lo contrario, si se utiliza un SVG animado, reemplaza completamente los puntos:

Tenga en cuenta que por razones de rendimiento, los SVG animados solo deben utilizar animaciones de transformación CSS u opacidad. ^[1]
Puede habilitar esta funcionalidad a través de nuestro sistema de Próximos Cambios ( /admin/config/upcoming-changes):

La configuración del sitio splash screen image (imagen de la pantalla de bienvenida) se utiliza para esto. Puede utilizar las variables CSS var(--primary), var(--secondary) y var(--tertiary) dentro de su SVG para hacer referencia a los colores de su tema y adaptarse al modo oscuro.

Es importante señalar que habilitar esta funcionalidad puede tener impactos en su puntuación LCP, por lo que realizar el cambio, esperar un tiempo y comprobar si tiene algún impacto en LCP o en la indexación en la consola de Búsqueda de Google es la mejor manera de probar esto.

---

1. Originalmente intentamos permitir elementos de animación SMIL (\u003canimate\u003e, \u003canimateTransform\u003e, etc.), pero estas animaciones serán pausadas por el navegador cuando se esté ejecutando javascript, causando tartamudeo. Las animaciones CSS de transformación y opacidad no están bloqueadas por JS y evitan este problema. ↩︎

[philh]

hmmmmm Discourse Logo with Throbber

[eisammy (Sammy)]

¿Cómo reemplazo estos puntos? Para mí solo aparecen para poner mi logo svg

[Don]

Hola

@awesomerobot

Si se utiliza un SVG estático, aparece por encima de la animación del punto de carga; de lo contrario, si se utiliza uno animado, los sustituye:

Así que será reemplazado si utilizas un SVG animado.

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

He aplicado una animación SVG, pero aparece muy pequeña.

¿Hay alguna manera de agrandarla?

[awesomerobot (Kris)]

Actualmente no tenemos una forma de añadir CSS personalizado porque esta pantalla se carga antes de gran parte de la aplicación y hay muchas más restricciones. ¿Puedes compartir la imagen SVG que estás utilizando aquí (o enviármela por mensaje privado)? Podría hacer algunas pruebas y ver si nuestros valores predeterminados podrían ser más adecuados.

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

Aquí está

[awesomerobot (Kris)]

¡Gracias por la referencia!

Estoy añadiendo un cambio que permitirá dimensiones ligeramente mayores y centrará mejor las pantallas con logotipos estáticos: UX: better centering and slightly larger experimental splash by awesomerobot · Pull Request #37574 · discourse/discourse · GitHub

También noté que tu SVG tiene mucho espacio en la parte superior, lo que afecta la centralización, no estoy seguro si es intencional, pero esta versión lo elimina

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

¡Muchas gracias!

[awesomerobot (Kris)]

Tenga en cuenta que hay un ligero cambio en lo que estamos permitiendo para la animación SVG (y he actualizado el OP para reflejar esto). Originalmente permitíamos animaciones SMIL en SVG, pero resulta que estas tartamudean porque el navegador pausa este tipo de animación mientras se ejecuta javascript.

Así que, en su lugar, la recomendación es usar solo animaciones de transformación CSS y opacidad en sus SVG, ya que estas no son bloqueadas por JS.

Si echa un vistazo al SVG de @ばこん de arriba… proporciona un buen ejemplo de una animación permitida:

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

Además, tenga cuidado de dar a sus animaciones nombres únicos para que no entren en conflicto con otras animaciones en Discourse (nombres como “blink”, “rotate”, “fade”, etc., podrían ser demasiado genéricos). Usar un prefijo como unique- es una excelente manera de evitar esto.