Apporter des fonctionnalités populaires à Discourse : recherche dans l'en-tête, bannière de bienvenue et icônes / emojis de catégorie

Nous avons ajouté plusieurs nouvelles fonctionnalités à Discourse basées sur des composants de thème populaires pour faciliter la personnalisation du design de votre communauté. Dans ce sujet, nous vous présenterons ces nouvelles fonctionnalités principales, comment les utiliser et des informations sur la façon dont elles se comparent aux composants de thème qui les ont inspirées.

Recherche dans l’en-tête

La fonctionnalité de recherche dans l’en-tête déplace la recherche de l’icône de loupe en haut à droite vers un champ de saisie plus visible dans l’en-tête du site.

Lorsque plus d’espace est nécessaire dans l’en-tête (par exemple, lors du défilement d’un sujet), la recherche reviendra à l’icône de loupe pour économiser de l’espace.

Pour activer la recherche dans l’en-tête…

  1. Dans la zone d’administration, accédez à Thèmes et composants.
  2. Cliquez sur le bouton Modifier de votre thème actif.
  3. Recherchez le paramètre Expérience de recherche.
  4. Mettez à jour ce paramètre sur « Champ de recherche dans l’en-tête du site ».
  5. Cliquez sur la coche verte pour enregistrer.

Fonctionnalité de recherche dans l’en-tête vs. Composant de recherche avancée dans l’en-tête

La recherche dans l’en-tête a été inspirée par le composant de thème de recherche dans l’en-tête, que nous avons renommé Recherche avancée dans l’en-tête pour le distinguer de la fonctionnalité principale.

Vous devriez utiliser le composant de recherche avancée dans l’en-tête lorsque vous avez besoin de prendre en charge des recherches externes (c’est-à-dire des recherches en dehors de votre communauté Discourse). Sinon, vous pouvez utiliser la fonctionnalité de recherche dans l’en-tête qui fait maintenant partie du cœur de Discourse.

Bannière de bienvenue

La bannière de bienvenue accueille les membres et les visiteurs et ajoute une barre de recherche proéminente à vos listes de sujets.

Les fonctionnalités de bannière de bienvenue et de recherche dans l’en-tête sont compatibles entre elles, de sorte que la recherche dans l’en-tête sera masquée pendant que la bannière de bienvenue est visible.

Pour activer la bannière de bienvenue…

  1. Dans la zone d’administration, accédez à Thèmes et composants.
  2. Cliquez sur le bouton Modifier de votre thème actif.
  3. Recherchez le paramètre Activer la bannière de bienvenue.
  4. Activez ce paramètre.
  5. Cliquez sur la coche verte pour enregistrer.

Pour personnaliser le message affiché sur la bannière, accédez à la zone Textes du site et recherchez « welcome_banner ». Vous pouvez modifier les chaînes de texte pour le message de bienvenue des membres enregistrés, le message de bienvenue des utilisateurs anonymes et le champ de recherche.

Bannière de bienvenue vs. Composant de bannière de recherche avancée

La bannière de bienvenue a été inspirée par le composant de bannière de recherche, que nous avons renommé Bannière de recherche avancée pour le distinguer de la fonctionnalité principale.

Vous devriez utiliser le composant de bannière de recherche avancée lorsque vous souhaitez utiliser des images d’arrière-plan personnalisées pour la bannière, saisir plusieurs lignes de texte dans la bannière ou modifier qui peut voir la bannière (c’est-à-dire les membres connectés, les utilisateurs déconnectés ou les deux). Sinon, vous pouvez utiliser la fonctionnalité de bannière de bienvenue qui fait maintenant partie du cœur de Discourse.

Icônes et émojis de catégorie

Vous pouvez désormais utiliser des icônes et des émojis pour distinguer les catégories, au lieu du carré coloré.

Pour utiliser des icônes / émojis de catégorie…

  1. Lors de la création ou de la modification d’une catégorie, changez le paramètre Style sur Icône ou Emoji.
  2. Choisissez l’icône ou l’emoji que vous souhaitez utiliser. La couleur déterminera la couleur de l’icône (si utilisée) et affectera d’autres zones où une couleur est associée à la catégorie, comme sur la page /categories.
  3. Cliquez sur Enregistrer la catégorie.

Icônes et émojis de catégorie vs. Composant d’icônes de catégorie

Les icônes et émojis de catégorie ont été inspirés par le composant Icônes de catégorie, que nous allons bientôt déprécier au profit de cette fonctionnalité principale car il prend en charge plus de personnalisation (c’est-à-dire les émojis) et offre une expérience de configuration beaucoup plus simple.

Pour ceux qui utilisent actuellement les icônes de catégorie, nous vous recommandons de déplacer vos personnalisations d’icônes des icônes de catégorie vers les paramètres de catégorie principaux pour un support à long terme et des améliorations continues des fonctionnalités. Lors de nos tests, les paramètres du composant remplacent les paramètres de la fonctionnalité principale, mais ceux-ci n’ont pas été conçus pour être utilisés ensemble.

40 « J'aime »

