Listas de temas filtrados

[gormus (Osman Görmüş)]

	Resumen	Permite crear listas de temas personalizadas utilizando filtros. Las listas luego se pueden mostrar en un outlet de plugin seleccionado para páginas seleccionadas.
	Vista previa	Theme Creator
	Repositorio	https://github.com/gormus/discourse-filtered-topic-lists
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en Temas de Discourse?	Guía para principiantes sobre el uso de Temas de Discourse

Instalar este componente de tema

Permite crear listas de temas personalizadas utilizando los filtros de temas. Las listas luego se pueden mostrar en páginas seleccionadas, en outlets de plugins seleccionados.

Puedes crear tantas listas como necesites, definir sus encabezados, cuántos temas se deben listar, qué filtros se deben usar para la consulta y, sobre todo, en qué páginas se deben mostrar y dónde en esas páginas.

Asegúrate de revisar la función experimental de filtro de listas de temas y los filtros compatibles:

Experimental topics list filter feature

We have recently introduced an innovative /filter route, enabling more sophisticated filtering of the topics list. Significantly, this marks the initial step towards a unified topic filtering language for both search and filtering. Additionally, the dedicated route for topic list filtering enhances the customizability of the sidebar, as users can now incorporate links as custom section links within the sidebar. How to turn it on Enable the experimental_topics_filter site settings in the admin i…

Configuración

• Título: Un texto de encabezado opcional; cuando se proporciona, se muestra encima de la lista de temas.

• Longitud: El número de temas a mostrar.

• Consulta: La consulta para filtrar la lista

• Outlet de Plugin: Las listas de temas seleccionadas se pueden colocar en los siguientes outlets/regiones de plugins:

  • below-site-header
  • above-main-container
  • before-topic-list
  • after-topic-list
  • topic-list-bottom
  • main-outlet-bottom
  • before-main-outlet

• Mostrar en: La página en la que se mostrará la lista.

  • everywhere: Mostrar en todas las páginas, excepto en las páginas /admin.
  • homepage
  • top_menu: Consulta la configuración de tu menú superior para ver las páginas habilitadas.
  • categories: La página /categories.
  • latest: La página /latest.
  • top
  • new
  • unread
  • read
  • posted
  • bookmarks
  • hot
  • selected_categories:
  • selected_tags

• Categorías seleccionadas: Cuando la configuración Mostrar en se establece en selected_categories, se utilizan las categorías seleccionadas en este campo. La lista de temas solo se mostrará en estas páginas de categoría.

• Etiquetas seleccionadas: Cuando la configuración Mostrar en se establece en selected_tags, se utilizan las etiquetas seleccionadas en este campo. La lista de temas solo se mostrará en estas páginas de etiquetas.

Outlets de Plugins

Todos los outlets de plugins disponibles se renderizan con una regla discontinua roja a su alrededor.

Inspiración

Me inspiré en el componente de tema Featured Lists. Pero al final, necesitaba una solución menos restrictiva y más flexible para mi proyecto.

Asegúrate de revisarlo:

Featured Lists

Summary Create and feature custom topic lists Repository Manuel Kostka / Discourse / Components / Featured Lists · GitLab Install Guide How to install a theme or theme component New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component The component lets you filter custom topic lists and showcase them on your forum. Default look [image] Settings Editor [image] Stylin…

[Heliosurge (Dan DeMontmorency)]

Esto es bastante genial

¿Utiliza las mismas clases dirigibles para que puedas estilizar tu componente?

¿Podrías agregar un par de ejemplos de listas personalizadas en un par de outlets?

Gracias

[gormus (Osman Görmüş)]

@Heliosurge

¿Utiliza las mismas clases objetivo para que puedas estilizar tu componente?

Sí, las tablas de listas de temas filtrados utilizan las mismas clases CSS que la tabla principal de listas de temas. Además, hay elementos DIV envolventes con clases que te ayudarán a personalizar las tablas de listas de temas en cualquier plugin-outlet.

A continuación, puedes ver la jerarquía, y ten en cuenta que .topic-list es el identificador predeterminado para el elemento TABLE. También puedes apuntar a un plugin-outlet específico para aplicar diferentes estilos si lo necesitas; consulta el segundo bloque de código;

.filtered-topics-list {
    &__wrapper {
    }

    &__header {
        h2 {
        }
    }

    &__content.topic-list {
    }
}

.filtered-topics-list {
    &.below-site-header,
    &.above-main-container,
    &.before-topic-list,
    &.after-topic-list,
    &.topic-list-bottom,
    &.main-outlet-bottom,
    &.before-main-outlet {

        &__wrapper {
        }

        &__header {
            h2 {
            }
        }

        &__content.topic-list {
        }
    }
}

@Heliosurge

¿Podrías añadir un par de ejemplos de listas personalizadas en un par de outlets?

