Bannières de notification

:information_source: Résumé Le composant de thème Notification Banners offre un moyen personnalisable et flexible de partager des messages sur votre site.
:eyeglasses: Aperçu Theme Creator
:hammer_and_wrench: Dépôt
GitHub - gormus/discourse-notification-banners: Helps admins create notification banners in various plugin outlets.
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau sur les thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Le composant de thème Notification Banners offre un moyen personnalisable et flexible de partager des messages sur votre site.

Voici quelques caractéristiques principales :

  • Entièrement personnalisable : Adaptez chaque bannière à vos besoins, y compris le contenu, le style et le comportement.
  • Options d’affichage flexibles : Affichez les bannières empilées ou en carrousel rotatif pour une navigation facile.
  • Messages ciblés : Affichez les bannières uniquement à des groupes d’utilisateurs spécifiques, garantissant une communication personnalisée.
  • Prise en charge des thèmes : Les bannières s’adaptent automatiquement aux thèmes clairs ou sombres, ou vous pouvez définir des couleurs personnalisées.
  • Prise en charge de Markdown : Utilisez Markdown pour formater facilement vos messages de bannière.
  • Carrousel alimenté par Splide : La fonction carrousel est alimentée par la bibliothèque JavaScript Splide, avec des paramètres individuels pour chaque bannière.
  • Planification : Définissez des dates de début et de fin spécifiques pour l’apparition des bannières.
  • Ordre d’affichage facile : Contrôlez l’ordre d’affichage des bannières avec des paramètres simples.

Ce composant facilite l’engagement de votre public avec des notifications visuellement attrayantes, personnalisées et bien organisées.

Installation

  1. Suivez les instructions officielles pour ajouter ce composant de thème à votre thème :
    https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#add-theme-components-to-a-theme-9

  2. Modifiez le paramètre theme authorized extensions pour inclure les extensions de fichiers css et js.

Fonctionnalités

Chaque bannière de notification peut avoir les fonctionnalités suivantes :

  • Titre, facultatif, affiché comme un titre H2 au-dessus du message
  • Message, message de notification simple de 500 caractères. Markdown est pris en charge.
  • Public, sélectionnez les groupes d’utilisateurs comme public pour la notification.
  • Catégories ; sélectionnez les catégories sur lesquelles afficher la bannière. Laissez vide pour afficher sur toutes les catégories.
  • Couleur d’arrière-plan, peut être définie pour différencier la bannière des autres.
  • Point d’insertion du plugin, définissez les notifications au-dessus ou en dessous de l’en-tête du site, ou utilisez le point d’insertion top-notices pour afficher avec les bannières de sujet natives.
  • Afficher dans un carrousel, lorsque sélectionné, toutes les bannières de chaque point d’insertion sont affichées dans un carrousel. Nécessite un minimum de 2 bannières sélectionnées pour tout point d’insertion.
  • Fermable, lorsque sélectionné, les utilisateurs pourront fermer la bannière, et elle leur sera masquée.
  • Dates de début et de fin, lorsqu’elles sont définies, la visibilité de la bannière respecte ces dates. Vous pouvez donc définir une bannière à l’avance, mais elle ne sera visible par le public sélectionné qu’à la date et à l’heure définies ; ou de même, vous pouvez supprimer automatiquement la bannière à la date de fin d’affichage.
  • Ordre d’affichage, définissez quelle bannière doit être affichée en haut, quelle doit être en bas. Depuis la v1.3.0, utilisez les boutons natifs de réorganisation.

Le Carrousel

La fonction de diaporama, ou carrousel, est fournie par la bibliothèque Splide ; elle est sous licence MIT.

Chaque carrousel peut être configuré sur la page du composant de thème en utilisant les options Splide.

Couleurs des bannières

Par défaut, les bannières utiliseront les mêmes couleurs que le sujet de la bannière :

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

Cependant, lorsqu’une couleur d’arrière-plan est définie dans les paramètres de la bannière, en fonction de sa luminosité, le noir ou le blanc est automatiquement sélectionné comme couleur de premier plan.

Classes 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 introduit des changements majeurs (pour certains)

N’oubliez pas de tester les changements et de vérifier vos personnalisations avant de mettre à jour vos sites de production.

28 « J'aime »

Wow ! Cela semble incroyable et super flexible.

Avez-vous envisagé de pouvoir le restreindre à une ou plusieurs catégories ?

9 « J'aime »

Merci !

En fait, j’ai envisagé d’inclure ce que j’avais fait précédemment avec mon composant thématique Filtered Topic Lists ; voir la section « Afficher sur ».

Je craignais que cela ne complique les choses, c’est pourquoi je n’ai pas inclus cette option. J’ai plutôt choisi d’utiliser les groupes d’utilisateurs comme public pour les bannières.

