Recherche avancée dans l'en-tête

Composant de thème
,
1
:discourse2: Summary Advanced Header Search removes the search icon from the header menu and creates a search bar that is placed in the middle of the header area.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-header-search
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:grey_exclamation:Note

This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.

Features

image
image2120×1900 464 KB

Settings

Name Description
extra search icons Add extra icons to the search bar (for example to trigger an external search).
svg icons

Optionally show external search icons

Use the extra_search_icons to show additional icons in the search bar.

This setting supports the following params:

  • prefix: the prefix to the search URL when clicking the respective icon
  • icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
  • target: optionally set to “_blank” to open the link in its own tab/window by default
  • showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
  • excludeFromCategories: category IDs where the given icon should not be shown

Credits

Thanks to @Johani for the search panel javascript code :+1:


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @lindsey 2025-02-28T14:39:07Z

Check documentPerform check on document:
37 « J'aime »
17

J’ai juste fait une mise à jour du composant, cela fera apparaître l’icône de recherche par défaut sur mobile :

6 « J'aime »
18

Cela fonctionne très bien maintenant.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Merci.

5 « J'aime »
20

Bonjour, tout d’abord, très bon composant de thème. Il fonctionne très bien pour moi.
J’ai une petite suggestion d’amélioration. La barre de recherche ne devrait certainement pas être affichée dans un forum nécessitant une connexion, car elle ne peut pas être utilisée de toute façon.

Bildschirmfoto 2022-07-28 um 17.36.22
Bildschirmfoto 2022-07-28 um 17.36.222232×1698 166 KB

4 « J'aime »
21

Je serais très heureux si quelqu’un pouvait corriger ce bug. Je sais qu’il n’affecte pas grand monde, mais j’adore ce composant de thème et ce problème m’empêche de l’utiliser :cry:

1 « J'aime »
22

Je viens de faire une mise à jour qui masquera la barre de recherche des utilisateurs non connectés lorsqu’une connexion est requise

3 « J'aime »
23

J’ai également ajouté une mise à jour qui utilise les couleurs d’en-tête (couleur principale de l’en-tête et arrière-plan de l’en-tête) pour la saisie

4 « J'aime »
24

Le composant semble désactiver le nouveau basculeur d’en-tête et de barre latérale.

4 « J'aime »
26

Merci d’avoir identifié cela @manuel !

Je viens de publier un correctif :tada:

6 « J'aime »
27

Un autre petit bug que j’ai rencontré : je peux utiliser le raccourci par défaut “/” pour accéder au champ de saisie de recherche. Mais il n’étend pas la liste déroulante affichant les résultats. Je devrais cliquer manuellement dans le champ de saisie pour que cela se produise, ce qui rend le raccourci clavier quelque peu inutile.

1 « J'aime »
28

L’utilisation du composant désactive à nouveau le basculeur en-tête-barre latérale. Je suppose que c’est parce que les paramètres de la barre latérale ont changé.

2 « J'aime »
29

Cela devrait être corrigé avec cette dernière PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

3 « J'aime »
30

@jordan.vidrine Salut, puis-je utiliser ce composant comme en-tête par défaut sur mobile

1 « J'aime »
31

J’avais envisagé cela avant la publication, mais il n’y a pas assez de place dans l’en-tête mobile pour que cela fonctionne correctement.

4 « J'aime »
32

Merci pour ce super composant.

Y a-t-il un moyen de personnaliser la couleur de la bordure de la zone de recherche ?

Screenshot from 2023-03-02 10-13-59

Pour moi, elle est un peu grise, j’aimerais qu’elle soit blanche #FFFFFF.

2 « J'aime »
33

Vous pouvez personnaliser cette couleur en ajoutant du CSS à un composant de thème local si vous en avez créé un pour ajouter du CSS personnalisé.

Si vous ne l’avez pas fait, visitez /admin/customize/themes et cliquez sur composants, puis installer.

Lorsque la fenêtre contextuelle apparaît, sélectionnez Créer un nouveau, puis nommez votre composant. Vous serez redirigé vers la nouvelle page du composant où vous pourrez sélectionner le thème auquel l’appliquer. Vous voudrez l’appliquer au thème installé.

Pour ajouter le CSS, cliquez sur Modifier CSS/HTML et ajoutez le CSS à la page common et enregistrez.

Vous voudrez faire quelque chose comme ceci :

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2 « J'aime »
34

Merci @jordan.vidrine pour ces instructions détaillées.

J’avais récemment appris, avec l’aide d’autres bonnes personnes sur ce forum, à ajouter du CSS personnalisé.

3 « J'aime »
35

Cela pourrait être utile pour des modifications ultérieures :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Cela explique comment trouver quel élément cibler avec CSS.

4 « J'aime »
36

Puis-je supprimer cette ligne et utiliser des requêtes média pour la désactiver jusqu’à 768px sans tout casser ? :slight_smile:

J’aimerais supprimer le bouton (car nous avons des discussions et de la vidéo là-bas) sur tablette et je vois que la barre de recherche s’adapte vraiment bien.

1 « J'aime »
37

Tout va bien, mais dans la version mobile, il faut passer à la recherche standard, car elle est terrible
image
vs
image

1 « J'aime »