J’ai créé un composant distinct pour mobile :
@Steven, pouvons-nous également ajouter « dernier message par » dans une boîte de catégorie sur la page d’index ou l’accueil, configurée uniquement pour les catégories ?
Vous devrez réécrire un modèle : il y a trop d’options pour que je puisse l’intégrer dans mon composant, mais cela peut être fait dans votre section de personnalisation.
Je suppose que vous devriez utiliser les boîtes de catégories avec les sujets et réécrire ce modèle : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@Steven merci encore et une dernière chose : si je choisis des catégories avec les derniers ou les meilleurs sujets, je ne peux pas voir « Dernier message par » sur la page d’accueil, mais il est visible à l’intérieur des sections de catégories.
Je ne suis pas sûr de quel modèle est utilisé dans ce scénario ; il figure probablement sur cette liste : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components
Mais je ne suis pas certain duquel, ma meilleure hypothèse est celui-ci : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
1 « J'aime »
Je pense que c’est « catégories avec sujet », mais cela ne fonctionne pas. @Steven, peux-tu partager ce que je dois ajouter pour avoir uniquement « dernier message par » sous les sujets ?
@Steven Je viens de faire une PR pour corriger ce composant dans le nouvel environnement ‘ember cli’ :
2 « J'aime »
Merci, je l’ai fusionné dès que possible, tout le monde peut mettre à jour en toute sécurité
2 « J'aime »
Félicitations pour le composant, je l’ai beaucoup aimé ! est-il possible d’utiliser le composant et de placer l’avatar de la personne qui a créé le sujet avant le sujet ? Si oui, comment faire ? Un exemple de ce que je veux dire
La photo d’avatar avant le sujet serait celle du créateur, et l’avatar à la fin du sujet serait celui de la dernière personne ayant posté, comment faire ?
[image]
J’ai utilisé une partie du composant de thème @dax pour afficher l’avatar de l’auteur : Topic Author
Voici les parties à ajouter dans la section Header
<td class='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
à l’intérieur de <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...) </script>
Et
{{raw "topic-list-header-column" number='true'}}
à l’intérieur de <script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...) </script>
Voici le code complet que vous pouvez utiliser
<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='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
{{~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}}
{{#if showLikes}}
<td class="num likes topic-list-data">
{{#if hasLikes}}
<a href='{{topic.summaryUrl}}'>
{{number topic.like_count}} {{d-icon "heart"}}</td>
</a>
{{/if}}
{{/if}}
<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser 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'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#if canBulkSelect}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
{{/if}}
</th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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'}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>
<script type="script/discourse-plugin">
(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>
1 « J'aime »
Merci beaucoup de m’avoir répondu, pour une raison quelconque, l’interface utilisateur de mon forum n’est pas la même que celle de l’image que vous avez publiée, l’avatar dans le coin droit est en haut et le @ de la personne qui a posté est en bas, cela casse totalement l’interface utilisateur. (Il y a beaucoup d’espace entre certains sujets et pas d’autres, dans une confusion) comment puis-je le mettre de côté avec les informations sur le côté ? (Comme votre photo ?) Et l’avatar à gauche est la personne qui a posté en dernier, y a-t-il un moyen de le changer pour la personne qui a créé le sujet ? (Pendant que l’avatar dans le coin droit serait la dernière personne qui a posté ?) Puisque je vais laisser l’avatar dans le coin droit pour le créateur du sujet, y a-t-il un moyen de supprimer le nom de la personne qui a créé le sujet à côté du nom de la catégorie ?
Je ne suis pas sûr d’avoir tout compris, je suppose que les problèmes de mise en page proviennent d’un CSS personnalisé de votre part.
Voici une version corrigée pour vous :
<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='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
{{~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}}
{{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 topic-list-data">
{{#if hasLikes}}
<a href='{{topic.summaryUrl}}'>
{{number topic.like_count}} {{d-icon "heart"}}</td>
</a>
{{/if}}
{{/if}}
<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
</script>
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#if canBulkSelect}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
{{/if}}
</th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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-plugin-outlet name="topic-list-header-after"~}}
</script>
<script type="script/discourse-plugin">
(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>
Ajoutez ceci pour corriger le site de la première colonne
.topic-list .author {
width: 50px;
}
Cela devrait être plus proche de ce que vous recherchez.
Merci, Steven. C’est exactement ce que j’essayais d’accomplir !
Prévoyez-vous de fusionner ce mod dans votre composant de thème ? Ce serait une grande chose pour moi.
Cordialement,
Je n’ai pas l’intention de le faire, je considère ces deux composants comme des concepts différents. Mais vous pouvez facilement créer votre propre fusion dans votre section Personnaliser pour utiliser l’exemple que j’ai donné précédemment.
3 « J'aime »
Bonjour, l’icône de balise ne s’affiche pas dans les listes de sujets de catégorie sur mon thème, lorsque j’utilise ce composant.
Utilisez-vous le composant Tag Icons ? Il s’affiche de mon côté. Quel est votre thème ?
Non, ce n’est pas le cas. Sur le composant mobile de la liste de sujets md, il affiche l’icône de balise, mais pas sur celui-ci. Je viens de le désactiver et je vais essayer les icônes de balise.
Dans le paramètre du forum svg icon subset, avez-vous configuré une icône ?
Si vous avez fa-tag, vous devriez le supprimer dans ce paramètre
1 « J'aime »
