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 摘要 gist 配合使用效果良好。

:gear: 设置项

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

设置项 说明
主题列表作者头像大小 主题列表页面路由中作者头像列的头像大小 - small(小)、medium(中)或 large(大)。
主题列表作者头像圆角 主题列表页面路由的头像圆角:0% = 方形 → 50% = 圆形。tab_style = 左侧圆角
主题列表仅显示最后一名发帖人 仅在发帖人列中显示最后一名发帖人的头像,但前提是主题中有多于一名参与者。
垂直对齐行至顶部 切换开关,用于将行内容对齐至顶部或中间
在分类页面显示作者 在分类页面的主题列表中,显示作者头像而非最新发帖人头像。
分类页面主题头像大小 分类页面主题列表中作者头像列的头像大小 - small(小)、medium(中)或 large(大)。
分类页面头像圆角 分类页面的头像圆角:0% = 方形 → 50% = 圆形。tab_style = 左侧圆角

:camera_flash: 截图

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

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

使用默认设置:

使用展开的摘要 gist 的大尺寸 tab_style 头像形状:

小尺寸头像,15% 圆角形状,并启用 Topic_list_show_last_poster_only

中等尺寸头像,0% 圆角(方形),启用 Topic_list_show_last_poster_only,并展开摘要 gist:

分类页面截图,展示作者或最后一名发帖人的两种不同大小和形状的头像。

默认组件设置,中等尺寸圆形头像,并启用 Show_author_on_categories_page

大尺寸 tab_style 头像,并禁用 Show_author_on_categories_page

移动设备尺寸视图截图

使用 tab_style 作者头像:


:backhand_index_pointing_right:t3: 注意事项

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

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

  • 添加移动设备禁用切换开关?
  • 分类和标签排除?
  • 从左到右(RTL)支持?
  • 发帖人头像形状化?

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


查看我的其他 Discourse 内容
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 个赞