如何在分类的最新列中显示OP头像

支持
1

我想在分类的最新列中显示 OP 头像。
在此

图片
图片2526×1378 327 KB

我阅读了一些关于如何创建组件的文档，并尝试模仿 移动端的 OP 头像 来实现。

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

感谢您的帮助。:heart:

2

我之所以评论是因为我也想要这个！！！我一直因为无法进行此更改而抓狂……

3

您可以尝试此 CSS：

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

image
image1134×899 83.8 KB

您可以定位其他列并设置它们的 order，只要它们具有 display: flex;（如果您想例如将头像放在上次活动和主题名称之间）。

4

@Canapin 它将头像图片移到了右侧，但仍然显示最新发帖者的头像，而不是原始发帖者的头像……

Screen Shot 2022-01-25 at 1.45.56 PM
Screen Shot 2022-01-25 at 1.45.56 PM2412×1326 302 KB

5

有一个 Theme component 显示 Topic Author 而不是最近的发帖人。

7

抱歉，我误解了你的意思。

8

如果您只想在“分类”页面上进行更改，并且不想要 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>

但是，您将覆盖一个模板，因此如果核心中的模板发生更改，您将需要自行更新它。

9

@Moin @saquetim 谢谢！！