Visualizações da Lista de Tópicos (TLP)

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

|||
-|-|-|
:information_source: | Resumo | O componente original Topic Preview que permite adicionar imagens e trechos (e mais!) à Lista de Tópicos, podendo configurar quais adições aparecem em qual lista.
:hammer_and_wrench: | Link do Repositório | GitHub - merefield/discourse-tc-topic-list-previews: Enriches the content and layout of topic lists
:open_book: | Guia de Instalação | Installing a theme or theme component
:heart: | Patrocínio | Por favor, considere tornar-se um patrocinador contínuo do meu trabalho de código aberto em um nível que se adeque aos recursos e necessidades seus ou de sua organização para garantir que este componente receba a manutenção que merece e continue funcionando para seu site no futuro.

Gostando deste Componente de Tema? Por favor, dê :star: 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, trechos 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 ‘Em Destaque’ acima das listas de tópicos e dos tópicos.
  • Adicione o Muro do Usuário à página de atividade 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

para adicionar os seguintes recursos:

  • ‘ações’ (marcar, vincular e curtir da Lista de Tópicos)
  • Seletor de Miniatura no Editor de Metadados do Tópico. (Escolha qualquer miniatura de todo o Tópico usando uma interface simples)
  • Coloração do fundo com base na cor dominante da miniatura
  • Processamento de miniaturas do YouTube para remover quaisquer bordas pretas (crítico para determinar a melhor cor dominante).
  • Opção de recriar miniaturas na reconstrução da Postagem do Tópico para permitir o gerenciamento rápido da eliminação de bordas em uma base de Tópico individual.

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

Você precisa de pelo menos o Componente de Tema, o Plugin é opcional.

Essas configurações podem ser aplicadas a todas ou a listas de tópicos selecionadas em nível de site ou específicas de categoria.

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

Estilo Básico

Configurações relevantes
  • topic list thumbnail
  • topic list excerpt
  • topic list action

Estilo Pinterest (Masonry) aka ‘tiles’

Configurações relevantes
  • topic list tiles
  • topic list thumbnail
  • topic list excerpt
  • topic list action
  • topic list thumbnail width
  • topic list thumbnail height

que tem opção de formato amplo (por trás da configuração topic_list_tiles_wide_format):

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

Imagens em Destaque

Configurações relevantes
  • topic list featured images tag
  • topic list featured images count
  • topic list featured width
  • topic list featured height
  • topic list featured title
  • topic list featured excerpt
  • topic list featured order

Alternando Trechos:

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

Você pode usá-lo para TLP:

Exemplos em Uso :seedling:

Suporte

Não forneço nenhum suporte garantido gratuitamente. Posso fornecer suporte a empresas ou instituições que se inscrevam em um dos meus planos mensais de Patrocínio OURO ou PLATINA.

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

54 curtidas

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.

3 curtidas

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

image

1 curtida

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.

3 curtidas

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

2 curtidas

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?

3 curtidas

@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.

3 curtidas

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.

1 curtida

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

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.

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.

1 curtida

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

1 curtida

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.
4 curtidas

Olá,\n\nObrigado por este componente incrível! Adoro o design :heart_eyes:\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

1 curtida


^ É 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…

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.
1 curtida

Olá Robert,

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

1 curtida

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?

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.

1 curtida

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á.