Encabezado de Categorías Destacadas

[manuel (Manuel Kostka)]

	Resumen	Categorías destacadas en vistas seleccionadas.
	Enlace al repositorio	Manuel Kostka / Discourse / Components / Featured Categories · GitLab
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de temas en Discourse

Instalar este componente de tema

Vista de tarjetas

Vista de lista

Configuración

Puedes cambiar entre las dos disposiciones anteriores o elegir ninguna y definir tus propios estilos. También puedes seleccionar una ruta y establecer una salida para el componente.

Plantilla

.featured-categories {
  &__container {
  }
  &__heading {
  }
  &__list-container {
  }
  &__category-container {
  }
  &__category-link {
    .category-logo {}
    .category-name {}
    .category-description {}
}

[Zup]

Gracias, Handy TC.

Imagino que serían añadidos deseables un interruptor para mostrar solo en la página de inicio, mostrar el logotipo del sitio y mostrar la descripción del sitio debajo del logotipo.

[manuel (Manuel Kostka)]

@Zup

Un interruptor para mostrar solo en la página de inicio

Actualmente se muestra en las listas globales (más recientes/nuevos/no leídos/top). Estaba pensando en agregar un menú desplegable en la configuración para seleccionar las páginas globales en las que debe aparecer. Así que, sí, está en mi hoja de ruta cuando tenga tiempo para retomarlo.

¿Cuál sería el caso de uso para tener el logotipo? En las páginas globales, casi ya estás en “inicio”, ¿no?

Lo que más me gustaría agregar es una vista para móviles. Hasta ahora no tenía una idea al respecto, por lo que simplemente no se muestra en dispositivos móviles. Gracias por compartirlo. ¡Si tienes alguna idea al respecto, házmelo saber!

[Zup]

@manuel

¿Cuál sería el caso de uso para tener el logotipo?

Estética personalizada y, combinado con una breve descripción, ofrecería una visión rápida de la comunidad para los nuevos visitantes y serviría como recordatorio para los usuarios existentes sobre la misión de la comunidad. Posicionado encima o a la izquierda de los enlaces.

Mostrar esto en los enlaces globales de forma predeterminada, así como opcionalmente por categoría (¿y páginas de etiquetas?), serviría como un menú de navegación conveniente para las áreas prioritarias; ese sería mi uso principal previsto. (Por cierto, la capacidad de incluir enlaces personalizados, no solo categorías, sería otra característica deseable).

Personalmente, creo que la mayoría de los sitios de Discourse tienden a ser algo vagos, especialmente en la visita inicial, y, por defecto, creo que la navegación de Discourse puede resultar confusa para el usuario promedio. En general, mis sitios están diseñados para priorizar solo unas pocas áreas (de muchas), y estas adiciones propuestas harían muy claro para el usuario promedio cuáles son esas áreas, además de facilitar su acceso.

[valsha (KingPin)]

Buen componente,
Hemos instalado Versatile Banner. ¿Cómo podemos mover este componente DEBAJO de Versatile Banner?
De modo que el componente Versatile Banner se muestre primero y luego el suyo.
Gracias.

[manuel (Manuel Kostka)]

Sí, ambos componentes se renderizan en el mismo outlet. No sé qué causa el orden de los elementos en ese caso; en mi sitio, por defecto se muestra debajo del banner..

Pero deberías poder controlar el orden con declaraciones CSS:

.below-site-header-outlet.categories-header {
  order: -1 !important;
}
.below-site-header-outlet.banner-themes {
  order: -2 !important;
}

[manuel (Manuel Kostka)]

@Zup

Por cierto, la capacidad de incluir enlaces personalizados, no solo categorías, sería otra característica deseable.

Esto suena a muchas opciones personalizadas. No querría añadir tanta lógica a este componente.

Crear una navegación destacada me parece más un caso de uso para un banner HTML personalizado. Solo necesitarías algunos enlaces con imágenes y títulos.

@Zup

Observo que la mayoría de los sitios de Discourse tienden a ser algo vagos, especialmente en la visita inicial, y creo que, por defecto, la navegación de Discourse puede resultar confusa para el usuario promedio.

¡Estoy de acuerdo! Creo que los banners dedicados para visitantes y para usuarios recién registrados pueden ser útiles y acogedores.

[JammyDodger]

Hay una opción “cambiar la posición predeterminada” en la configuración del Versatile Banner, ¿te sirve?

cambiar la posición predeterminada

Si hay otro componente relacionado con el banner activo, usa esto para intercambiar su posición con el Versatile Banner.

[valsha (KingPin)]

Prueba esta configuración, no me ayudó

[Rhod (Rodolfo)]

Instalé un componente temático pero no encaja dentro del contenido principal, lo que hace que se vea fuera de lugar (feo), uso el tema air.
¿Me puedes ayudar, por favor, dónde puedo hacer que el componente aparezca dentro del contenedor de color oscuro?

Se ve así:

Me gustaría que se viera así:

[AkaiBukai]

Hola,
Estoy empezando con Discourse y los temas…
Quiero tener algo parecido a tarjetas en la parte superior, como puedes ver aquí: Secret World Legends - Funcom Forums
Este componente de tema parece ayudar en esa dirección…
Lo instalé y pude seleccionar las categorías que quiero que aparezcan, pero solo obtuve los títulos…
Lo cual tiene sentido ya que aún no he configurado ninguna imagen…

Mi pregunta (que probablemente sea una pregunta tonta ya que nadie más la ha hecho) es cómo puedo configurar la imagen de las categorías…
¿Y cómo las “subo”?

Gracias por cualquier ayuda…

[Heliosurge (Dan DeMontmorency)]

Ve a la configuración de Categorías que utilizaste para crear la categoría y selecciona la pestaña de imagen.

Subir imagen

[Vasan_Cannane]

Hola, soy nuevo en Discourse, así que tengo una pregunta sobre la cabecera de categorías destacadas.

Estoy intentando lograr esto pero no puedo.

Han proporcionado unas pocas líneas de código:

html.categories-header{
  .below-site-header-outlet.categories-header {
    .wrap {
      .categories-header-item {
        [enlace, logo, nombre de cada elemento...]
      }
    }
  }
}

¿Cómo puedo especificar el enlace, el logo y el nombre del elemento?

¿Alguien puede aclarar esto?

Gracias.

[Arkshine]

Hola, bienvenido

Si quieres mostrar una imagen como la del ejemplo, necesitas seleccionar las categorías relevantes en la configuración del componente del tema y asegurarte de que cada una tenga una imagen asignada (configuración de la categoría → Imágenes → Imagen del logo de la categoría)

[Vasan_Cannane]

Esta es la configuración del componente temático de Categorías Destacadas y no encuentro nada

[Arkshine]

Tienes que editar la configuración de tu categoría:

Haz clic en la pestaña Images:

… ¡y sube una Imagen de Logo de Categoría!

[Vasan_Cannane]

Tengo una fila de productos, ¿cómo puedo dividir los productos en varias columnas?

[Arkshine]

¿Algo así?

Si es así, prueba este CSS. Agrégalo al CSS de tu tema o a un componente.

Dentro, puedes ver variables que puedes controlar.
Puedes elegir el número de columnas, el espacio entre los elementos y el ancho de cada elemento.
Los elementos se están apilando automáticamente.

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 6;
    --ch-gap: 2.5em;
    --ch-width: 110px;

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(var(--ch-width), 0fr));
    gap: var(--ch-gap) !important;

    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap))) !important;
}

[Vasan_Cannane]

Gracias por la ayuda.

¿Puedo pedir una ayuda más?

Esto es lo que estoy tratando de lograr.

¿Puedes ayudarme con eso?

[Arkshine]

Intenta algo como esto:

.below-site-header-outlet.categories-header > div.wrap {
    --ch-columns: 4;
    --ch-gap-row: 2em;
    --ch-gap-col: 6em;
    --ch-width: 120px;
    
    > div {
        width: var(--ch-width);
    }
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    max-width: calc(var(--ch-columns) * var(--ch-width) + ((var(--ch-columns) - 1) * var(--ch-gap-col))) !important;
}