Banners de notificación

:information_source: Resumen El componente temático Notification Banners proporciona una forma personalizable y flexible de compartir mensajes en tu sitio.
:eyeglasses: Vista previa Theme Creator
:hammer_and_wrench: Repositorio GitHub - gormus/discourse-notification-banners: Helps admins create notification banners in various plugin outlets.
:question: Guía de instalación Cómo instalar un tema o componente temático
:open_book: ¿Nuevo en Temas de Discourse? Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente temático

El componente temático Notification Banners proporciona una forma personalizable y flexible de compartir mensajes en tu sitio.

Aquí tienes algunas características clave:

  • Totalmente personalizable: Adapta cada banner para que se ajuste a tus necesidades, incluyendo contenido, estilo y comportamiento.
  • Opciones de visualización flexibles: Muestra los banners apilados o como un carrusel giratorio para facilitar la navegación.
  • Mensajes dirigidos: Muestra los banners solo a grupos de usuarios específicos, garantizando una comunicación personalizada.
  • Soporte de temas: Los banners se ajustan automáticamente a los temas claro u oscuro, o puedes establecer colores personalizados.
  • Soporte de Markdown: Utiliza Markdown para formatear fácilmente tus mensajes de banner.
  • Carrusel impulsado por Splide: La función de carrusel está impulsada por la biblioteca de JavaScript Splide, con ajustes individuales para cada banner.
  • Programación: Establece fechas de inicio y fin específicas para cuándo deben aparecer los banners.
  • Orden de visualización sencillo: Controla el orden en que se muestran los banners con ajustes sencillos.

Este componente facilita la interacción con tu audiencia mediante notificaciones visualmente atractivas, personalizadas y bien organizadas.

Instalación

  1. Sigue las instrucciones oficiales para añadir este componente temático a tu tema:
    Beginner's guide to using Discourse Themes

  2. Cambia la configuración de extensiones autorizadas de temas para incluir las extensiones de archivo css y js.

Características

Cada banner de notificación puede tener las siguientes características:

  • Título, opcional, se muestra como un encabezado H2 encima del mensaje
  • Mensaje, mensaje de notificación simple de 500 caracteres. Se admite Markdown.
  • Audiencia, selecciona los grupos de usuarios como audiencia para la notificación.
  • Categorías; selecciona las categorías en las que se mostrará el banner. Deja vacío para mostrar en todas las categorías.
  • Color de fondo, se puede establecer para diferenciar el banner de otros.
  • Salida de plugin, establece las notificaciones encima o debajo de la cabecera del sitio, o utiliza la salida de notificaciones superiores para mostrarlas junto con los banners de temas nativos.
  • Mostrar en un carrusel, cuando se selecciona, todos los banners en cada salida se muestran en un carrusel. Requiere un mínimo de 2 banners seleccionados para cualquier salida.
  • Descartable, cuando se selecciona, los usuarios podrán descartar el banner, y se ocultará para ellos.
  • Fechas de inicio y fin, cuando se definen, la visibilidad del banner obedece a estas fechas. Así, puedes configurar un banner con antelación, pero solo será visible para la audiencia seleccionada en la fecha y hora establecidas; o de forma similar, puedes eliminar automáticamente el banner por la fecha de última visualización.
  • Orden de visualización, define qué banner se mostrará arriba y cuál abajo. A partir de la v1.3.0, se utilizan los botones nativos de reordenación.

El Carrusel

La funcionalidad de presentación de diapositivas, o carrusel, la proporciona la biblioteca Splide; tiene licencia MIT.

Cada carrusel se puede configurar en la página del componente temático utilizando las opciones de Splide.

Colores de los Banners

Por defecto, los banners utilizarán los mismos colores que el banner-tema:

.notification-banner {
    background: var(--tertiary-low);
    color: var(--primary);
}

Sin embargo, cuando se define un color de fondo en la configuración del banner, dependiendo de su luminosidad, se selecciona automáticamente blanco o negro como color de primer plano.

Clases CSS Disponibles

.notification-banners--above-site-header,
.notification-banners--below-site-header,
.notification-banners--top-notices {

  .notification-banner {

    &__wrapper {
    }

    &__close {
    }

    &__header {
    }

    &__content {
    }
  }

  &.splide {
    .notification-banner {
    }
  }
}

.notification-banners--top-notices {
  .notification-banner {

    &__content {
    }
  }
}

La v1.3.0 tiene cambios disruptivos (para algunos)

No olvides probar los cambios y revisar tus personalizaciones antes de actualizar tus sitios de producción.

28 Me gusta

