Busca avançada de cabeçalho

:discourse2: Resumo Pesquisa Avançada no Cabeçalho remove o ícone de pesquisa do menu do cabeçalho e cria uma barra de pesquisa posicionada no centro da área do cabeçalho.
:eyeglasses: Pré-visualização Pré-visualizar no Discourse Theme Creator
:hammer_and_wrench: Link do Repositório https://github.com/discourse/discourse-header-search
:open_book: Novo em Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

:white_exclamation_mark:Nota

Este componente de tema é necessário apenas quando os sites desejam suportar pesquisas externas. Caso contrário, você pode atualizar a configuração Experiência de pesquisa para Campo de pesquisa no cabeçalho do site para mover a pesquisa do site para o cabeçalho.

Recursos

Configurações

Nome Descrição
ícones de pesquisa extras Adicionar ícones extras à barra de pesquisa (por exemplo, para acionar uma pesquisa externa).
ícones svg

Opcionalmente mostrar ícones de pesquisa externa

Use o extra_search_icons para mostrar ícones adicionais na barra de pesquisa.

Esta configuração suporta os seguintes parâmetros:

  • prefix: o prefixo da URL de pesquisa ao clicar no ícone respectivo
  • icon: ícone a ser exibido, do conjunto Font Awesome (pode ser necessário adicioná-lo também à configuração ícones svg)
  • target: opcionalmente definido como “_blank” para abrir o link em sua própria aba/janela por padrão
  • showInCategories: IDs de categoria onde o ícone dado deve ser mostrado exclusivamente (por padrão, o ícone é mostrado em todos os lugares)
  • excludeFromCategories: IDs de categoria onde o ícone dado não deve ser mostrado

Créditos

Obrigado a @Johani pelo código javascript do painel de pesquisa :+1:


:discourse2: Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e Enterprise.

37 curtidas

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

6 curtidas

Isso funciona bem agora.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Obrigado.

5 curtidas

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.

4 curtidas

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 :cry:

1 curtida

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

3 curtidas

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

4 curtidas

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

4 curtidas

Obrigado por identificar isso, @manuel!

Acabei de publicar uma correção :tada:

6 curtidas

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.

1 curtida

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

3 curtidas

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

3 curtidas

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

1 curtida

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.

4 curtidas

Obrigado pelo ótimo componente.

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

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

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

2 curtidas

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
}
2 curtidas

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

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

3 curtidas

Isso pode ser útil para modificações futuras :slight_smile:
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.

4 curtidas

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

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.

1 curtida

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

1 curtida