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

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

يمكنك تعديل المكون مباشرة وتغيير جزء العنوان ولصق هذا. سيتم استخدام الإصدار الأقدم

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

شكرًا لك على ذلك

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

لقد أنشأت فرعًا مخصصًا لأولئك الذين لا يرغبون في تعديل المكون ولا يستطيعون ترقية منتدى Discourse الخاص بهم حاليًا

يمكنك تثبيت مكون جديد باستخدام الإعدادات المتقدمة

المستودع الذي يحتوي على السمة: https://github.com/iunctis/md-topic-list
اسم الفرع: bf-20200323

ستحصل على المكون المتوافق مع إصدارات Discourse الأقدم من 23 مارس 2020. قبل هذا الالتزام

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

لقد جربت قليلاً عرض قائمة المواضيع على الهاتف المحمول، ولا يزال الأمر بحاجة إلى بعض التحسينات، لكن هل تهتم بشيء مثل هذا (سيكون مكونًا منفصلاً):

عرض قائمة المواضيع الحالي على الهاتف المحمول:

لا يزال الصورة الرمزية تفتح بطاقة المستخدم، بينما الرابط التاريخي يوجه إلى آخر منشور.

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

سأفعل بالتأكيد، سيكون إضافة لطيفة خاصةً لأن التخطيط للجوال وسطح المكتب سيكون متشابهًا بدلاً من أن يبدو مختلفًا تمامًا

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

رابط المعاينة لا يعمل. عند محاولة الوصول، تظهر هذه الرسالة:

تم رفض الوصول

أثناء محاولة تحميل /theme/Steven/md-topic-list.json

حدث خطأ ما.

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

نعتذر عن ذلك، قمت بتنظيف صفحات سمة Discourse الخاصة بي في وقت سابق، لكنني قمت بالتنظيف بشكل مفرط قليلاً

يجب أن يكون الأمر قد تم إصلاحه الآن، شكرًا لتبليغك!

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

مرحبًا @Steven

أنا بالفعل على الإصدار 2.4.1، ومع ذلك لا تزال أيقوناتي الشخصية مفقودة. انظر لقطة شاشة المعاينة للموضوع هنا

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

هل جربت هذا الفرع؟

إذا كانت لديك نسخة من Discourse أقدم من 23 مارس، فستحتاج إلى استخدام هذا الفرع حتى تقوم بترقية منتداك:

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

هل يوجد أي شخص يستخدم مكون هذا القالب مع إضافة معاينات قائمة المواضيع؟ أم أنها تسبب مشاكل في النهاية؟

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

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

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

لقد قمت بإنشاء نسخة مشتقة مخصصة بنفسي إذا أردت الاطلاع على كيفية تنفيذ ذلك: https://github.com/iunctis/discourse-topic-previews
هذه التغييرات تحديدًا - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (لا أنصح حقًا بهذا الإصدار لمنتدىك لأنني أستخدم سمة مخصصة تأتي معه، وقمت بتغيير بعض الأشياء في البلاطات التي قد لا يفضّلها معظم المستخدمين)

توجد قوالب سطح المكتب في الملحق الأصلي هنا، وهذا هو أفضل طريقة للبدء: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

الأمر ممكن تمامًا، لكنك تحتاج إلى أن تكون مرتاحًا بعض الشيء مع GitHub (للبقاء محدثًا مع الملحق) وتخصيص القوالب.

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

لقد قمت للتو بدفع ترقية صغيرة. لا توجد ميزة جديدة، لكنني أضفت التوافق مع دوال الصور المصغرة الجديدة.

مكون السمة متوافق مع هذه المكونات

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ص

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

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

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

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