Discourse 主题列表 作者与发帖人

:information_source: 摘要 在主题列表页面的左侧栏添加主题作者,并提供一个选项,仅在默认作者栏中显示最近的帖子作者。作者头像的大小和形状也可以设置。
:eyeglasses: 预览 \u003chttps://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters\u003e
:hammer_and_wrench: 代码仓库 \u003chttps://github.com/Lillinator/discourse-topic-list-author-posters\u003e
: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:

分类页面截图,显示了启用作者或最后发帖人时的 2 种不同大小和形状的头像。

默认组件设置,中等大小圆形头像,启用了 Show_author_on_categories_page

大号 tab_style 头像,禁用了 Show_author_on_categories_page

移动设备视图截图

使用 tab_style 作者头像:


:backhand_index_pointing_right:t3: 备注

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

:bulb: 潜在的未来待办事项

  • 添加移动设备禁用切换按钮?
  • 分类和标签豁免?
  • 从左到右(LRT)支持?
  • 形状化帖子作者头像?

: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 个赞