Je voulais passer à la méthode native des icônes de catégorie. Mais j’ai remarqué que le composant de thème a beaucoup plus d’icônes. De toutes les icônes que j’utilisais, seul un petit sous-ensemble fonctionne maintenant avec les icônes de catégorie natives. Je suppose que la différence est que l’un utilise FontAwesome et l’autre des emojis ? J’utilise bien l’option « icônes », mais quand je les recherche, elles n’apparaissent pas (après avoir désactivé le composant de thème pour les icônes de catégorie).

Un exemple de ce que j’utilise maintenant :

2 « J'aime »

Vous pouvez ajouter les icônes manquantes au paramètre de site SVG icon subset.

10 « J'aime »

Comment cela fonctionne-t-il ? :thinking: Cela signifie-t-il que vous pouvez rechercher des sources externes tout en étant dans Discourse ? Ou cela signifie-t-il simplement rechercher Discourse à partir d’une source externe ?

2 « J'aime »

C’est un ajout vraiment génial ! Merci ! Combiné avec les emoji personnalisés, cela ajoute des capacités de personnalisation impressionnantes !

6 « J'aime »

3 messages ont été déplacées vers un nouveau sujet : Bugs dans la création ou la modification de catégories

Il y a toujours une différence, cependant, avec le composant de thème, les sous-catégories obtiennent cette belle touche :

Ceci n’est pas visible avec l’option d’icône de catégorie native. L’icône du haut disparaît alors.

7 « J'aime »

J’utilise des icônes de catégorie pour indiquer si une catégorie est publique, visible par les membres connectés ou limitée à certains groupes. Serait-il possible de reproduire cela avec le nouveau paramètre ? J’aime que les icônes soient grises, mais je ne voudrais pas définir toutes les couleurs de catégorie sur gris.

3 « J'aime »

Je pense que cela sera pris en charge une fois que cette PR sera fusionnée :

Cela devrait être possible avec CSS.
Vous pourriez définir la couleur par défaut pour toutes les icônes, puis, en fonction de la classe .anon (pour les utilisateurs non connectés) et du nom du groupe de l’utilisateur (voir CSS Classes for Current User's Groups), vous pouvez soit masquer l’icône, soit la changer en gris.

Si vous n’utilisez que des icônes et que l’option de connexion est nécessaire, il est également possible de continuer à utiliser le TC.

9 « J'aime »

J’aime ça. Je me demande si nous devrions considérer cela comme un signal de quelque chose qui manque plus fondamentalement, plutôt que de faire peser ce fardeau sur les administrateurs pour qu’ils le résolvent avec des personnalisations.

Également lié : Allow users with access to a restricted category to see who else has access

8 « J'aime »

Salut tout le monde,

Nous avons récemment mis à jour notre forum Discourse (tw.forumosa.com), et avec la dernière mise à jour, le nouveau bandeau « Bienvenue à nouveau » et la barre de recherche intégrée ont été ajoutés à la page d’accueil. Bien que cela semble bien en théorie, nous avons remarqué quelques problèmes d’utilisabilité — surtout sur mobile :

1. Le menu déroulant de recherche peut être illisible en raison de la transparence

Lorsque vous appuyez sur l’icône de recherche dans la barre de navigation supérieure (sur Android, par exemple), le menu déroulant apparaît mais a un fond transparent, ce qui rend presque impossible de lire les résultats de recherche par-dessus le contenu qui se trouve derrière. Un fond uni devrait résoudre ce problème. J’ai posté des captures d’écran de ce que je veux dire ci-dessous.

2. Le bandeau est haut - comment pouvons-nous ajuster l’espacement vertical ?

Le nouveau message de bienvenue et la barre de recherche occupent une grande partie de l’espace d’écran sur mobile. Puisque nous avons déjà l’icône de recherche dans la barre de navigation, la barre de recherche ajoutée semble redondante. Nous aimerions réduire la hauteur de ce bandeau ou masquer complètement la barre de recherche supplémentaire / le message de bienvenue sur les petits écrans.

Cela peut également affecter le bureau, mais c’est particulièrement problématique sur mobile en ce moment.

Quelqu’un a-t-il rencontré ce problème et trouvé un moyen propre de le remplacer via CSS ou des composants de thème ?

Santé !

7 « J'aime »

Il convient de noter que la bannière de mise à jour s’empile également au-dessus :

Il semble que le z-index sur .welcome-banner (actuellement 1) devrait être au moins supérieur ou égal à 3 (le lien principal et les métadonnées utilisent z-index: 2).

10 « J'aime »

J’ai bien peur que ce soit toujours cassé :sad_but_relieved_face:

Vous devez ajouter les icônes dans SVG icon subset, si ce n’est pas déjà fait.

Merci, mais je le fais :

1 « J'aime »

Quelle page est-ce ?

Il semble que les icônes s’affichent comme prévu sur /categories, mais je ne sais pas si c’est parce que vous utilisez toujours le composant du thème ou si les problèmes que vous rencontrez se trouvent sur une autre page que nous devons corriger.

3 « J'aime »

J’ai eu une excellente expérience : j’ai basculé vers le thème Horizon pour mon site personnel, et j’ai défini des icônes pour mes catégories… depuis mon appareil mobile !

C’est incroyable, et j’apprécie les efforts déployés pour rendre l’expérience d’administration aussi fluide.

:smiling_face_with_sunglasses::+1:

6 « J'aime »

2 messages ont été séparés dans un nouveau sujet : Besoin d’aide pour basculer vers les nouvelles icônes de catégorie