Pré-visualizações da Lista de Tópicos (TLP)

[merefield (Robert)]

Este é um Componente de Tema, mas possui a opção de adicionar um plugin complementar.

	Resumo	O componente original de Pré-visualização de Tópicos que permite adicionar imagens e resumos (e mais!) à Lista de Tópicos, enquanto permite configurar quais adições aparecem em qual lista.
	Link do Repositório	GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists · GitHub
	Guia de Instalação	Installing a theme or theme component
	Patrocínio	Considere tornar-se um patrocinador recorrente do meu trabalho de código aberto em um nível que se adeque aos recursos e necessidades da sua organização, para garantir que este componente receba a manutenção que merece e continue funcionando no seu site no futuro.

Gostando deste Componente de Tema? Por favor, dê uma no GitHub

Instale este componente de tema

Funciona muito bem com Discourse Bars 🍻 🍸 (a sidebar framework)!

Visão Geral

O Topic List Previews permite que você:

• Adicione imagens, resumos e estatísticas de tópicos aos itens da lista de tópicos; e
• Altere o layout e o estilo dos itens da lista de tópicos
• Adicione tópicos “Destaque” acima das listas de tópicos e dos próprios tópicos.
• Adicione a Parede de Usuários à página de atividades do usuário (também conhecida como recurso “Portfólio”).

O Sidecar

Isso pode ser complementado com o plugin ‘sidecar’: https://github.com/merefield/discourse-topic-previews-sidecar

Atualmente, este é um repositório privado ao qual meus patrocinadores do GitHub que contribuem com pelo menos $7 ganham acesso.

para adicionar os seguintes recursos:

• ‘ações’ (marcar como favorito, vincular e curtir a partir da Lista de Tópicos)
• Seletor de Miniaturas no Editor de Meta de Tópico. (Escolha qualquer miniatura de todo o Tópico usando uma interface simples)
• Colorização do fundo baseada na cor dominante da miniatura
• Processamento de miniaturas do YouTube para remover bordas pretas (crucial para determinar a melhor cor dominante).
• Opção de recriar miniaturas na reconstrução da Postagem do Tópico para permitir que você gerencie rapidamente a eliminação de bordas em uma base individual por Tópico.

Guia de instalação do plugin: Install plugins on a self-hosted site

Você precisa, no mínimo, do Componente de Tema; o Plugin é opcional.

Essas configurações podem ser aplicadas a todas ou a listas de tópicos selecionadas, em base global ou específica por categoria.

Este conjunto de recursos flexível permite que você crie uma variedade de estilos diferentes de lista de tópicos, incluindo

Estilo Básico

Configurações relevantes

• miniatura da lista de tópicos
• resumo da lista de tópicos
• ação da lista de tópicos

Estilo Pinterest (Masonry) aka ‘tiles’

Configurações relevantes

• blocos da lista de tópicos
• miniatura da lista de tópicos
• resumo da lista de tópicos
• ação da lista de tópicos
• largura da miniatura da lista de tópicos
• altura da miniatura da lista de tópicos

que possui opção de formato amplo (atrás da configuração topic_list_tiles_wide_format):

Isso funciona de forma responsiva, então colapsará para o formato masonry se não tiver largura suficiente (e vice-versa).

Imagens em Destaque

Configurações relevantes

• tag de imagens em destaque da lista de tópicos
• contagem de imagens em destaque da lista de tópicos
• largura em destaque da lista de tópicos
• altura em destaque da lista de tópicos
• título em destaque da lista de tópicos
• resumo em destaque da lista de tópicos
• ordem em destaque da lista de tópicos

Alternando Resumos:

Introduzi isso há algum tempo para uso com meu plugin AI Topic Summaries.

Você pode usá-lo para TLP:

GitHub - merefield/discourse-tc-excerpts-toggle: A small Discourse theme component that adds a...

Exemplos na Prática

• StarZen - Um site de fãs não oficial de Star Citizen
• https://www.artofsm.art/

Suporte

Não forneço suporte garantido gratuitamente. Posso fornecer suporte a empresas ou instituições que se inscrevam em uma de minhas camadas mensais de Patrocínio GOLD ou PLATINUM.

Existe também uma opção de caça a bugs única.

[raghukamath (Raghavendra Kamath)]

Existe uma maneira de fazer com que a ordem da imagem em destaque seja baseada no momento em que a tag é adicionada? Atualmente, ele traz a imagem em destaque do tópico que tem atividade recente, empurrando as imagens com as tags mais recentes para baixo.

Por exemplo, se eu tiver 10 imagens, marco 5 delas como em destaque, agora essas 5 são mostradas na barra superior. Se eu adicionar mais 5 tags, elas substituirão as 5 existentes. Mas se algum dos 5 tópicos anteriores tiver comentários ou postagens, essa imagem será trazida para a frente agora.

[merefield (Robert)]

Etiqueta? Não, mas existe esta opção para ordenar por data de criação:

[merefield (Robert)]

Aviso: Vou implementar uma alteração no layout dos Tiles (item) em breve. Se você tiver alguns ajustes de CSS, eles podem precisar ser… hum… ajustados:

Eu prometo que não farei isso com muita frequência, mas esta alteração é para organizar as coisas e facilitar algumas novas funcionalidades que podem aparecer no futuro…

Atualmente, a alteração está no branch beta.

[raghukamath (Raghavendra Kamath)]

Sim, essa opção ajuda um pouco, mas se alguma das postagens mais antigas tiver alguma atualização, ela virá para a frente.

[merefield (Robert)]

