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

Steven · 22 يناير 2021، 12:28م

I created a separate component for mobile :

pinder99 · 26 يناير 2021، 11:00ص

@Steven can we also add “last post by” inside a category box on the index or homepage which is set to categories only

Steven · 26 يناير 2021، 3:43م

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

pinder99 · 28 يناير 2021، 10:13ص

@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

Steven · 28 يناير 2021، 3:48م

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

pinder99 · 2 فبراير 2021، 5:18ص

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

david · 26 يناير 2022، 3:35م

@Steven لقد قمت للتو بإنشاء طلب سحب لإصلاح هذه المكونة ضمن بيئة ‘ember cli’ الجديدة:

Steven · 26 يناير 2022، 4:48م

شكراً، لقد قمت بدمجها في أسرع وقت ممكن، يمكن للجميع التحديث بأمان

danielabc · 19 فبراير 2022، 10:30ص

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

ستكون الصورة الرمزية قبل الموضوع هي صورة المنشئ، والصورة الرمزية في نهاية الموضوع هي صورة آخر ناشر، كيف أفعل ذلك؟

[image]

Steven · 19 فبراير 2022، 12:32م

لقد استخدمت جزءًا من مكون سمة @dax لعرض صورة المؤلف الرمزية: Topic Author

هذه هي الأجزاء التي يجب إضافتها في قسم 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>

داخل <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...) </script>

و

{{raw "topic-list-header-column" number='true'}}

داخل <script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...) </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='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>

danielabc · 20 فبراير 2022، 5:15ص

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

Steven · 20 فبراير 2022، 11:40ص

لست متأكدًا من أنني فهمت كل شيء، أفترض أن مشكلات التخطيط تأتي من ملف CSS مخصص من جانبك.

إليك نسخة مصححة لك:

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

أضف هذا لإصلاح جانب العمود الأول

.topic-list .author {
    width: 50px;
}

يجب أن يكون أقرب إلى ما تبحث عنه

profcaju · 26 فبراير 2023، 5:29ص

شكراً لك يا ستيفن. كنت أحاول تحقيق هذا بالضبط!

هل تخطط لدمج هذا التعديل في مكون السمة الخاص بك؟ سيكون هذا شيئًا كبيرًا بالنسبة لي.

مع خالص التقدير،

Steven · 26 فبراير 2023، 7:40م

لا أخطط للقيام بذلك، فأنا أرى هذين المكونين كمفهومين مختلفين. ولكن يمكنك بسهولة إنشاء دمجك الخاص في قسم التخصيص الخاص بك لاستخدام المثال الذي قدمته من قبل.

digitaldominica · 30 ديسمبر 2023، 1:29م

مرحباً، أيقونة العلامة لا تظهر في قوائم مواضيع الفئات في السمة الخاصة بي عند استخدام هذا المكون.

Arkshine · 30 ديسمبر 2023، 2:32م

هل تستخدم المكون https://meta.discourse.org/t/tag-icons/109757؟ إنه يظهر من جانبي. ما هو القالب الخاص بك؟

digitaldominica · 30 ديسمبر 2023، 2:34م

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

Steven · 2 يناير 2024، 12:56م

في إعداد المنتدى svg icon subset هل قمت بإعداد أيقونة؟

إذا كان لديك fa-tag فيجب عليك حذفه في هذا الإعداد

Ahmed26 · 21 مارس 2024، 3:00م

عندما أطبق هذا المكون
زر الضبط على الإطار غير مرئي

Steven · 21 مارس 2024، 5:26م

هل تستخدم مكون سمة آخر أو بعض التعديلات الثقيلة على CSS في السمة الخاصة بك؟ لا ينبغي أن تتصرف بهذه الطريقة

إنها أشبه بهذا:

الموضوع		الردود	مرات العرض
Topic Author Theme component end-of-life , topic-author	63	12395	4 أكتوبر 2024
MD Topic List Mobile component Theme component	57	6358	7 سبتمبر 2025
Sam's Simple Theme Theme official , sams-simple-theme	368	81538	17 فبراير 2025
Display Topic Author on Topic List UX	7	2490	8 فبراير 2021
Topic List Author Theme component official , topic-list-author	11	2994	29 أغسطس 2025

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

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