¡Guau! Esto se ve increíble y súper flexible.

¿Has considerado poder restringirlo a una categoría / categorías?

9 Me gusta

¡Gracias!

En realidad, consideré incluir lo que hice anteriormente con mi componente temático Filtered Topic Lists; consulta la sección “Show on”.

Me preocupaba que pudiera complicarlo más, por eso no incluí esa opción. En cambio, opté por usar los grupos de usuarios como audiencia para los banners.

Pero estaría feliz de incluirlo si hubiera una necesidad para ello.

5 Me gusta

Muy bien @gormus, gracias por compartir este componente con la comunidad. :discourse: :clap:

3 Me gusta

Gracias @Lilly es un placer : )

3 Me gusta

Cuando hago clic en el botón X para cerrar este banner emergente, ¿hay alguna forma de que vuelva a aparecer? Seleccioné en el fondo del banner repeat: repeat; repeat-x; repeat-y pero no funciona.

2 Me gusta

¡Genial! Lo probaré en el mundo real y veré si es realmente necesario o no antes de molestarte al respecto.

4 Me gusta

Actualmente no. No consideré que algún usuario quisiera restaurar una notificación descartada.
¿Crees que debería haber una opción para ello?

¿Podrías aclarar a qué te refieres?

2 Me gusta

¡Veo lo que quieres decir, gracias!

3 Me gusta

También estaría interesado en esta función (disponible para categorías específicas). Gracias por considerarlo.

4 Me gusta

Las categorías ahora son compatibles como audiencia de destino. Se pueden seleccionar categorías únicas o múltiples por banner.

Por favor, hazme saber qué piensas : )

5 Me gusta

Actualmente mi página de Discourse está ejecutando la versión 3.4.0.beta3-dev y tiene un error que no muestra la página al instalar el banner. Puede volver a comprobarlo y tener actualizaciones tempranas para la comunidad. Gracias por compartir.

2 Me gusta

Hola @hoangphuctran93,

Gracias por informar del problema, pude confirmarlo mediante una instalación limpia de Notification Banners en un Discourse 3.4.0.beta3-dev (d3f09f8f61)

Acabo de enviar una corrección, por favor actualiza la instancia en tu sitio, actualiza la página en caché si es necesario.

2 Me gusta

Gracias, funcionaron bien, espero sus nuevas ideas y actualizaciones. Tengo algunas sugerencias:

  1. Ampliar el cuadro de entrada
  2. Permitir la selección rápida de imágenes además de diseñar con HTML.
  3. Añadir un campo de datos para nombrar el banner en lugar de usarlo con el título, esto ayuda a categorizar y gestionar cuando se aplican varios banners.

Este es el resultado de la aplicación en nuestra página de discourse.

1 me gusta

Tengo problemas con esta parte: el enlace está roto aquí. ¿Cómo puedo autorizar esas extensiones en mi sitio?

¡Gracias!

Debes reemplazar meta.discourse.org con la URL de tu foro. No puedes acceder al área de administración aquí.
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

O puedes navegar a la configuración de tu sitio y buscar theme authorized extensions

5 Me gusta

Ah sí, gracias :slight_smile:

Otra pregunta: cuando dices programar, ¿hay alguna forma de que el banner aparezca a la misma hora todas las semanas? Tenemos horarios de oficina recurrentes semanales durante los cuales me gustaría que se mostrara este banner, para que cualquiera en el sitio pueda ver que el horario de oficina está sucediendo actualmente y unirse si lo desea.

1 me gusta

Puede habilitar un banner para que comience a mostrarse en una fecha y hora definidas, y se elimine en otra.

Por lo tanto, solo puede tener una programación para la fecha y hora de inicio y finalización.

Lo que solicita requiere una función de programación más elaborada que los Banners de Notificación no proporcionan.

Sin embargo, aún puede lograr lo que necesita creando copias del mismo banner utilizando diferentes fechas de inicio y finalización.

Le recomiendo encarecidamente que pruebe este escenario antes de publicarlo en producción.

Y recuerde, independientemente de la zona horaria en la que se encuentre, los valores de fecha y hora deben ingresarse en UTC y deben coincidir con el formato que se ve en las descripciones de los campos.

4 Me gusta

¡Gracias por tu aporte!

Esperaba una solución más automatizada, ya que tenemos 3 sesiones de horario de oficina diferentes a la semana, cada semana, por lo que sería bastante trabajo manual crear banners duplicados para todas estas sesiones.

Miré el plugin de Automatizaciones como otra opción, pero la automatización de banners también solo permite acciones “en un momento dado” y no “recurrentes”.

2 Me gusta