Listas de Tópicos Filtrados

[gormus (Osman Görmüş)]

	Resumo	Permite criar listas de tópicos personalizadas usando filtros. As listas podem então ser exibidas em um outlet de plugin selecionado para páginas selecionadas.
	Pré-visualização	Theme Creator
	Repositório	https://github.com/gormus/discourse-filtered-topic-lists
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes no uso de Temas do Discourse

Instale este componente de tema

Permite criar listas de tópicos personalizadas usando os filtros de tópicos. As listas podem então ser exibidas em páginas selecionadas, em outlets de plugins selecionados.

Você pode criar quantas listas precisar, definir seus títulos, quantos tópicos devem ser listados, quais filtros devem ser usados para a consulta e, acima de tudo, em quais páginas eles devem ser exibidos e onde nessas páginas.

Certifique-se de revisar o recurso experimental de filtro de lista de tópicos e os filtros suportados:

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…

Configurações

• Título: Um texto de título opcional; quando fornecido, ele é exibido acima da lista de tópicos.

• Comprimento: O número de tópicos a serem exibidos.

• Consulta: A consulta para filtrar a lista

• Plugin Outlet: As listas de tópicos selecionadas podem ser colocadas nos seguintes outlets/regiões de plugin:

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

• Mostrar em: A página onde a lista será exibida.

  • everywhere: Exibir em todas as páginas, exceto nas páginas /admin.
  • homepage
  • top_menu: Verifique suas configurações de menu superior para páginas habilitadas.
  • categories: A página /categories.
  • latest: A página /latest.
  • top
  • new
  • unread
  • read
  • posted
  • bookmarks
  • hot
  • selected_categories:
  • selected_tags

• Categorias selecionadas: Quando a configuração show on estiver definida como selected_categories, as categorias selecionadas neste campo serão usadas. A lista de tópicos será exibida apenas nessas páginas de categoria.

• Tags selecionadas: Quando a configuração show on estiver definida como selected_tags, as tags selecionadas neste campo serão usadas. A lista de tópicos será exibida apenas nessas páginas de tags.

Outlets de Plugin

Todos os outlets de plugin disponíveis são renderizados com uma linha tracejada vermelha ao redor deles.

Inspiração

Fui inspirado pelo componente de tema Featured Lists. Mas, no final, precisei de uma solução menos opinativa e mais flexível para o meu projeto.

Certifique-se de conferir:

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)]

Isso é muito legal

Ele usa as mesmas classes direcionáveis para que você possa estilizar seu componente?

Você poderia adicionar alguns exemplos de listas personalizadas em alguns outlets?

Obrigado

[gormus (Osman Görmüş)]

@Heliosurge

Ele usa as mesmas classes de destino para que você possa estilizar seu componente?

Sim, as tabelas de lista de tópicos filtrados usam as mesmas classes CSS que a tabela principal de lista de tópicos. Além disso, existem elementos DIV de encapsulamento com classes que ajudariam você a personalizar as tabelas de lista de tópicos em qualquer plugin-outlet.

Abaixo você pode ver a hierarquia, e observe que .topic-list é o identificador padrão para o elemento TABLE. Você também pode direcionar plugin-outlets específicos para aplicar estilos diferentes, se necessário; veja o segundo bloco 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

Você poderia adicionar alguns exemplos de listas personalizadas em alguns outlets?

Eu não tenho um site de demonstração para lhe mostrar isso, mas compartilhei uma captura de tela exibindo todos os plugin-outlets disponíveis com várias listas de tópicos filtrados.

Por favor, ignore as regras pontilhadas vermelhas ao redor delas, eu só as adicionei para destacar as tabelas e as regiões em que elas estão.

[bekircem]

Estou usando /latest como página inicial. Adicionei os tópicos mais recentes de categorias específicas à minha página inicial com este componente, mas quero remover o componente padrão e de rolagem infinita de tópicos mais recentes do Discourse. Fiz isso com CSS, mas está afetando outras páginas também. É possível direcionar o componente de tópicos mais recentes com seletores CSS apenas na página inicial?

[manuel (Manuel Kostka)]

Acredito que você precise consultar a rota e adicionar uma classe personalizada usando JavaScript. Aqui está um exemplo que você pode seguir:

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

[jrgong]

Bug encontrado (ou comportamento esperado?):

Definir Filtro de lista padrão: sem subcategorias em uma categoria impede que quaisquer listas de tópicos filtradas sejam exibidas em qualquer um dos canais.

Testado na versão estável mais recente 3.3.1.

[gormus (Osman Görmüş)]

Olá @jrgong, você poderia compartilhar uma captura de tela da sua predefinição?

[jrgong]

Enviei uma mensagem privada com meu preset

[jrgong]

Mais uma pergunta: Qual seria a melhor forma de ocultar a lista de tópicos principal ao exibir a lista filtrada em uma categoria específica?
A única forma que encontrei via CSS é direcionar a tag span, mas isso pode ser acionado em diferentes ocasiões:

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

[gormus (Osman Görmüş)]

@jrgong

Definir Filtro de Lista Padrão: sem subcategorias em uma categoria impede que quaisquer listas de tópicos filtradas sejam exibidas em qualquer um dos outlets.

Olá @jrgong, posso confirmar suas descobertas.

Passos para reproduzir:

1. Crie uma categoria e uma subcategoria. Ex: Categoria Principal e Categoria Principal > Subcategoria
2. Edite as configurações da Categoria Principal (/c/top-level-category/edit/settings)
3. Em Aparência, encontre a configuração Filtro de Lista Padrão.
4. Altere o valor de todos os tópicos para sem subcategorias
5. Configure um novo preset no componente Listas de Tópicos Filtradas para listar seu conteúdo em ambas as categorias principal e de subcategorias;
   1. Defina Mostrar em = selected_categories
   2. Defina Categorias selecionadas = Categoria Principal, Subcategoria
   3. Defina Plugin Outlet = (qualquer)
6. Visualize as páginas de cada categoria

O que é esperado?

Ambas as páginas de categoria devem mostrar os resultados do preset configurado no plugin outlet selecionado.

O que foi encontrado?

1. Qualquer categoria com a configuração Filtro de Lista Padrão = sem subcategorias não exibe as Listas de Tópicos Filtradas; quer tenha subcategorias ou não.
2. No entanto, se Mostrar em = everywhere for definido, a Lista de Tópicos Filtradas é exibida no outlet selecionado.

Problemas semelhantes:

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)]

Quando eu adiciono um campo personalizado, digamos um filtro chamado X, com 10 tópicos recentes, e quando esses 10 tópicos são percorridos, e digamos que a aba ‘Mais Recentes’ começa e se um ou mais desses tópicos ainda estiverem lá, eles são mostrados em ambos. Existe uma maneira de escondê-los da aba ‘Mais Recentes’ ou do filtro?

[agemo]

Ótima funcionalidade do plugin!

P: Plugin Outlet : before-main-outlet

Como fazemos isso aparecer? Não o vejo. Preciso ativar/desativar algo no tema padrão para que ele ocupe o lado direito da tela, como no layton gfx?

[agemo]

Hmm, encontrei ou pelo menos avistei brevemente, pois está aparecendo no final da rolagem infinita, não no lado direito como antecipado ou esperado pelo guia visual.