Busca avançada de cabeçalho

[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)]

Acabei de fazer uma atualização no componente, isso fará com que o ícone de pesquisa padrão apareça no celular:

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

[miss]

Isso funciona bem agora.

@JammyDodger

@awesomerobot

Obrigado.

[alanost (Alan)]

Olá, antes de mais nada, um ótimo componente de tema. Funciona muito bem para mim.
Tenho uma pequena sugestão de melhoria. A barra de pesquisa certamente não deve ser exibida em um fórum que requer login, pois de qualquer forma não pode ser usada.

[alanost (Alan)]

Eu ficaria muito feliz se alguém pudesse corrigir este bug. Sei que não afeta muitos, mas adoro este componente de tema e este problema me impede de usá-lo

[awesomerobot (Kris)]

Acabei de fazer uma atualização que ocultará a barra de pesquisa de usuários deslogados quando o login for necessário

UX: hide from logged out users when relevant

[awesomerobot (Kris)]

Também adicionei uma atualização que usa as cores do cabeçalho (primária do cabeçalho e fundo do cabeçalho) para a entrada

UX: use header colors for search input, fix button

[manuel (Manuel Kostka)]

O componente parece desabilitar o novo header-sidebar-toggle.

[keegan (Keegan George)]

Obrigado por identificar isso, @manuel!

Acabei de publicar uma correção

FIX: Sidebar toggle disappearing (#10)

[manuel (Manuel Kostka)]

Outro pequeno problema que encontrei: posso usar o atalho padrão “/” para entrar no campo de pesquisa. Mas ele não expandirá o menu suspenso mostrando os resultados. Eu precisaria clicar manualmente no campo de entrada para que isso acontecesse, o que torna o atalho de teclado meio inútil.

[manuel (Manuel Kostka)]

Usar o componente desabilita o header-sidebar-toggle novamente. Acho que é porque as configurações da barra lateral mudaram.

[jordan.vidrine]

Isso deve ser corrigido com este último PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

[ozkn (Mathx)]

@jordan.vidrine Oi, posso usar este componente como padrão no cabeçalho móvel

[jordan.vidrine]

Eu tinha considerado isso antes de lançar, mas não há espaço suficiente no cabeçalho móvel para que isso funcione corretamente.

[bquast (Bastiaan Quast)]

Obrigado pelo ótimo componente.

Existe alguma maneira de personalizar a cor da borda da caixa de pesquisa?

Para mim, é meio cinza, eu adoraria que fosse branco #FFFFFF

[jordan.vidrine]

Você pode personalizar essa cor adicionando algum CSS a um componente de tema local, se você tiver um que criou para adicionar CSS personalizado.

Se você ainda não fez isso, visite /admin/customize/themes e clique em componentes, depois instalar.

Quando a janela pop-up aparecer, selecione Criar Novo, em seguida, nomeie seu componente. Você será levado para a nova página do componente onde poderá selecionar o tema ao qual aplicá-lo. Você vai querer aplicá-lo ao tema instalado.

Para adicionar o CSS, clique em Editar CSS/HTML e adicione o CSS à página common e salve.

Você vai querer fazer algo assim:

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

[bquast (Bastiaan Quast)]

Obrigado @jordan.vidrine pelas instruções detalhadas.

Recentemente, aprendi com a ajuda de outras boas pessoas neste fórum a adicionar CSS personalizado.

[Canapin (Coin-coin le Canapin)]

Isso pode ser útil para modificações futuras
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Explica como encontrar qual elemento usar como alvo com CSS.

[satonotdead]

Posso remover essa linha e usar media queries para desativá-la até 768px sem quebrar tudo?

Gosto de remover o botão (porque temos chats e vídeo lá) em tablets e vejo que a caixa de pesquisa se encaixa muito bem.

[volanar]

Está tudo bem, mas na versão mobile é preciso mudar para a busca padrão, pois ela está horrível

vs