作者名字加头像

P2W · 2022 年4 月 26 日 16:14

大家好 - 我们的社区希望在头像之外还能看到帖子作者的姓名。关于如何模仿 Sam’s Simple Theme 上的这种显示方式，有什么建议吗？

Don · 2022 年8 月 16 日 16:10

你好 Mike，

Sam’s Simple Theme 覆盖了 topic-list 模板，并且只显示最近的发布者而不是作者。这里有一个很棒的指南，介绍如何覆盖模板。

核心中有两个模板需要我们覆盖。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
topic-list-header 用于修改头部部分。
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
topic-list-item 用于修改头像和添加用户名。

你可以在这里找到所有模板：https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

让我们开始吧

实际上，我创建了一个主题组件来更轻松地展示它。如果你愿意，可以使用它。

你可以在设置中选择两个列。
默认情况下，它显示最后一篇帖子，但你可以将其更改为显示作者。

主题列表头部
首先，我们需要修改列标题。

我添加了这些行，并删除了发布者和浏览量以及活动列标题。

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/topic-list-header.hbr

438529e70


      
          {{#if (theme-setting 'author_column')}}
            {{raw "topic-list-header-column" sortable=sortable order='created' forceName=(theme-i18n 'author_header')}}
            {{else}}
            {{raw "topic-list-header-column" sortable=sortable order='activity' forceName=(theme-i18n 'last_header')}}
          {{/if}}
          {{~raw-plugin-outlet name="topic-list-header-after"~}}

这将添加 Last Post 或 Author 标题
Last Post

Author

我还添加了一个语言文件来翻译这些…
你可以在这里翻译

主题列表项

我删除了发布者列，并添加了 Last Post 或 Author 列。

Last Post Column

Authors Column with (topic creation) time.

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/list/topic-list-item.hbr

215b70d13


      
          <td class="custom-user-column topic-list-data">
            <div class="custom-user-column-avatar">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.createdAt}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="medium"}}</a>
                {{else}}
                <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
              {{/if}}
            </div>
            <div class="custom-user-column-info">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.firstPostUrl}}">
                  {{format-date topic.createdAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
                {{else}}
                <a href="{{topic.lastPostUrl}}">
                  {{format-date topic.bumpedAt format="tiny"}}
                </a>
                <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>
              {{/if}}

This file has been truncated. show original

最后添加一些 CSS。

github.com/VaperinaDEV/discourse-custom-user-column

desktop/desktop.scss

main

.custom-user-column {
  &.topic-list-data {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: var(--font-0);
    .custom-user-column-info {
      display: flex;
      flex-direction: column;
      a {
        color: var(--primary-high);
        span.relative-date {
          font-weight: 600;
        }
      }
      .editor a {
        font-size: var(--font-down-1);
      }
    }
  }

This file has been truncated. show original

希望有所帮助！你可以与核心模板进行比较，或者如果你使用任何自定义模板，可以进行更改或使用该组件（如果它符合你的需求）。

system · 2023 年2 月 19 日 15:52

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

话题		回复	浏览量
Add column to home page topic list Support	8	1246	2020 年4 月 27 日
Topic List Author Theme component official , topic-list-author	11	3005	2025 年8 月 29 日
Add author to recent Support	2	59	2025 年2 月 7 日
Username of user below topics Support	4	1098	2020 年10 月 31 日
Display Topic Author on Topic List UX	7	2491	2021 年2 月 8 日

作者名字加头像

相关话题