¿Cómo puedo replicar los enlaces del banner meta?

¿Cómo puedo crear 4 botones: Personalizar, Guía, Temas populares, Nuestro alojamiento?

2 Me gusta

En el componente temático Search Banner, hay dos puntos de conexión de complementos (plugin outlets) a los que puede apuntar para contenido personalizado en un componente personalizado separado que puede crear.

4 Me gusta

¿Qué es search_banner.search_button_text
¿Cómo puedo crear un botón igual a la foto?

¡Gracias! No pude encontrar la opción para insertar este código en personalización.
¿Me puedes guiar, por favor? :pray:

Crearé un componente de tema. :+1:

8 Me gusta

Bueno, está bien, Don. Se trata de aprender y compartir. Creo que sería una buena idea informar nuestra intención desde el principio, la próxima vez. Gracias por compartir. :+1:

De hecho, he estado trabajando en ello desde ayer[1]. Hice algo similar, pero aún no lo he publicado. Quiero añadir más opciones de personalización, como la capacidad de elegir entre emojis, iconos de Font Awesome o URLs de imágenes, pero también CSS por botón, renderizado condicional y cosas así. Para ello, he estado explorando y probando mucho el formato de esquema JSON (y es un dolor de cabeza, como nota al margen, este PR para mejorar el estilo será increíble). Publicaré silenciosamente mi versión en Github más tarde.


  1. ↩︎

9 Me gusta

¿Has tenido algún éxito? He intentado construir uno, pero me he atascado.

3 Me gusta

Hola @Arkshine, ¿tienes alguna actualización sobre este componente? Me sería de gran ayuda :innocent:

2 Me gusta

Lo olvidé por completo, lo siento. :smile:

Desafortunadamente, el formato del esquema JSON para la configuración pronto quedará obsoleto, por lo que lo que originalmente quería hacer ya no funcionará (y la personalización con él era demasiado complicada, para ser honesto).

Quería publicar la versión de Don pero no encuentro su repositorio. :thinking:

Veré qué puedo hacer para publicar una versión funcional lo antes posible. :+1:

3 Me gusta

¡Muchas gracias! :pray:t2:

2 Me gusta

@Helga_Razinkova

¿Puedes intentarlo? Crédito a @Don y @manuel – Tomé algunas de sus ideas.

Requiere una versión reciente de Discourse (3.3) ya que se basa en el nuevo Objects type for theme setting.

Algunas imágenes

Configuración general:

Configuración de enlaces:

El aspecto predeterminado – utiliza el color del tema.
image

El botón se puede estilizar por separado:
image

Avísame si necesitas configuraciones específicas.
Podría necesitar algunos ajustes para dispositivos móviles. Por defecto, los botones se envuelven y se muestran en una columna en dispositivos móviles. Espero cualquier comentario.

Si todo está bien, lo lanzaré más tarde. :+1:

7 Me gusta

@Arkshine Lamento mucho la demora, acabo de tener tiempo para esta idea :slight_smile:

Pude agregar los botones, ¡muchas gracias por este plugin! El único desafío ahora es colocar los botones justo después de la barra de búsqueda, pero espero que encontremos una solución.

Una pregunta: ¿es posible hacer que el campo Emoji sea opcional en lugar de obligatorio?

¡Gracias una vez más!

2 Me gusta

Oye, ¡gracias por probar el componente!

Lo he actualizado para que el emoji sea opcional. :+1:

¿Quieres decir que estás usando el componente Banner Search y quieres que el botón aparezca debajo?
Si es así, en la configuración de plugin outlets, puedes establecerlo en below-site-header.
Sin embargo, es posible que necesites ajustar el espaciado con algo de CSS.

Avísame si necesitas ayuda adicional. :slight_smile:

1 me gusta

Hola, creo que Helga está buscando este plugin outlet. :slightly_smiling_face:

4 Me gusta

¡De hecho!

Por alguna razón, asumí que el componente Plugin Outlet los mostraría (olvidé cómo el componente los genera). Gracias por corregirme. :+1:


Tendré que ajustar la configuración para que funcione con los outlets de componentes y para que sea más fácil personalizar el espaciado. Te actualizaré pronto, Helga.

3 Me gusta

¡Genial, muchas gracias por tu ayuda, @Arkshine @Don! :fire: :fire:

2 Me gusta

¡Disculpa la espera! He actualizado el componente. He añadido varios ajustes nuevos.

En tu caso, quieres usar search-banner-below-input en el ajuste plugin_outlet.
Aparecerá ahora justo debajo:

Si lo prefieres, ahora puedes establecer un ancho máximo para el contenedor:


`
Aquí están los ajustes que utilicé:


La imagen muestra un elemento de interfaz de usuario etiquetado como "buttons wrapper max width" con un control deslizante y un campo de entrada numérica que permite al usuario establecer un ancho máximo de 600 píxeles, junto con un botón "reset". (Subtitulado por IA)

Hay otros ajustes, incluyendo algunos para la vista móvil.

Avísame si te funciona bien. :+1:

2 Me gusta

¡Oh, @Arkshine, eres una estrella! ¡¡Muchísimas gracias, todo se ve increíble ahora! :heart_eyes:

2 Me gusta

¡Muy inteligente la forma en que están organizadas las configuraciones de este componente temático, @Arkshine! Como siempre, aquí proporcionas otro excelente punto de partida y plantilla para los constructores de componentes principiantes de la comunidad.

¡MUCHAS, MUCHAS GRACIAS, amigo mío!

4 Me gusta

¡Gran componente temático, y definitivamente merece su propio tema!

¿Quizás deberíamos reformatear este para ese propósito? ¿O crear uno nuevo?

2 Me gusta