I created a separate component for mobile :
@Steven can we also add “last post by” inside a category box on the index or homepage which is set to categories only
You will need to rewrite a template, there are too many options for me to add this in my component, but it can be done in your customize section
My guess is you should use categories boxes with topics and rewrite this template : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@Steven thanks again and one last thing if i choose categories with latest or top topics then i am unable to see the "Last Post BY " on index page but it is visible inside the category sections
I’m not sure what templates is used in this scenario, it’s probably on this list : https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components
But I’m note sure which one, my best guess is this one : https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
1 « J'aime »
I think it is “categories with topic “ but it is not working , @Steven can you share what i need to add for just “last post by “ below topics
@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 »
