Ricerca avanzata nell'intestazione

[Discourse]

	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.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-header-search
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

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

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

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 document

Perform check on document:

[awesomerobot (Kris)]

Ho appena apportato un aggiornamento al componente, questo farà apparire l’icona di ricerca predefinita su mobile:

UX: hide on mobile, show default icon (#7)

[miss]

Ora funziona tutto bene.

@JammyDodger

@awesomerobot

Grazie.

[alanost (Alan)]

Ciao, prima di tutto un ottimo componente del tema. Funziona molto bene per me.
Ho un piccolo suggerimento per migliorarlo. La barra di ricerca certamente non dovrebbe essere visualizzata in un forum che richiede l’accesso, poiché non può essere utilizzata comunque.

[alanost (Alan)]

Sarei molto felice se qualcuno potesse correggere questo bug. So che non riguarda molti, ma amo questo componente tematico e questo problema mi impedisce di usarlo

[awesomerobot (Kris)]

Ho appena apportato un aggiornamento che nasconderà la barra di ricerca agli utenti non registrati quando è richiesto l’accesso

UX: hide from logged out users when relevant

[awesomerobot (Kris)]

Ho anche aggiunto un aggiornamento che utilizza i colori dell’intestazione (primario e sfondo dell’intestazione) per l’input

UX: use header colors for search input, fix button

[manuel (Manuel Kostka)]

Il componente sembra disabilitare il nuovo header-sidebar-toggle.

[keegan (Keegan George)]

Grazie per averlo identificato @manuel!

Ho appena rilasciato una correzione

FIX: Sidebar toggle disappearing (#10)

[manuel (Manuel Kostka)]

Un altro piccolo problema che ho riscontrato: posso usare la scorciatoia predefinita “/” per accedere al campo di immissione della ricerca. Ma non espanderà il menu a discesa che mostra i risultati. Dovrei fare clic manualmente sul campo di immissione affinché ciò accada, il che rende la scorciatoia da tastiera in qualche modo inutile.

[manuel (Manuel Kostka)]

L’utilizzo del componente disabilita nuovamente l’header-sidebar-toggle. Presumo sia perché le impostazioni per la barra laterale sono cambiate.

[jordan.vidrine]

Questo dovrebbe essere risolto con questa ultima PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

[ozkn (Mathx)]

@jordan.vidrine Ciao, posso usare questo componente come predefinito nell’intestazione mobile

[jordan.vidrine]

Ci avevo pensato prima del rilascio, ma non c’è abbastanza spazio nell’intestazione mobile perché funzioni correttamente.

[bquast (Bastiaan Quast)]

Grazie per l’ottimo componente.

C’è un modo per personalizzare il colore del bordo della casella di ricerca?

Per me è un po’ grigio, mi piacerebbe che fosse bianco #FFFFFF

[jordan.vidrine]

Puoi personalizzare questo colore aggiungendo del CSS a un componente tema locale se ne hai creato uno per aggiungere CSS personalizzato.

Se non l’hai fatto, visita /admin/customize/themes e fai clic su componenti, quindi su installa.

Quando appare la finestra modale, seleziona Crea nuovo, quindi assegna un nome al tuo componente. Verrai portato alla nuova pagina del componente dove potrai selezionare il tema a cui applicarlo. Dovrai applicarlo al tema installato.

Per aggiungere il CSS, fai clic su Modifica CSS/HTML e aggiungi il CSS alla pagina comune e salva.

Dovrai fare qualcosa di simile:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}

[bquast (Bastiaan Quast)]

Grazie @jordan.vidrine per le istruzioni dettagliate.

Avevo recentemente imparato con l’aiuto di altre brave persone su questo forum ad aggiungere CSS personalizzato.

[Canapin (Coin-coin le Canapin)]

Questo potrebbe essere di aiuto per ulteriori modifiche
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Spiega come trovare quale elemento prendere di mira con CSS.

[satonotdead]

Posso rimuovere quella riga e usare le media query per disabilitarla fino a 768px senza rompere tutto?

Mi piace rimuovere il pulsante (perché abbiamo chat e video lì) sul tablet e vedo che la casella di ricerca si adatta davvero bene.

[volanar]

Va tutto bene, ma nella versione mobile è necessario passare alla ricerca standard, perché è terribile

vs