قائمة مواضيع MD مكون الهاتف المحمول

[Steven]

إنه قابل للتنفيذ

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

{{d-icon \"eye\"}} {{number topic.views numberKey=\"views_long\"}}
و
{{#if hasLikes}}{{d-icon \"heart\"}} <a>{{number topic.like_count}}</a>{{/if}}

بالنسبة لشاشتي، استخدمت هذا:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          The `~` syntax strip spaces between the elements, making it produce
          `<a>Some text</a><span>` ,
          with no space between them.
          This causes the topic-post-badge to be considered the same word as "text"
          at the end of the link, preventing it from line wrapping onto its own line.
        --}}
        {{raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{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}}
          {{#if expandPinned }}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory}}
            <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>
            {{else}}
            {{raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}">
          <a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
        </span>
      </div>
    </div>
</td>
</script>

[Heliosurge (Dan DeMontmorency)]

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

[Steven]

بالنسبة لبعض الأيقونات، تحتاج إلى تسجيل حرف خط Font Awesome الذي يتوافق معها.

تحقق من الإعداد svg icon subset وأضف fa-eye

[Heliosurge (Dan DeMontmorency)]

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

[Heliosurge (Dan DeMontmorency)]

كل شيء يعمل بشكل جيد في Stable. ولكن يبدو أن اختبار passed لا يعرض المشاهدات أو الإعجابات. حتى في المعاينة للتأكد من أن المكونات الأخرى لا تتداخل مع أشياء مثل سمة Air. المكون الأساسي الخاص بك يعمل كما هو مقصود. الامتداد لا يعرض المشاهدات أو الإعجابات.

[satonotdead]

عذرًا، ولكن ماذا يعني الرمز الأحمر؟ هل هو مثل علامة أو شيء من هذا القبيل؟

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

شكراً للمشاركة!

[Steven]

لقد واجهت بعض المشاكل مع وسم d-icon في حال عدم وجود أي وسوم.

لقد جربت حلاً جديدًا الآن، لقد دفعت تحديثًا، لاستخدام أيقونة font-awesome بدلاً من الرموز التعبيرية، أخبرني إذا كان يعمل بشكل جيد.

تعديل: تم التراجع، إنه يعمل على سطح المكتب ولكن ليس على الهاتف المحمول.

إذا كنت ترغب في تجربته، فهذا هو الـ CSS الذي يمكنك استخدامه:

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}

[digitaldominica]

مرحباً، خيار التحديد بالجملة على الهاتف المحمول لا يعمل عند تمكين مكون السمة هذا.

[Steven]

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

[digitaldominica]

شكرا لك، لقد تم حل المشكلة بالنسبة لي.

[Steven]

لا أرى طريقة لجعل الأمر يعمل مع قائمة مواضيع Glimmer الجديدة

أعتقد أنه سيتم التخلي عن مكون السمة هذا. في الوقت الحالي، يمكننا وضع علامة عليه كـ deprecated

قد أجرب شيئًا جديدًا باستخدام منافذ الإضافات فقط، لكنه بالتأكيد لن يكون له نفس المظهر.

[CAX.DO (Max)]

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

[Canapin (Coin-coin le Canapin)]

معجب جدًا بهذه المكونة لأنني أجد العرض الافتراضي للجوال دون المستوى (صورة الرمز المميز لآخر ناشر على اليسار هي أغرب شيء). سيكون من المؤسف التخلي عنها، للأسف لا يمكنني البرمجة، ولا يمكن لـ ChatGPT أيضًا في هذا الشأن

[Arkshine]

سأجرب ذلك!

[Arkshine]

لقد قدمت طلب سحب

DEV: Modernize using plugin outlet

[Steven]

عمل رائع!
لم تتح لي الفرصة لتجربته بعد، هل تمكنت من الحصول على شارة الموضوع (المشاركات غير المقروءة) أيضًا؟ لقد أجريت بعض الاختبارات ولم تكن شارة الموضوع بجوار عنوان الموضوع سهلة الإضافة
لكنني لست قريبًا من مستواك

[Arkshine]

@Steven لم أختبر! مع التعديلات الحالية، لا يتم استبدال أي شيء، لذا يمكنك توقع عرضه (ولكن ربما ليس في المكان المتوقع).

تحرير:
هذا ما يبدو عليه:

العرض الأصلي بدون المكون يبدو كالتالي:

هل ما زلت تريد استبدال الصورة الرمزية أم أنها على ما يرام كما هي؟
دعني أرى ما إذا كان بإمكاني استبدال الصورة الرمزية.

تحرير 2:

DEV: Show topic post badges in place of the avatar when available

[Steven]

شكرا @Arskshine على العمل الذي قمت به!

لقد عملت قليلاً على المكون، ولدي اقتراح لكم جميعًا.

هذه هي الواجهة الحالية:

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

ماذا تريدون للإصدار الرسمي؟

[CAX.DO (Max)]

مرحباً @Steven @Arkshine
شكراً جزيلاً على عملكم.

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

هل من الممكن زيادة طول العناوين في الإصدار الجديد؟ أحد أهداف استخدام هذا المكون هو عرض المزيد من المعلومات.

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

[CAX.DO (Max)]

لقد حاولت إضافة جزء CSS هذا، وقد نجح.

td .main-link {
    width: 100%;
    display: inline-block;
}