كيفية عرض صورة ملف تعريف OP في أحدث عمود للفئة

I want to display OP avatar in latest column of the category.
Here


I had read some docs about how2create a component and tried to do it by imitating Mobile OP avatars.

https://github.com/scvoet/discourse-desktop-op-avatars

Thanks for your help.:heart:

إعجاب واحد (1)

أنا أعلق على هذا لأنني أريد هذا أيضًا!!! لقد كان هذا يقودني إلى الجنون لأنني لا أستطيع إجراء هذا التغيير…

يمكنك تجربة CSS التالي:

.latest-topic-list-item .topic-poster {
    order: 3;
    text-align: right;
}

يمكنك استهداف أعمدة أخرى وتعيين order لها أيضًا طالما أن لديها display: flex; (إذا كنت تريد على سبيل المثال وضع الصورة الرمزية بين النشاط الأخير واسم الموضوع).

3 إعجابات

@Canapin لقد نقلت صور الأفاتار إلى اليمين، ولكنها لا تزال تعرض صورة الأفاتار للمنشئ الأحدث، بدلاً من المنشئ الأصلي…

يوجد Theme component يعرض Topic Author بدلاً من آخر ناشر.

إعجابَين (2)

عذرًا، لقد أسأت فهم ما كنت تطلبه.

إعجاب واحد (1)

إذا كنت تريد فقط إجراء هذا التغيير في صفحة الفئة ولا تريد التغييرات الأخرى التي سيجريها مؤلف موضوع Discourse، يمكنك تجاوز components/latest-topic-list-item

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs

بشيء مثل ما يلي في السمة الخاصة بك:


    {{plugin-outlet name="above-latest-topic-list-item" connectorTagName="div"}}
    <div class="main-link">
      <div class="top-row">
        {{raw "topic-status" topic=topic}}
        {{topic-link topic}}
        {{#if topic.featured_link}}
          {{topic-featured-link topic}}
        {{/if}}
        {{topic-post-badges unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl}}
      </div>
      <div class="bottom-row">
        {{category-link topic.category}}{{discourse-tags topic mode="list"}}{{! intentionally inline to avoid whitespace}}
      </div>
    </div>
    <div class="topic-stats">
      {{raw "list/posts-count-column" topic=topic tagName="div"}}
      <div class="topic-last-activity">
        <a href={{topic.lastPostUrl}} title={{topic.bumpedAtTitle}}>{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
      </div>
    </div>
    <div class="topic-creator">
      {{#user-link user=topic.creator}}
        {{avatar topic.creator imageSize="large"}}
      {{/user-link}}
      {{user-avatar-flair user=topic.creator}}
    </div>

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

4 إعجابات

@Moin @saquetim شكرا لك!!