Búsqueda avanzada de encabezados

Personalización Componente temático
,
1
:discourse2: Resumen Búsqueda de encabezado avanzada elimina el icono de búsqueda del menú del encabezado y crea una barra de búsqueda que se coloca en el centro del área del encabezado.
:eyeglasses: Vista previa Vista previa en Discourse Theme Creator
:hammer_and_wrench: Enlace al repositorio https://github.com/discourse/discourse-header-search
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de los temas de Discourse

Instalar este componente del tema

:white_exclamation_mark:Nota

Este componente del tema solo es necesario cuando los sitios desean admitir búsquedas externas. De lo contrario, puedes actualizar la configuración Experiencia de búsqueda a Campo de búsqueda en el encabezado del sitio para mover la búsqueda del sitio al encabezado.

Características

image
image2120×1900 464 KB

Configuración

Nombre Descripción
iconos de búsqueda adicionales Agrega iconos adicionales a la barra de búsqueda (por ejemplo, para activar una búsqueda externa).
iconos svg

Mostrar opcionalmente iconos de búsqueda externa

Utiliza extra_search_icons para mostrar iconos adicionales en la barra de búsqueda.

Esta configuración admite los siguientes parámetros:

  • prefix: el prefijo para la URL de búsqueda al hacer clic en el icono respectivo
  • icon: icono a mostrar, del conjunto de Font Awesome (puede ser necesario agregarlo también a la configuración iconos svg)
  • target: opcionalmente establecer en “_blank” para abrir el enlace en su propia pestaña/ventana de forma predeterminada
  • showInCategories: IDs de categoría donde el icono dado debe mostrarse exclusivamente (de forma predeterminada, el icono se muestra en todas partes)
  • excludeFromCategories: IDs de categoría donde el icono dado no debe mostrarse

Créditos

Gracias a @Johani por el código javascript del panel de búsqueda :+1:


:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para usar en nuestros planes Estándar, Empresarial y Corporativo.

37 Me gusta
Edit search header theme css
Top Search bar fully open
Header search in custom header
Search Bar pops up when adding new topic or replying
Fonction recherche dans certaines catégories
Pavilion Header Search Theme Component
🌐 www theme
Search section like on Reddit?
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Separate notifications and account options
Customizing your site with existing theme components
Pavilion Header Search Theme Component
Insert search in custom header
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Fully Theme
Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji
Pavilion Header Search Theme Component
Why is the Sidebar Collapse missing on my site?
Pavilion Header Search Theme Component
Where to find search bar in our settings?
Discourse has slowly been solving a fatigue I didn't realize I had
17

Acabo de hacer una actualización del componente, esto hará que el icono de búsqueda predeterminado aparezca en el móvil:

6 Me gusta
18

Esto funciona bien ahora.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Gracias.

5 Me gusta
20

Hola, en primer lugar, un componente temático realmente bueno. Me funciona muy bien.
Tengo una pequeña sugerencia de mejora. La barra de búsqueda ciertamente no debería mostrarse en un foro que requiere inicio de sesión, ya que de todos modos no se puede usar.

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

4 Me gusta
21

Estaría muy feliz si alguien pudiera solucionar este error. Sé que no afecta a muchos, pero me encanta este componente temático y este problema me impide usarlo :cry:

1 me gusta
22

He acabo de hacer una actualización que ocultará la barra de búsqueda de los usuarios que no han iniciado sesión cuando se requiera el inicio de sesión

3 Me gusta
23

También he añadido una actualización que utiliza los colores del encabezado (primario y de fondo del encabezado) para la entrada

4 Me gusta
24

El componente parece deshabilitar el nuevo header-sidebar-toggle.

4 Me gusta
26

¡Gracias por identificar esto @manuel!

Acabo de lanzar una corrección :tada:

6 Me gusta
27

Otro pequeño error que encontré: puedo usar el atajo predeterminado “/” para ingresar al campo de búsqueda. Pero no expandirá el menú desplegable que muestra los resultados. Necesitaría hacer clic manualmente en el campo de entrada para que eso suceda, lo que hace que el atajo de teclado sea un tanto inútil.

1 me gusta
28

El uso del componente deshabilita nuevamente el interruptor de encabezado y barra lateral. Supongo que se debe a que la configuración de la barra lateral cambió.

3 Me gusta
29

Esto debería solucionarse con esta última PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

3 Me gusta
30

@jordan.vidrine Hola, ¿puedo usar este componente como predeterminado en el encabezado móvil?

1 me gusta
31

Lo había considerado antes de lanzar, pero no hay suficiente espacio en el encabezado móvil para que esto funcione correctamente.

4 Me gusta
32

Gracias por el gran componente.

¿Hay alguna forma de personalizar el color del borde del cuadro de búsqueda?

Captura de pantalla de 2023-03-02 10-13-59

Para mí es como gris, me encantaría que fuera blanco #FFFFFF

2 Me gusta
33

Puedes personalizar este color añadiendo algo de CSS a un componente temático local si has creado uno para añadir CSS personalizado.

Si aún no has hecho esto, visita /admin/customize/themes y haz clic en componentes, luego en instalar.

Cuando aparezca la ventana modal, selecciona Crear Nuevo, luego ponle un nombre a tu componente. Serás llevado a la nueva página del componente donde podrás seleccionar el tema al que aplicarlo. Deberás aplicarlo al tema instalado.

Para añadir el CSS, haz clic en Editar CSS/HTML y añade el CSS a la página common y guarda.

Deberías hacer algo como esto:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2 Me gusta
34

Gracias @jordan.vidrine por las detalladas instrucciones.

Recientemente, con la ayuda de otras buenas personas en este foro, aprendí a agregar CSS personalizado.

3 Me gusta
35

Esto podría ser de ayuda para futuras modificaciones :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Explica cómo encontrar qué elemento apuntar con CSS.

4 Me gusta
36

¿Puedo eliminar esa línea y usar media queries para deshabilitarla hasta los 768px sin romper nada? :slight_smile:

Me gustaría eliminar el botón (porque tenemos chats y video allí) en tabletas y veo que el cuadro de búsqueda encaja muy bien.

1 me gusta
37

Todo está bien, pero en la versión móvil hay que cambiar a la búsqueda estándar, porque se ve terrible
image
vs
image

1 me gusta