Mais je serais heureux de l’inclure s’il y avait un besoin.

5 « J'aime »

Très bien @gormus, merci de partager ce composant avec la communauté. :discourse: :clap:

3 « J'aime »

Merci @Lilly, c’est un plaisir : )

3 « J'aime »

Lorsque je clique sur le bouton X pour fermer cette bannière contextuelle, existe-t-il un moyen de la faire réapparaître ? J’ai sélectionné dans l’arrière-plan de la bannière repeat : repeat ; repeat-x ; repeat-y mais cela ne fonctionne pas ?

2 « J'aime »

Super ! Je vais l’essayer dans le monde réel et voir si c’est vraiment nécessaire ou non avant de vous importuner à ce sujet.

4 « J'aime »

Actuellement non. Je n’ai pas envisagé qu’un utilisateur souhaite restaurer une notification ignorée.
Pensez-vous qu’il devrait y avoir une option pour cela ?

Pourriez-vous clarifier ce que vous entendez par là ?

2 « J'aime »

Je vois ce que vous voulez dire, merci !

3 « J'aime »

Je serais également intéressé par cette fonctionnalité (disponible pour des catégories spécifiques). Merci d’en tenir compte.

4 « J'aime »

Les catégories sont désormais prises en charge comme public cible. Une ou plusieurs catégories peuvent être sélectionnées par bannière.

N’hésitez pas à me dire ce que vous en pensez : )

5 « J'aime »

Actuellement, ma page Discourse fonctionne avec la version 3.4.0.beta3-dev et présente une erreur qui n’affiche pas la page lors de l’installation de la bannière. Vous pouvez vérifier à nouveau et proposer des mises à jour anticipées pour la communauté. Merci pour votre partage.

2 « J'aime »

Salut @hoangphuctran93,

Merci d’avoir signalé le problème, j’ai pu le confirmer via une installation propre de Notification Banners sur un Discourse 3.4.0.beta3-dev (d3f09f8f61)

Je viens de pousser un correctif, veuillez mettre à jour l’instance sur votre site, effectuez un actualisation forcée de la page si nécessaire.

2 « J'aime »

Merci, ils ont bien fonctionné, j’attends avec impatience vos nouvelles idées et mises à jour. J’ai quelques suggestions comme suit.

  1. Développer la zone de saisie
  2. Permettre la sélection rapide d’images en plus de la conception avec HTML.
  3. Ajouter un champ de données pour nommer la bannière au lieu de l’utiliser avec le titre, cela aide à catégoriser et à gérer lorsque plusieurs bannières sont appliquées.

Ceci est le résultat de l’application sur notre page discourse.

1 « J'aime »

J’ai des problèmes avec cette partie - le lien est cassé ici. Comment puis-je autoriser ces extensions sur mon site ?

Merci !

Vous devez remplacer meta.discourse.org par l’URL de votre forum. Vous ne pouvez pas accéder à la zone d’administration ici.
https://meta.discourse.org/admin/site_settings/category/files?filter=theme%20authorized%20extensions

Vous pouvez également accéder aux paramètres de votre site et rechercher theme authorized extensions

5 « J'aime »

Ah oui, merci :slight_smile:

Une autre question ici : quand vous parlez de planification, y a-t-il un moyen de faire apparaître la bannière à la même heure chaque semaine ? Nous avons des heures de bureau récurrentes chaque semaine pendant lesquelles j’aimerais que cette bannière s’affiche, afin que toute personne sur le site puisse voir que les heures de bureau sont actuellement en cours et y participer si elle le souhaite.

1 « J'aime »

Vous pouvez activer une bannière pour qu’elle commence à s’afficher à une date et une heure définies, et qu’elle soit supprimée à une autre.

Vous ne pouvez donc avoir qu’un seul calendrier pour la date et l’heure de début et de fin.

Ce que vous demandez nécessite une fonctionnalité de planification plus élaborée que celle fournie par les bannières de notification.

Cependant, vous pouvez toujours réaliser ce dont vous avez besoin en créant des copies de la même bannière en utilisant différentes dates de début et de fin.

Je vous recommande vivement de tester ce scénario avant de le mettre en production.

Et rappelez-vous, quel que soit votre fuseau horaire, les valeurs de date et d’heure doivent être saisies en UTC et correspondre au format indiqué dans les descriptions des champs.

4 « J'aime »

Merci pour votre contribution !

J’espérais une solution plus automatisée ici, car nous avons 3 sessions d’heures de bureau différentes par semaine, chaque semaine, donc ce serait beaucoup de travail manuel pour créer des bannières en double pour toutes ces sessions.

J’ai examiné le plugin Automations comme autre option, mais l’automatisation des bannières ne permet également que des actions « ponctuelles » et non « récurrentes ».

2 « J'aime »