Llevando funciones populares a Discourse: búsqueda en encabezado, banner de bienvenida e íconos / emoji de categorías

Hemos agregado varias funciones nuevas a Discourse basadas en componentes de temas populares para facilitar la personalización del diseño de tu comunidad. En este tema, compartiremos más sobre estas nuevas funciones principales, cómo usarlas y proporcionaremos información sobre cómo se comparan con los componentes de temas que las inspiraron.

Búsqueda en la cabecera

La función de búsqueda en la cabecera mueve la búsqueda del icono de lupa en la esquina superior derecha a un campo de entrada más prominente en la cabecera del sitio.

Cuando se necesita más espacio en la cabecera (como al desplazarse por un tema), la búsqueda volverá al icono de lupa para ahorrar espacio.

Para activar la búsqueda en la cabecera…

  1. En el área de administración, ve a Temas y componentes.
  2. Haz clic en el botón Editar de tu tema activo.
  3. Busca la configuración Experiencia de búsqueda.
  4. Actualiza esta configuración a “Campo de búsqueda en la cabecera del sitio”.
  5. Haz clic en la marca verde para guardar.

Función de búsqueda en la cabecera vs. componente Búsqueda Avanzada en Cabecera

La búsqueda en la cabecera se inspiró en el componente de tema Búsqueda en Cabecera, que hemos renombrado a Búsqueda Avanzada en Cabecera para distinguirlo de la función principal.

Deberías usar el componente Búsqueda Avanzada en Cabecera cuando necesites admitir búsquedas externas (es decir, búsquedas fuera de tu comunidad de Discourse). De lo contrario, puedes usar la función de búsqueda en la cabecera que ahora forma parte del núcleo de Discourse.

Banner de bienvenida

El banner de bienvenida saluda a los miembros y visitantes y agrega una barra de búsqueda prominente a tus listas de temas.

El banner de bienvenida y las funciones de búsqueda en la cabecera son compatibles entre sí, de modo que la búsqueda en la cabecera se ocultará mientras el banner de bienvenida esté visible.

Para activar el banner de bienvenida…

  1. En el área de administración, ve a Temas y componentes.
  2. Haz clic en el botón Editar de tu tema activo.
  3. Busca la configuración Habilitar banner de bienvenida.
  4. Habilita esta configuración.
  5. Haz clic en la marca verde para guardar.

Para personalizar el mensaje que se muestra en el banner, ve al área de Textos del sitio y busca “welcome_banner”. Puedes modificar las cadenas de texto para el saludo del miembro registrado, el saludo del usuario anónimo y el campo de búsqueda.

Banner de bienvenida vs. componente Banner de Búsqueda Avanzada

El banner de bienvenida se inspiró en el componente Banner de Búsqueda, que hemos renombrado a Banner de Búsqueda Avanzada para distinguirlo de la función principal.

Deberías usar el componente Banner de Búsqueda Avanzada cuando quieras usar imágenes de fondo personalizadas para el banner, ingresar varias líneas de texto en el banner o cambiar quién puede ver el banner (es decir, miembros conectados, usuarios desconectados o ambos). De lo contrario, puedes usar la función de banner de bienvenida que ahora forma parte del núcleo de Discourse.

Iconos y emojis de categorías

Ahora puedes usar iconos y emojis para distinguir las categorías, en lugar del cuadrado de color.

Para usar iconos / emojis de categoría…

  1. Al crear o editar una categoría, cambia la configuración Estilo a Icono o Emoji.
  2. Elige el icono o emoji que deseas usar. El color determinará el color del icono (si se usa) e impactará otras áreas donde un color está asociado con la categoría, como en la página /categories.
  3. Haz clic en Guardar Categoría.

Iconos y emojis de categoría vs. componente Iconos de Categoría

Los iconos y emojis de categoría se inspiraron en el componente Iconos de Categoría, que pronto dejaremos de usar en favor de esta función principal porque admite más personalización (es decir, emojis) y ofrece una experiencia de configuración mucho más sencilla.

Para aquellos que actualmente usan Iconos de Categoría, recomendamos migrar las personalizaciones de iconos de Iconos de Categoría a la configuración de categoría principal para obtener soporte a largo plazo y mejoras continuas de funciones. En nuestras pruebas, la configuración del componente anula la configuración de la función principal, pero no fueron diseñados para usarse juntos.

40 Me gusta

Quería pasar al método de iconos de categoría nativos. Pero me doy cuenta de que el componente temático tiene muchos más iconos. De todos los iconos que usé, solo un pequeño subconjunto funciona ahora con los iconos de categoría nativos. Supongo que la diferencia es que uno usa FontAwesome y el otro emojis. Uso la opción “iconos”, pero cuando los busco, no aparecen (después de deshabilitar el componente temático para los iconos de categoría).

Un ejemplo de lo que uso ahora:

2 Me gusta

