Bannière de recherche avancée

[Discourse]

Ce composant de thème est obsolète et ne doit plus être utilisé. Ses fonctionnalités font désormais partie du noyau de Discourse — consultez notre documentation pour plus de détails sur la configuration d’une bannière de bienvenue :

→ https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1

	Résumé	Advanced Search Banner place une barre de recherche avec un titre et un sous-titre facultatifs dans une bannière au-dessus de la navigation principale de la liste des sujets.
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien du dépôt	https://github.com/discourse/discourse-search-banner
	Nouveau dans les thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Puisqu’il s’agit d’un composant de thème #officiel maintenu par l’équipe Discourse, les demandes de Support, Bug, UX et Feature peuvent être faites dans les catégories respectives ici sur Meta, et étiquetées avec le tag de composant de thème approprié. Cliquez sur un lien ci-dessous pour en créer une.

Support Bug UX Feature

Fonctionnalités

Par défaut, cette bannière apparaît sur toutes les pages de sujets de niveau supérieur (latest/new/unread/top/categories… tout ce qui se trouve dans le paramètre du site top menu), mais elle peut également être configurée pour n’apparaître que sur la page d’accueil d’une communauté.

Paramètres

Nom	Description
show on	Détermine sur quelles pages la bannière apparaît
plugin outlet	Où sur la page la bannière apparaîtra
background image light	Image d’arrière-plan pour la bannière sur les palettes de couleurs claires
background image dark	Image d’arrière-plan pour la bannière sur les palettes de couleurs sombres
tile background image	Répéter l’image d’arrière-plan
show for	Qui peut voir la bannière de recherche (connecté, déconnecté, ou les deux)
special style	Variations optionnelles qui modifient l’apparence de la bannière de recherche

Traduction	Défaut
search_banner.headline	Bienvenue dans notre communauté
search_banner.subhead	Nous sommes heureux de vous accueillir. Si vous avez besoin d’aide, veuillez effectuer une recherche avant de publier.
search_banner.search_button_text

Pour omettre l’affichage d’un élément, laissez le champ vide.

Stylisation personnalisée

L’élément HTML reçoit une classe nommée .display-search-banner partout où cette bannière apparaît, et la bannière elle-même est enveloppée par la classe .custom-search-banner, donc avec un peu de CSS, vous devriez être en mesure de personnaliser l’apparence de cette bannière comme vous le souhaitez.

Améliorations futures

• Ajouter une option pour activer la bannière dans des catégories spécifiques

Crédits

Ceci emprunte très largement à @angus’ https://meta.discourse.org/t/header-search-theme/67959

Hébergé par nous ? Les composants de thème sont disponibles à l’utilisation sur nos plans Standard, Business et Enterprise.

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

Je viens de faire une petite mise à jour qui ajoute un style optionnel à ce composant, il vous donne une grande barre de recherche sans texte de titre :

Cela peut être activé par un nouveau paramètre « style spécial ». Tout cela fait est d’activer un peu de CSS supplémentaire.

Je pourrais ajouter d’autres options ici à l’avenir !

[AndyBr (Andy)]

Comment puis-je changer la couleur du texte de bienvenue dans ce module complémentaire ?

[Arkshine]

Il n’y a pas de paramètre pour cela. Cependant, vous pouvez l’ajouter avec un peu de CSS :

Ajoutez ce qui suit à votre thème ou à un nouveau composant de thème, et modifiez-le comme vous le souhaitez.

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

Merci beaucoup !

[RBoy]

Existe-t-il un moyen de masquer l’icône de recherche (en utilisant CSS ou autrement) ? J’ai un problème où l’icône de recherche est dupliquée lorsqu’elle est utilisée conjointement avec ce composant : Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

ne devrait afficher qu’une seule icône de recherche. Je dois dire cependant que l’utilisation simultanée de la bannière de recherche et de la recherche dans l’en-tête a des effets secondaires négatifs sur l’expérience utilisateur.

Je recommanderais de n’en utiliser qu’une seule.

[RBoy]

Merci ! Très utile

@isaac

Je dirai cependant que l’utilisation de la bannière de recherche et de la recherche dans l’en-tête de manière tangentielle a des effets secondaires négatifs sur l’UX.

Pourriez-vous préciser quels effets secondaires sur l’UX ?

[isaac (Isaac Janzen)]

La vidéo que j’ai liée ci-dessus montre quelques-uns des problèmes

• listes déroulantes de recherche qui se chevauchent
• états ouverts et fermés étranges des listes déroulantes de recherche
• l’icône de recherche est un lien vers la recherche avancée dans une zone de saisie de recherche et pas dans l’autre
• etc.

[RBoy]

Compris. Tant qu’ils ne sont pas sur la même page, tout devrait aller bien.

[مباركمبارك (مبارك)]

Quelqu’un peut-il m’aider ? J’ai installé ce thème sur mon Discourse mais l’image est coupée sur le côté droit. Pour que l’image s’affiche complètement, je dois définir la police du site sur « Plus petite ». J’ai deux installations différentes de Discourse et dans l’une d’elles, l’image fonctionnait normalement, dans l’autre, pourquoi l’image est-elle coupée ?

[awesomerobot (Kris)]

pouvez-vous inclure une capture d’écran ? cela facilitera grandement la compréhension du problème

[ecki (Bernd)]

J’ai le même problème : différents navigateurs/modes affichent différentes parties de cette image. Je l’ai résolu en la rendant très large, de sorte que le côté droit n’apparaît que dans certaines conditions. Mais ce n’est pas si facile pour les images symétriques. Je suppose que quelques CSS supplémentaires (sans chercher à remplacer un composant d’accueil) aideraient.

[مباركمبارك (مبارك)]

J’ai réussi à résoudre une partie du problème, j’ai désactivé le composant de thème dans les autres thèmes et je l’ai laissé uniquement sur 1, aussi incroyable que cela puisse paraître, l’image était « normale » avec la taille de police sur « normale » uniquement à cause du téléphone portable où un seul côté de l’image apparaît, y a-t-il quelque chose que je puisse faire pour qu’elle apparaisse complètement sur mon téléphone portable aussi ?

[Surbhi_Pal1 (Surbhi)]

Salut,

Y a-t-il un moyen de supprimer l’espace entre la bannière de recherche et l’en-tête ?

[Arkshine]

Salut, vous pouvez utiliser ce CSS dans un nouveau composant de thème :

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

Ça a parfaitement fonctionné, merci !

[PT_LB (Paul)]

Il semble que Discourse ait le même problème que dans ma communauté, la superposition met du temps à couvrir ce qui se trouve sous le fond de recherche (Discover) :

C’est plus prononcé dans ma communauté :

Je me demande si quelqu’un a trouvé une solution à cela, potentiellement un délai pour afficher la superposition ? Cela pourrait entraîner une mauvaise expérience.