Composant de la liste des sujets MD

[Steven]

Vous pouvez modifier directement le composant, changer la partie en-tête et coller ceci. Cela utilisera l’ancienne version

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

Merci beaucoup

[Steven]

J’ai créé une branche spécifique pour ceux qui ne souhaitent pas modifier le composant et qui ne peuvent pas mettre à jour leur forum Discourse pour le moment.

Vous pouvez installer un nouveau composant en utilisant les paramètres avancés.

Dépôt contenant le thème : https://github.com/iunctis/md-topic-list
Nom de la branche : bf-20200323

Vous obtiendrez ainsi le composant compatible avec les versions de Discourse antérieures au 23 mars 2020, c’est-à-dire avant ce commit.

[Steven]

J’ai un peu joué avec la présentation de la liste des sujets sur mobile. Cela nécessite encore quelques ajustements, mais seriez-vous intéressé par quelque chose comme ça (ce serait un composant séparé) :

La présentation actuelle de la liste des sujets sur mobile :

L’avatar ouvre toujours la carte de l’utilisateur, et la date renvoie vers le dernier message.

[ScammerRevolts]

Je le ferais certainement, ce serait un bel ajout, surtout car la mise en page pour mobile et ordinateur de bureau serait similaire au lieu d’être totalement différente

[jrgong]

@Steven

Affichez le composant de thème sur le forum du créateur de thèmes

Créateur de thèmes Discourse

‘MD Topic List’ par @Steven

Un thème pour Discourse partagé sur theme-creator.discourse.org

Le lien d’aperçu ne fonctionne pas. Lorsque j’essaie d’y accéder, j’obtiens ce message d’erreur :

Accès refusé

en essayant de charger /theme/Steven/md-topic-list.json

Quelque chose s’est mal passé.

[Steven]

Désolé pour ça, j’ai nettoyé mes pages de thème Discourse plus tôt, mais j’ai un peu trop nettoyé

Cela devrait être corrigé maintenant, merci de l’avoir signalé !

'MD Topic List' by @Steven

[jrgong]

Salut @Steven,

Je suis déjà sur la version 2.4.1, mais mes avatars ont toujours disparu. Voici un aperçu de mon sujet dans une capture d’écran :

[Steven]

Avez-vous essayé cette branche ?

Si vous utilisez une version de Discourse antérieure au 23 mars, vous devez utiliser cette branche jusqu’à ce que vous mettiez à jour votre forum :

@Steven

J’ai créé une branche spécifique pour ceux qui ne souhaitent pas modifier le composant et ne peuvent pas mettre à jour leur forum Discourse pour le moment.

Vous pouvez installer un nouveau composant et utiliser les paramètres avancés.

Dépôt contenant le thème : https://github.com/iunctis/md-topic-list
Nom de la branche : bf-20200323

Vous aurez le composant compatible avec les versions de Discourse antérieures au 23 mars 2020. Avant ce commit

[jrgong]

Est-ce que quelqu’un utilise ce composant de thème en combinaison avec le plugin Aperçus de la liste des sujets ? Ou cela pose-t-il des problèmes après tout ?

J’utilise actuellement le thème minimaliste de Sam, mais il ne fonctionne pas avec Aperçus de la liste des sujets dans son état actuel. Je envisage donc de changer pour pouvoir avoir à la fois : une liste de sujets minimaliste et des aperçus d’images des sujets.

[Steven]

C’est prévisible : le plugin d’aperçus de la liste des sujets remplace les modèles des éléments de cette liste, tout comme ce composant de thème. Je pense que le plugin a l’avantage sur le composant de thème, donc la meilleure façon d’avoir les deux est de créer une version forkée du plugin d’aperçus de la liste des sujets et de personnaliser les modèles.

J’ai moi-même créé une version forkée personnalisée si vous souhaitez voir comment cela peut être fait : https://github.com/iunctis/discourse-topic-previews
Ces modifications spécifiques : https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (Je ne recommande pas vraiment cette version pour votre forum, car elle est accompagnée d’un thème personnalisé et j’ai modifié quelques éléments dans les vignettes que la plupart des utilisateurs n’apprécieraient pas).

