Discourse 主题列表作者与发帖人

:information_source: 摘要 在主题列表页面的左列添加主题作者,并提供一个选项,仅在默认作者栏中显示最近发帖人。作者头像的大小和形状也可调整。
:eyeglasses: 预览 https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: 代码仓库 https://github.com/Lillinator/discourse-topic-list-author-posters
:question: 安装指南 如何安装主题或主题组件
:open_book: 初次接触 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

:woman_technologist:t2: 概述

此 Discourse 主题组件会将主题作者的头像插入到所有主题列表路由的第一列,并提供设置项供管理员指定头像的形状和大小。此外,作者头像不会显示在发帖人列表的第一个位置。

还有一个设置项,可让发帖人头像列仅显示最新(最近)的发帖人,但前提是主题中有多于一名参与者。因此,只有当主题中存在其他发帖人时,作者头像才会显示。

此外,管理员还可以选择在类别页面显示主题作者(当启用了最新主题列表视图时,即“包含最新主题的类别”),同时提供头像大小和形状的选项。

另有一个开关用于垂直对齐行内容,可选择顶部对齐或居中对齐。

在小视口(移动设备尺寸)下,作者头像将出现在最新发帖人头像的位置。

此组件与 主题列表摘要Discourse AI 摘要片段 配合使用效果良好。

:gear: 设置项

组件管理页面中显示默认选项的设置截图

设置项 描述
Topic list author avatar size 主题列表页面路由中作者头像列的头像大小 - small(小)、medium(中)或 large(大)。
Topic list author avatar border radius 主题列表页面路由中的头像圆角:0% = 方形 → 50% = 圆形。tab_style = 左侧圆角
Topic list show last poster only 仅在发帖人列中显示最后一个发帖人的头像,但前提是主题中有多于一名参与者。
Vertically align row top 切换行内容垂直对齐方式:顶部或居中
Show author on categories page 在类别页面的主题列表中,显示作者头像而非最新发帖人头像。
Category page topic avatar size 类别页面主题列表中作者头像列的头像大小 - small(小)、medium(中)或 large(大)。
Category page avatar border radius 类别页面中的头像圆角:0% = 方形 → 50% = 圆形。tab_style = 左侧圆角

:camera_flash: 截图

以下是不同头像大小和形状设置的截图,同时展示了展开的 AI 摘要片段。

启用不同组件设置的各类主题列表页面截图,展示紧凑和展开片段模式,以及展开/折叠侧边栏

使用默认设置:

使用 tab_style 形状的大号头像并展开摘要片段:

启用 Topic_list_show_last_poster_only 并设置 15% 圆角的小号头像:

启用 Topic_list_show_last_poster_only 并展开摘要片段,使用 0% 圆角(方形)的中号头像:

类别页面截图,展示两种不同大小和形状的头像,包含作者或最新发帖人

使用默认组件设置,启用 Show_author_on_categories_page,并采用中等大小的圆形头像:

使用大号 tab_style 形状头像并禁用 Show_author_on_categories_page

移动端视图截图

使用 tab_style 形状的作者头像:


:backhand_index_pointing_right:t3: 注意事项

  • 在个人资料页面标签中,按预期插入作者头像并修改发帖人列。
  • 移动端行为与主题页脚列表(推荐/相关主题)以及个人资料和收件箱标签页中的默认行为一致。
  • 与 Horizon 主题兼容性不佳。:slight_smile:

:bulb: 未来可能的待办事项

  • 添加移动端禁用开关?
  • 类别和标签排除选项?
  • 支持从左到右(LTR)布局?
  • 为发帖人头像设置形状?

:hugs: 一如既往,感谢 @Moin 提供的想法、反馈和调试帮助。

13 个赞

感谢您制作这个,它立即为我解决了一个潜在的问题!

也许这已经在计划中了,我想提一下我注意到左侧海报头像列的内边距和对齐方式有一个奇怪的缩进(与禁用组件的移动设备上不同,作为比较)。这看起来像是 td.posters 的 text-align 属性也影响了图像。
启用后,海报头像列表的对齐方式也会改变,这看起来像是 td.topic-list-data 的对齐方式覆盖了默认设置。如果您对这些其他方面满意,我自己修改样式表也很容易。

很棒的组件,再次感谢。

1 个赞

感谢您的报告,我刚刚推送了一个修复。请更新组件并告知我这是否有帮助。

1 个赞

头像在桌面端左对齐效果更好。我添加了以下 CSS 来根据我的偏好调整中间海报的列:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

我认为您未来禁用的移动端设置也会有帮助,因为样式占用的空白空间有点多余。

顶部的垂直对齐是故意的,以与其余的主题卡保持一致,不会更改。
我没有对移动端做任何更改,但我会看一下。

垂直对齐方式可能在您的 CSS 中应用得过于宽泛,可能只需要针对您使用 td.topic-list-datacustom-author-column。我怀疑将目标更改为 td.custom-author-column.topic-list-data 将会解决问题,并消除在我这边需要自定义样式来修复的必要性。

不,我本来是希望“海报”列与其他所有行元素一起垂直对齐到顶部。居中对齐(尤其是在启用摘录或 AI 摘要时)看起来很突兀,但我想这只是个人品味问题,您可以根据自己的喜好进行调整。

我为移动端推送了一个小的更改。

3 个赞

由于我的论坛不使用摘录、gist 或 AI 摘要,因此首选默认的 Discourse 外观。在我看来,这个更改更适合在专用的主题组件中进行,但我们的看法不同,我已经在我这边修复了它,所以没有芥蒂。

移动端看起来好了一点,谢谢!

@jordanjay29 经过进一步考虑,我决定添加一个对齐切换(这很容易)。

给你 :slight_smile:

有一个新的设置 Vertically align row top(垂直对齐行顶部),你可以禁用它以获得默认的居中对齐。告诉我这是否对你有用。


4 个赞