No tengo un sitio de demostración para mostrártelo, pero compartí una captura de pantalla que muestra todos los plugin-outlets disponibles con varias listas de temas filtrados.

Por favor, ignora las reglas discontinuas rojas que las rodean, solo las añadí para resaltar las tablas y las regiones en las que se encuentran.

[bekircem]

Estoy usando /latest como página de inicio. Añadí los últimos temas de categorías específicas a mi página de inicio con este componente, pero quiero eliminar el componente estándar de los últimos temas de Discourse con desplazamiento infinito. Lo hice con CSS, pero está afectando a otras páginas también. ¿Es posible apuntar al componente de los últimos temas con selectores CSS solo en la página de inicio?

[manuel (Manuel Kostka)]

Creo que necesitas consultar la ruta y agregar una clase personalizada usando javascript. Aquí tienes un ejemplo que podrías seguir:

https://gitlab.com/manuelkostka/discourse/helpers/css-classes/-/blob/main/javascripts/discourse/api-initializers/css-classes.js?ref_type=heads

[jrgong]

Encontré un error (¿o comportamiento esperado?):

Establecer Filtro de lista predeterminado: sin subcategorías en una categoría evita que se muestren listas de temas filtrados en cualquiera de las salidas.

Probado en la última versión estable 3.3.1.

[gormus (Osman Görmüş)]

Hola @jrgong, ¿podrías compartir una captura de pantalla de tu preset?

[jrgong]

Te envié un mensaje privado con mi preset

[jrgong]

Una pregunta más: ¿Cuál sería la mejor manera de ocultar la lista de temas principales al mostrar la lista filtrada en una categoría específica?

La única forma que encontré a través de CSS es apuntar a la etiqueta span, pero podría activarse en diferentes ocasiones:

span + table.topic-list.topic-thumbnails-grid {
  display: none;
}

[gormus (Osman Görmüş)]

@jrgong

establecer Filtro de lista predeterminado: sin subcategorías en una categoría evita que se muestren listas de temas filtrados en cualquiera de los outlets.

Hola @jrgong, puedo confirmar tus hallazgos.

Pasos para reproducir:

1. Crea una categoría y una subcategoría. Por ejemplo, Categoría Principal y Categoría Principal > Subcategoría
2. Edita la configuración de Categoría Principal (/c/top-level-category/edit/settings)
3. En Apariencia, encuentra la configuración Filtro de lista predeterminado.
4. Cambia el valor de todos los temas a sin subcategorías
5. Configura un nuevo preset en el componente Listas de Temas Filtrados para listar su contenido en ambas categorías, la principal y la subcategoría;
   1. Establece Mostrar en = selected_categories
   2. Establece Categorías seleccionadas = Categoría Principal, Subcategoría
   3. Establece Plugin Outlet = (cualquiera)
6. Visualiza las páginas de cada categoría

¿Qué se espera?

Ambas páginas de categoría deben mostrar los resultados del preset configurado en el outlet de plugin seleccionado.

¿Qué se encuentra?

1. Cualquier categoría con la configuración Filtro de lista predeterminado = sin subcategorías, no muestra las Listas de Temas Filtrados; tenga o no subcategorías.
2. Sin embargo, si se establece Mostrar en = everywhere, la Lista de Temas Filtrados se muestra en el outlet seleccionado.

Problemas similares:

Routing issue when adjusting topic list filters

There is currently a routing bug reproducible under fairly specific conditions: Prerequisites Category with a subcategory Default List Filter category setting should be “no subcategories” for the parent category Solved plugin installed show_filter_by_solved_status site setting enabled enable solved globally or at least for the involved categories Repro steps Change the solved/unsolved filter from the default of “all” to “solved” Change the subcategory filter from the default of “none”…

Events: If subcategories hidden, so is the events calendar

If you have an events_calendar_categories set in that category’s settings set Default List Filter to be no subcategories then the events calendar is not displayed. I discovered this when making a subcategory to house expired events (as an alternative to deleting them).

[MihirR (Mihir)]

Cuando añado un campo personalizado, digamos un filtro llamado X, con 10 temas recientes, y cuando esos 10 temas se desplazan, y digamos que “Último” comienza y si uno o más de esos temas todavía están allí, se muestran en ambos. ¿Hay alguna manera de ocultarlos de “Último” o del filtro?

[agemo]

¡Gran funcionalidad del plugin!

P: Plugin Outlet : before-main-outlet

¿Cómo hacemos que esto se muestre? No lo veo. ¿Necesito habilitar/deshabilitar algo en el tema estándar para que habite en el lado derecho de la pantalla, como en layton gfx?

[agemo]

Hmm, lo encontré o al menos lo vi brevemente, ya que aparece en la parte inferior del desplazamiento infinito, no en el lado derecho como se anticipaba o esperaba de la guía visual.