Componente de Lista de Tópicos MD

Steven · Março 27, 2020, 1:46pm

Você pode editar o componente diretamente, alterar a parte do cabeçalho e colar isso. Ele usará a versão anterior

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>

WorldIsMine · Março 27, 2020, 5:05pm

Obrigado por isso

Steven · Março 27, 2020, 5:31pm

Criei uma branch específica para quem não deseja editar o componente e não pode atualizar seu fórum Discourse no momento.

Você pode instalar um novo componente usando as configurações avançadas.

Repositório contendo o tema: https://github.com/iunctis/md-topic-list
Nome da branch: bf-20200323

Você terá o componente compatível com versões do Discourse anteriores a 23 de março de 2020. Antes deste commit.

Steven · Março 30, 2020, 7:59pm

Brincuei um pouco com a apresentação da lista de tópicos no mobile. Ainda precisa de alguns ajustes, mas você teria interesse em algo assim (seria um componente separado):

A apresentação atual da lista de tópicos no mobile:

O avatar ainda abre o cartão do usuário e a data leva ao último post.

ScammerRevolts · Março 31, 2020, 6:55am

Eu com certeza gostaria, seria um ótimo acréscimo, especialmente porque o layout para celular e desktop seria similar, em vez de parecer totalmente diferente

jrgong · Março 31, 2020, 8:45pm

O link de pré-visualização não funciona. Quando tento acessar, recebo esta mensagem de erro:

Acesso Negado

ao tentar carregar /theme/Steven/md-topic-list.json

Algo deu errado.

Steven · Março 31, 2020, 8:48pm

Desculpe por isso. Eu limpei as páginas do meu tema no Discourse mais cedo, mas limpei um pouco demais

Deveria estar corrigido agora, obrigado por reportar!

jrgong · Abril 4, 2020, 10:14am

Oi @Steven

Já estou na versão 2.4.1, mas meus avatares continuam sumidos. Veja a captura de tela da prévia do meu tópico aqui

Steven · Abril 4, 2020, 11:21am

Você já testou esta branch?

Se você tem uma versão do Discourse anterior a 23 de março, precisará usar esta branch até atualizar seu fórum:

jrgong · Abril 25, 2020, 1:03pm

Alguém está usando este componente de tema em combinação com o plugin Topic List Previews? Ou ele está causando problemas de qualquer forma?

Atualmente, estou usando o tema minimalista de Sam, mas ele não está funcionando com o Topic List Previews em seu estado atual. Então, estou considerando mudar para poder ter ambos: lista de tópicos minimalista e pré-visualizações de imagens dos tópicos

Steven · Abril 25, 2020, 1:10pm

É esperado que o plugin de pré-visualização da lista de tópicos substitua os modelos dos itens da lista de tópicos, assim como este componente do tema. Acredito que o plugin tenha vantagem sobre o componente do tema, então a melhor maneira de ter ambos é fazer um fork do plugin de pré-visualização da lista de tópicos e personalizar os modelos.

Eu fiz um fork personalizado eu mesmo, se quiser ver como isso pode ser feito: https://github.com/iunctis/discourse-topic-previews
Essas alterações específicas - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (não recomendo realmente essa versão para o seu fórum, pois tenho um tema personalizado que vem junto, e alterei algumas coisas nos blocos que a maioria dos usuários não gostaria)

Os modelos para desktop no plugin original estão aqui, esta é a melhor maneira de começar: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

É totalmente viável, mas você precisa estar um pouco confortável com o GitHub (para se manter atualizado com o plugin) e com a personalização de modelos.

Steven · Maio 19, 2020, 7:51pm

Acabei de aplicar uma pequena atualização. Não há novas funcionalidades, mas adicionei compatibilidade com as novas funções de miniaturas.

O componente do tema é compatível com estes componentes:

nory · Julho 7, 2020, 7:09pm

Olá, ele é compatível também com este plugin? Topic List Previews (legacy)
Obrigado,
Deb

Steven · Julho 7, 2020, 8:15pm

Infelizmente não, já que editamos o mesmo arquivo.

Você pode fazer os dois funcionarem se alterar o código do cabeçalho e integrar o estilo dos tiles com minhas modificações, mas isso requer algum entendimento de como isso funciona.

Você pode se inspirar na minha versão antiga e personalizada da prévia da lista de tópicos (ela era anterior ao componente oficial do tema de miniaturas, então pode não funcionar no momento): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr

No entanto, ela usava classes CSS e alinhamentos diferentes para algumas coisas, o que pode não funcionar no seu fórum.

pinder99 · Janeiro 20, 2021, 10:20am

Olá @Steven, estou usando seu plugin há algum tempo e removi a guia de atividade e a guia de visualização do tópico para poder movê-los abaixo dos tópicos, como faz seu plugin, mas não tive sucesso. Você pode me ajudar? Eu só quero adicionar a data (atividade) como na imagem abaixo:

Steven · Janeiro 20, 2021, 12:57pm

Primeiro, você precisa alterar a estrutura da tabela e excluir as colunas das abas de visualização e atividade.

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
</script>

Você também pode excluir a última linha se quiser remover a coluna de respostas.

Agora, vamos tratar da parte principal com o conteúdo. Primeiro, excluí as duas colunas.

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

Em seguida, adicionamos o conteúdo desejado. Não incluirei todos os detalhes necessários, pois isso exige um pouco de trabalho, mas o resultado deve ser algo assim:

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span>Iniciado em <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> por <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">Última postagem em {{format-date topic.bumpedAt format="tiny"}}</a> por <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

No entanto, isso é apenas um esboço inicial e não foi testado. Talvez você precise adicionar algumas classes de span, alterar o formato da data (usando format="medium" em vez de tiny?), mas a estrutura deve estar bastante adequada.

pinder99 · Janeiro 20, 2021, 1:02pm

Muito obrigado, @Steven. Isso é exatamente o que eu precisava. Agradeço muito a rápida resposta. Só mais uma coisa: não há espaço entre “admin” e “Última mensagem”. Como posso adicionar um pouco de espaço entre eles?

Steven · Janeiro 20, 2021, 1:29pm

Eu adicionei um <br>, estranho, não funcionou. Coloque-o na tag span ou use   para forçar algum espaçamento se você não se sentir confortável em adicionar um elemento de classe na tag span.

pinder99 · Janeiro 20, 2021, 2:39pm

nbsp funcionou perfeitamente

pinder99 · Janeiro 22, 2021, 8:37am

@Steven está funcionando bem no desktop (também adicionei mais alguns dados), mas não está aparecendo na versão mobile. Você pode ajudar?

Tópico		Respostas	Visualizações
MD Topic List Mobile component Theme component	61	6861	7 de Abril de 2026
Topic Author Theme component topic-author , end-of-life	63	12648	4 de Outubro de 2024
Sam's Simple Theme Theme official , sams-simple-theme	368	83317	17 de Fevereiro de 2025
Discourse Topic List Author & Posters Theme component	8	250	5 de Fevereiro de 2026
Display Topic Author on Topic List UX	7	2576	8 de Fevereiro de 2021

Componente de Lista de Tópicos MD

Tópicos relacionados