مكون قائمة موضوعات MD

Steven · 27 مارس 2020، 1:46م

You can edit the component directly and change the header part and paste this. It will use the older 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 · 27 مارس 2020، 5:05م

Thank you for that

Steven · 27 مارس 2020، 5:31م

I created a specific branch for those who don’t want to edit the component and can’t upgrade their discourse forum right now

You can install a new component, use the advanced settings

Repository containing theme: https://github.com/iunctis/md-topic-list
Branch name: bf-20200323

You’ll have the component compatible with the version Discourse older than march 23, 2020. Before this commit

Steven · 30 مارس 2020، 7:59م

I was playing a bit with the topic list presentation on mobile, it still needs some work but would you be interested with something like this (it would be a separate component):

The current topic list mobile presentation:

The avatar still opens the user card, the date links to the last post

ScammerRevolts · 31 مارس 2020، 6:55ص

I definitely would, would be a nice addition especially since the layout for mobile and desktop would be similar instead of looking totally different

jrgong · 31 مارس 2020، 8:45م

The preview link doesn’t work. When I try to access, I get this error message:

Access Denied

while trying to load /theme/Steven/md-topic-list.json

Something went wrong.

Steven · 31 مارس 2020، 8:48م

Sorry about that, I cleaned up my Discourse theme pages earlier but I cleaned a bit too much

It should be fixed now, thanks for reporting!

jrgong · 4 أبريل 2020، 10:14ص

Hey @Steven

I am on 2.4.1 already, yet my avatars are still gone. See my topic preview screenshot her

Steven · 4 أبريل 2020، 11:21ص

Have you tried this branch?

If you have a Discourse version older than march 23rd, you need to use this branch until you upgrade your forum:

jrgong · 25 أبريل 2020، 1:03م

Is anyone running this theme component in combination Topic List Previews plugin. Or is it causing issues after all?

I am currently using Sam’s minimal theme, but it’s not working with Topic List Previews at its current state. So I am considering switching to be able to have both: Minimalistic topic list and image previews of topics

Steven · 25 أبريل 2020، 1:10م

It’s expected, the topic list previews plugin override the topic list items templates, so as this theme component. I think the plugin has the edge over the theme component, so I think the best way to has both is to fork the topic list previews plugin and customize the templates.

I did a customized fork myself if you want to check how it can be done : https://github.com/iunctis/discourse-topic-previews
These changes specifically - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (I don’t really recommand this version to your forum because I have a customized theme that comes with it, and I changed a few things in the tiles most users wouldn’t like)

The desktop templates in the original plugin are here, this is the best way to start : https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

It’s totally doable but you need to be a bit confortable with github (to stay up to date with the plugin) and template customization.

Steven · 19 مايو 2020، 7:51م

I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.

The theme component is compatible with these components

nory · 7 يوليو 2020، 7:09م

مرحبًا، هل هو متوافق أيضًا مع هذا الإضافة؟ Topic List Previews (legacy)
شكرًا لك،
ديب

Steven · 7 يوليو 2020، 8:15م

للأسف لا، نظرًا لأننا نعدّل نفس الملف.

يمكنك جعل كليهما يعملان إذا قمت بتغيير كود الرأس ودمج نمط البلاطات مع تعديلاتي، لكن ذلك يتطلب بعض الفهم لكيفية عمل هذا النظام.

يمكنك الاستفادة من الإلهام في نسختي المخصصة القديمة من معاينة قائمة المواضيع (كان ذلك قبل مكون موضوع الصور المصغرة الرسمي، لذا قد لا يعمل حاليًا): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
لكنه استخدم فئات CSS مختلفة ومحاذاة لبعض العناصر، وقد لا يعمل ذلك مع منتداك.

pinder99 · 20 يناير 2021، 10:20ص

مرحبًا @Steven، أستخدم إضافة الخاص بك منذ فترة، وقمت بإزالة تبويب النشاط وتبويب العرض من الموضوع حتى أتمكن من نقلهما أسفل المواضيع مثل إضافتك، لكنني لم أتمكن من النجاح. هل يمكنك مساعدتي؟ أريد فقط إضافة التاريخ (النشاط) مثل الصورة أدناه

Steven · 20 يناير 2021، 12:57م

أولاً، تحتاج إلى تغيير هيكل الجدول وحذف أعمدة تبويبات “المشاهدة” و"النشاط"

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

يمكنك أيضًا حذف السطر الأخير إذا كنت ترغب في حذف عمود الردود.

الآن، لننتقل إلى الجزء الأكبر المتعلق بالمحتوى. أولاً، قمت بحذف العمودين:

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

بعد ذلك، نضيف المحتوى الذي نريده. لن أذكر جميع التفاصيل المطلوبة لأنها تتطلب بعض العمل، لكن الشكل النهائي يجب أن يكون كالتالي:

<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>بدأ <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> بواسطة <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}}">آخر منشور {{format-date topic.bumpedAt format="tiny"}}</a> بواسطة <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>

لكن هذا مجرد مسودة أولية ولم أجربه بعد. قد تحتاج إلى إضافة بعض فئات الـ span، أو تغيير تنسيق التاريخ (باستخدام format=“medium” بدلاً من tiny؟)، لكن الهيكل العام يجب أن يكون مقبولاً إلى حد كبير.

pinder99 · 20 يناير 2021، 1:02م

شكرًا جزيلاً حقًا @Steven، هذا هو بالضبط ما أحتاجه، أقدر ردك السريع. هناك أمر واحد فقط: لا يوجد فراغ بين “admin” و “Last post”، كيف يمكنني إضافة بعض المسافة بينهما؟

Steven · 20 يناير 2021، 1:29م

أضفت <br>، لكن يبدو أن الأمر لم ينجح. يمكنك وضعه داخل وسم <span> أو استخدام   لإجبار بعض المسافات إذا لم تكن مرتاحًا لإضافة عنصر class داخل وسم <span>.

pinder99 · 20 يناير 2021، 2:39م

عمل nbsp كسحر

pinder99 · 22 يناير 2021، 8:37ص

@ستيفن، الأمر يعمل بشكل جيد على سطح المكتب (وأضفت أيضًا بعض البيانات الإضافية)، لكنه لا يظهر في النسخة المحمولة. هل يمكنك المساعدة؟

الموضوع		الردود	مرات العرض
MD Topic List Mobile component Theme component	61	6763	7 أبريل 2026
Topic Author Theme component topic-author , end-of-life	63	12615	4 أكتوبر 2024
Sam's Simple Theme Theme official , sams-simple-theme	368	82797	17 فبراير 2025
Discourse Topic List Author & Posters Theme component	8	216	5 فبراير 2026
Display Topic Author on Topic List UX	7	2568	8 فبراير 2021

مكون قائمة موضوعات MD

الموضوعات ذات الصلة