Les modèles pour ordinateur du plugin original se trouvent ici ; c’est le meilleur point de départ : https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

C’est tout à fait réalisable, mais il faut être un peu à l’aise avec GitHub (pour rester à jour avec le plugin) et avec la personnalisation des modèles.

[Steven]

Je viens de pousser une petite mise à jour. Aucune nouvelle fonctionnalité, mais j’ai ajouté la compatibilité avec les nouvelles fonctions de vignettes.

Le composant de thème est compatible avec ces composants :

Topic List Thumbnails

Summary Topic List Thumbnails allows you to show topic thumbnails in topic list views. Preview Preview on Discourse Theme Creator (blog style) Preview on Discourse Theme Creator (grid) Preview on Discourse Theme Creator (list) Preview on Discourse Theme Creator (masonry) Preview on Discourse Theme Creator (minimal grid) Repository Link https://github.com/discourse/discourse-topic-thumbnails New to Discourse Themes? Begi…

Topic List Excerpts

Summary Topic List Excerpts allows you to enable excerpts for unpinned topics (by default, Discourse only displays topic excerpts for pinned topics). Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-topic-excerpts New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features [topic list excerpts example] Works great alo…

[nory]

Bonjour, est-ce compatible avec ce plugin également ? Topic List Previews (legacy)
Merci,
Deb

[Steven]

Malheureusement, non, car nous modifions le même fichier.

Vous pouvez faire fonctionner les deux en modifiant le code de l’en-tête et en intégrant le style des vignettes avec mes modifications, mais cela nécessite une certaine compréhension du fonctionnement de l’ensemble.

Vous pouvez vous inspirer de mon ancienne version personnalisée de l’aperçu de la liste des sujets (elle date d’avant le composant officiel du thème des miniatures, il est donc possible qu’elle ne fonctionne plus actuellement) : https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr

Cependant, elle utilisait des classes CSS et des alignements différents pour certains éléments, ce qui peut ne pas fonctionner avec votre forum.

[pinder99 (Raza shield)]

Bonjour @Steven, j’utilise ton plugin depuis un certain temps. J’ai supprimé l’onglet « Activité » et l’onglet « Vue » des sujets afin de les placer sous les sujets, comme le fait ton plugin, mais je n’y arrive pas. Pourrais-tu m’aider ? Je souhaite simplement ajouter la date (activité) comme sur l’image ci-dessous.

[Steven]

Tout d’abord, vous devez modifier la structure du tableau et supprimer les colonnes des onglets « vue » et « activité »

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

Vous pouvez également supprimer la dernière ligne si vous souhaitez retirer la colonne des réponses.

---

Ensuite, passons à la partie principale concernant le contenu. J’ai d’abord supprimé les deux colonnes.

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

Ensuite, nous ajoutons le contenu souhaité. Je ne vais pas détailler toutes les étapes nécessaires car cela demande un peu de travail, mais le résultat devrait ressembler à ceci :

<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>Créé le <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> par <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}}">Dernier message {{format-date topic.bumpedAt format="tiny"}}</a> par <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>

Ceci n’est qu’une première ébauche et je ne l’ai pas testée. Vous devrez peut-être ajouter des classes span, modifier le format de la date (par exemple en utilisant format="medium" au lieu de tiny), mais la structure devrait être globalement correcte.

[pinder99 (Raza shield)]

Vraiment merci @Steven, c’est exactement ce dont j’avais besoin, j’apprécie vraiment la réactivité. Juste une dernière chose : il n’y a pas d’espace entre « admin » et « Dernier message ». Comment puis-je ajouter un peu d’espace entre les deux ?

[Steven]

J’ai ajouté un <br>, c’est étrange, ça n’a pas pris. Tu peux le mettre dans la balise span ou utiliser   pour forcer un espacement si tu n’es pas à l’aise avec l’ajout d’un élément de classe dans la balise span.

[pinder99 (Raza shield)]

nbsp a fonctionné comme par magie

[pinder99 (Raza shield)]

@Steven, cela fonctionne parfaitement sur ordinateur (j’ai également ajouté quelques données supplémentaires), mais cela n’apparaît pas sur la version mobile. Peux-tu m’aider ?