Puedes agregar los íconos faltantes en la configuración del sitio Subconjunto de iconos SVG.

¡La imagen muestra una interfaz de usuario para crear un subconjunto de iconos SVG con un panel que muestra las opciones “face-smile, mod-crown, grip-vertical, life-ring” con casillas de verificación para la selección. (Etiquetado por IA)|690x152

10 Me gusta

¿Cómo funciona esto? :thinking: ¿Significa esto que puedes buscar fuentes externas mientras estás en Discourse? ¿O solo significa buscar en Discourse desde una fuente externa?

2 Me gusta

¡Esta es una adición bastante impresionante! ¡Gracias! ¡Combinado con emojis personalizados, añade impresionantes capacidades de personalización!

6 Me gusta

3 publicaciones se dividieron en un nuevo tema: Errores al crear o editar categorías

Sin embargo, todavía hay una diferencia, con el componente de tema, las subcategorías obtienen este bonito detalle:

Esto no es visible con la opción de icono de categoría nativa. El icono superior desaparece entonces.

7 Me gusta

Utilizo iconos de categoría para indicar si una categoría es pública, visible para los miembros que han iniciado sesión o limitada a ciertos grupos. ¿Sería posible replicar esto con la nueva configuración? Me gusta que los iconos sean grises, pero no querría establecer todos los colores de las categorías en gris.

3 Me gusta

Creo que esto será compatible una vez que se fusione esta PR:

Debería ser posible con CSS.
Podrías establecer el color predeterminado para todos los iconos y luego, basándote en la clase .anon (para usuarios no registrados) y el nombre del grupo del usuario (ver CSS Classes for Current User's Groups), puedes ocultar el icono o cambiarlo a gris.

Si solo usas iconos y necesitas la opción de usuario registrado, también está bien seguir usando el TC.

9 Me gusta

Me gusta esto. Me pregunto si deberíamos considerar esto como una señal de que falta algo más fundamental, en lugar de trasladar esta carga a los administradores para que la resuelvan con personalizaciones.

También relacionado: Allow users with access to a restricted category to see who else has access

8 Me gusta

Hola a todos,

Recientemente actualizamos nuestro foro de Discourse (tw.forumosa.com) y, con la última actualización, se agregaron el nuevo encabezado “Bienvenido de nuevo” y la barra de búsqueda integrada a la página de inicio. Si bien conceptualmente se ve bien, hemos notado algunos problemas de usabilidad, especialmente en dispositivos móviles:

1. El menú desplegable de búsqueda puede ser ilegible debido a la transparencia

Al tocar el ícono de búsqueda en la barra de navegación superior (en Android, por ejemplo), aparece el menú desplegable pero tiene un fondo transparente, lo que hace casi imposible leer los resultados de la búsqueda sobre el contenido que hay detrás. Un fondo sólido debería solucionar esto. He publicado capturas de pantalla de lo que quiero decir a continuación.

2. El encabezado es alto: ¿cómo podemos ajustar el espaciado vertical?

El nuevo mensaje de bienvenida y la barra de búsqueda ocupan una gran parte del espacio de la pantalla en dispositivos móviles. Dado que ya tenemos el ícono de búsqueda en la barra de navegación, la barra de búsqueda adicional se siente redundante. Nos gustaría reducir la altura de este encabezado u ocultar la barra de búsqueda adicional / mensaje de bienvenida por completo en pantallas más pequeñas.

Esto puede afectar también a los ordenadores de escritorio, pero es especialmente problemático en dispositivos móviles en este momento.

¿Alguien se ha encontrado con esto y ha encontrado una forma limpia de anularlo a través de CSS o componentes temáticos?

¡Saludos!

7 Me gusta

Cabe señalar que el banner de actualización también se apila arriba:

Parece que el z-index en .welcome-banner (actualmente 1) debería ser al menos >= 3. (el enlace principal y los metadatos usan z-index: 2)

10 Me gusta

Me temo que todavía está roto :sad_but_relieved_face:

Necesitas añadir los iconos en SVG icon subset, si aún no lo has hecho.

Gracias, pero sí:\n\n

\n\n

1 me gusta

¿Qué página es esta?

Parece que los íconos se muestran como se espera en /categories, pero no estoy seguro de si eso se debe a que aún estás usando el componente de tema o si los problemas que estás experimentando están en otra página que necesitamos arreglar.

3 Me gusta

Tuve una gran experiencia: ¡cambié al tema Horizon para mi sitio personal y establecí iconos para mis categorías… desde mi dispositivo móvil!

Eso es increíble y aprecio los esfuerzos que se están haciendo para que la experiencia de administración sea tan fluida.

:cara_sonriente_con_gafas_de_sol::pulgar_hacia_arriba:

6 Me gusta

Se dividieron 2 publicaciones en un nuevo tema: Necesito ayuda para cambiar a los nuevos iconos de categoría