Estou usando apenas as opções nativas disponíveis na API do Discourse (é um Componente de Tema em sua essência, então você não pode alterar a API). Quando tiver tempo, darei uma olhada na ordenação novamente. No entanto, isso surgiu há um tempo e fiz uma alteração para ajudar um dos usuários. Topic List Previews (legacy) - #1154 by merefield. Surpreende-me que isso não esteja funcionando como especificado. Você esperaria que o created_at de um Tópico permanecesse estático, apesar de novas postagens? Tem certeza de que alterou a configuração e atualizou o navegador?

[merefield (Robert)]

@raghukamath Acabei de testar isto e parece estar a funcionar como esperado? Ainda não mudará a ordem em resposta a novas Publicações e respeita a data created_at. Por favor, atualize o seu navegador e tente novamente.

[raghukamath (Raghavendra Kamath)]

Sem problemas. Vou testar mais. Talvez eu tenha me confundido devido ao comportamento quando a opção está ativada. Desculpe incomodar tanto.

Outra questão que meus membros destacaram é sobre a correção CSS de cor dos tópicos não lidos e lidos não estar sendo aplicada aos navegadores móveis.

[merefield (Robert)]

@raghukamath

Um outro problema que meus membros destacaram é sobre a correção de CSS de cor de tópico não lido e lido não estar sendo aplicada aos navegadores móveis.

Sim, isso ainda estava pendente, como afirmado anteriormente. Tentarei enviar isso com a atualização de layout descrita acima, provavelmente em alguns dias.

[flash]

Olá, eu estava tentando trabalhar com o plugin git depreciado quando não consegui substituir o CSS na miniatura móvel. Continuou revertendo para uma altura de 80px. Comecei a pesquisar e vi que foi movido para o componente. Terei o mesmo problema e precisarei clonar o componente para alterá-lo ou existe outra solução? Quero que o celular tenha largura total no navegador móvel.

[merefield (Robert)]

O layout aqui não atenderia às suas necessidades: Topic List Previews (TLP) - #4 by merefield atenderia às suas necessidades? Os novos blocos têm miniaturas de largura total. Isso está atualmente no branch beta. Instale isso, se desejar, como um Componente de Tema adicional e experimente. Lembre-se de especificar o branch ao instalar e editar o nome do Componente de Tema para deixar claro que é a versão Beta.

[flash]

Isso definitivamente faria. Eu o tenho em tela cheia agora, como eu queria. Obrigado.

[merefield (Robert)]

Eu mesclei o branch beta:

• o estilo interno dos blocos foi modernizado e organizado. As miniaturas agora ocupam a largura total da coluna.
• há uma série de simplificações de CSS
• o layout móvel teve algumas pequenas melhorias para blocos não-tiles.
• os títulos dos blocos agora devem refletir visitas anteriores também no celular.

Layout changes

[sofi.pocketful (Sofi)]

Olá,\n\nObrigado por este componente incrível! Adoro o design \n\nSou relativamente novo no Discourse e não sei muito sobre os termos técnicos.\n\nTenho tido problemas com as imagens não aparecendo no componente de lista. Por algum motivo, as imagens aparecem na pré-visualização do componente, mas quando carrego o real, as imagens não estão mais lá.\n\n

\n^ Esta é a pré-visualização do componente

[sofi.pocketful (Sofi)]

^ É assim que fica quando carrego a página real

Agora, acredito que tenha algo a ver com minhas configurações do Discourse??

Existe alguma configuração específica que precise ser ativada para que este componente funcione? Eu realmente não sei por que não está funcionando como deveria…

[merefield (Robert)]

Olá, obrigado pelo seu interesse.

Algumas coisas:

• Se você nunca instalou um componente ou plugin semelhante antes, pode haver um atraso antes que todas as miniaturas sejam geradas. Este é um processo em lote e leva tempo. Este processo deve começar a ser executado em segundo plano automaticamente assim que você instalar o componente e adicioná-lo a um tema. Verifique sua fila do Sidekiq. Você pode ver muitos trabalhos enfileirados.
• Não é necessariamente compatível com qualquer tema, sempre há a possibilidade de um conflito: ele é desenvolvido e projetado apenas com o tema padrão. Por favor, teste-o em seu site apenas com o tema padrão inicialmente. Você pode adaptar sua aparência, mas isso precisará ser baseado nos artefatos especiais deste componente.

[sofi.pocketful (Sofi)]

Olá Robert,

Obrigado pela sua resposta! Vou testar o que você sugeriu no meu site

[flash]

Olá, Robert. Estou trazendo uma tabela com JavaScript de terceiros abaixo do cabeçalho e o script quebra as prévias quando o uso em um componente. Alguma ideia de uma solução alternativa?

[merefield (Robert)]

Se houver um erro nesse script que esteja impedindo a execução do JavaScript, isso pode quebrar o código de layout do TLP, que exige que o JavaScript esteja funcionando da melhor maneira possível. Procure por erros vermelhos no console do seu navegador.

[raghukamath (Raghavendra Kamath)]

@merefield

Acabei de testar isso e parece estar funcionando como esperado? Ainda não mudará a ordem em resposta a novas postagens e respeita a data created_at. Por favor, atualize seu navegador e tente novamente.

Olá, ativei a opção de data de criação conforme você sugeriu. Isso resolve parcialmente os problemas. mas acho que em plugins mais antigos a ordem era definida de acordo com a data em que a postagem era marcada. Além disso, o problema de imagens mais antigas aparecerem na página inicial em qualquer atualização ou resposta ao tópico dificulta que uma imagem recente permaneça em destaque. Suponha que eu marque uma imagem como destaque e, se alguma postagem antiga de um ano atrás receber uma nova resposta, a página inicial terá a imagem em destaque dessa postagem. Se muitas postagens antigas receberem respostas, a imagem em destaque recém-marcada desaparecerá.