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

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

لقد أنشأت مكونًا منفصلًا للجوال:

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

@ستيفن، هل يمكننا أيضًا إضافة “آخر منشور بواسطة” داخل مربع فئة في الفهرس أو الصفحة الرئيسية والتي تُعدّ للفئات فقط

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

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

أعتقد أنك يجب أن تستخدم مربعات الفئات مع المواضيع وإعادة كتابة هذا القالب: 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 · 28 يناير 2021، 3:48م

لست متأكدًا من القالب المستخدم في هذا السيناريو، على الأرجح أنه موجود في هذه القائمة: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components

لكنني لست متأكدًا من أي واحد، وأفضل تخميني هو هذا: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs

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

أعتقد أنه «الفئات مع الموضوع» لكنه لا يعمل، @ستيفن، هل يمكنك مشاركة ما أحتاج لإضافته فقط لـ «آخر مشاركة بواسطة» أسفل المواضيع؟

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 في السمة الخاصة بك؟ لا ينبغي أن تتصرف بهذه الطريقة

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

الموضوع		الردود	مرات العرض
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

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