使用 Discourse 打造类似博客、Reddit、X 或 Facebook 的滚动式平台

我开启这个主题,是为了记录我尝试将 Discourse 转变为一个更视觉化、支持连续滚动的平台的过程——让它更接近 Reddit、X 和 Facebook 提供的浏览体验。

我将利用这个主题分享我的尝试、哪些方法有效、哪些无效、我使用的组件以及遇到的任何问题。希望这也能帮助其他希望将 Discourse 用于传统论坛布局之外用途的人。

这个项目的起点是 90-9-1 法则

该法则指出,在大多数社交媒体、博客等平台上:

  • 90% 的用户主要是在浏览和消费内容。

  • 9% 的用户偶尔会进行互动,如点赞、分享或评论。

  • 1% 的用户主动创建了大部分内容。

显然,具体的百分比在不同社区之间会有所不同,但这一原则依然适用:大多数访客是读者,而非贡献者

Discourse 在服务于那 9% 和 1% 的用户方面表现出色。它围绕讨论、回复和积极参与而构建。然而,我希望让它对那庞大得多的、只想打开网站浏览有趣新内容的群体同样具有吸引力。

我试图构建什么

我希望利用 Discourse 创建一个更视觉化、连续(无限滚动)的信息流,类似于 Reddit、X 或 Facebook。

理想情况下,体验应该如下:

  • 打开主页时,立即看到一个相关主题的信息流。

  • 从一个主题连续滚动到下一个主题。

  • 无需打开单独的页面即可预览主题内容。

  • 直接在信息流中看到图片、视频和摘录。

  • 当某些内容吸引你时,可以点赞、收藏或回复。

  • 自动将之前滚动过的内容移开。

  • 稍后返回时,看到的是新鲜或未读的主题,而不是每次都是相同的主页。

  • 通过用户互动的类别、标签和主题,逐步个性化信息流。

有些人可能会称之为“无脑刷屏”(doom scrolling),但这也是现在大量用户消费在线内容的方式。他们可能阅读数十个帖子却从不评论,但他们仍然是真实的用户,会产生浏览量、分享链接,并可能每天回来。

为什么用 Discourse 构建?

Discourse 已经提供了大部分困难的部分:

  • 用户账户和个人资料

  • 类别和标签

  • 点赞、收藏和通知

  • 信任等级和审核

  • 主题创建和回复

  • 已读和未读跟踪

  • 推荐和相关主题

  • 成熟的插件和主题组件系统

似乎缺少的是一个主要围绕发现和被动消费设计的信息流。(显然,Discourse 最初的设计并非如此)

目前的进展

  1. 我从 @awesomerobot 开发的出色的 Reddit 风格主题 开始,我不得不 fork 它,以便编辑各种方面,例如移除自定义侧边栏。我还对 CSS 进行了大量编辑,以按照我们的需求进行设计。
  2. 启用 嵌套视图 是必须的,因为这涵盖了此类网站所需的样式。
  3. 我制作并添加了一个 YouTube 风格的滚动菜单,显示所有类别和自定义链接。我使用 自定义顶部导航链接 来定制和添加链接。
  4. 主题预览模态框是必须的,我开始设计这个,但传奇人物 @Don 构建了一个更好的版本,可以在这里找到
  5. 在所有页面都有一个静态缓存的右侧边栏是必须的,所以我从 右侧边栏块 开始,然后制作了一个主题组件以在主题页面等地方显示它。
  6. 使用 自定义头部链接(图标),我在头部添加了一个“创建帖子”按钮,以使容器更整洁。
  7. 帖子中的图片居中显示,并带有模糊背景,使其看起来更整洁(类似于 Reddit)。
  8. 将主题摘录设置为 150 个字符,并在主题卡片的标题和图片之间显示是必须的(类似于 Facebook 和 X)。

接下来的步骤将是一个专用的信息流,它可以:

  1. 从定义时间段内的最近内容开始,例如过去 14 天。

  2. 优先显示用户关注的类别和标签中的主题。

  3. 混合热门或趋势主题以进行发现。

  4. 记录主题何时被真正查看或滚动经过。

  5. 降低已查看主题的优先级,但不永久隐藏它们。

  6. 允许直接从信息流进行反应和回复。

这不会取代传统的主题列表或讨论。它将是发现和消费相同 Discourse 内容的另一种方式。

跟随旅程

随着项目的发展,我将继续更新这个主题,包括我测试的组件、我做的更改以及我遇到的障碍。

我也想听听任何尝试过类似事情的人的意见,特别是关于:

  • 现有的阅读跟踪数据是否支持这一点。

  • 信息流如何为匿名和新注册的用户工作。

  • 在不引入复杂推荐算法的情况下,可以实现多少个性化。

  • 连续的主题预览是否会带来严重的性能问题。

目标是认识到沉默的 90% 是社区的重要组成部分,并为他们提供围绕其实际使用互联网方式设计的体验。

我将用于此项目的测试站点是

https://www.m8wtf.com/

11 个赞

我真的很喜欢这个想法——我会持续关注。我快速浏览了你的演示,感觉很棒!等我手头有空的时候再回来细看。

4 个赞

我们曾尝试将 Discourse 的 Unified New 页面设为首页,因为它看起来恰好能提供我们想要的信息流。配合一个插件,当用户滚动屏幕超出视口范围时,该插件会从 /new 页面移除帖子。(@Don 已经成功实现了这一点)

造成混淆的原因在于,我一直使用已注册的成熟账户来测试 Discourse,因此我的 Unified New 页面总是充满了帖子。我并没有完全理解该页面对于全新用户的工作机制。

在创建了一个新的测试账户后,我们发现 Unified New 页面完全是空的,因为较旧的帖子对于该用户来说不被视为“新”帖子。这意味着它目前无法提供我们计划中的、内容丰富的首页信息流。

哇,非常感谢你的评论和积极的反馈!我知道这并不是你感兴趣的内容,也与 Discourse 的初衷不符。

@don 正在开发一款新插件,该插件将引入一种全新的 /feed 样式系统和主页。它会向用户展示实际的新帖子,当用户滚动浏览并越过某个帖子时(利用视口检测),该帖子就会被移除。如果所有帖子都已被查看,则会自动重定向到 /latest。此功能仍在开发中。

1 个赞

非常感谢 @don 和他新开发的未发布插件,现在信息流已经可以正常工作了,用户总是能看到最新的内容。不过,他保留了回复的原有行为,它们不会在视图中消失。

新用户注册后,现在可以看到过去 14 天的所有帖子,但这一时间范围可以在“首页默认时间范围”中进行调整。

2 个赞

接下来要讨论的是开发一个用于个性化信息流的组件/插件,大致思路如下:

信息流得分 =

40% 兴趣匹配度
25% 内容新鲜度
15% 历史行为
10% 站点热度
10% 随机性/发现性

这样,信息流可能会呈现为:

《WARDOGS》抢先体验版周四上线
PS5 新更新导致手柄出现奇怪故障
有人造出了一辆时速 70 英里的电动滑板车
Netflix 确认将推出新版《中间人》
格拉斯哥离奇新闻
随机热门美食与饮品文章

对于新用户,初始权重可能为:

25% 游戏
15% 电视与电影
15% 离奇新闻
15% 科技
10% 美食与饮品
10% 体育
10% 汽车与刺激体验

当用户浏览了 30 到 50 篇帖子后,他们的信息流将开始自动调整。

或者,我也考虑过开发一个组件,让用户在注册时选择自己的兴趣,例如选择类别:

你感兴趣什么?

:check_box_with_check: 游戏
:check_box_with_check: 离奇新闻
:check_box_with_check: 科技
☐ 政治
:check_box_with_check: 电视与电影
☐ 体育
:check_box_with_check: 汽车与刺激体验
☐ 美食与饮品

这需要花费大量的时间和测试

1 个赞

我很喜欢移动端上点击主题时会在底部弹出一个预览面板,你可以选择继续深入查看,也可以直接关闭并回到信息流。做得很棒!

1 个赞

这要归功于 @don 的主题组件 :wink: Topic Preview Modal

2 个赞

这次探索的目标是什么?是一个主题、一个组件,还是某种统一的方案?比如将主题和组件打包在一起之类的?

这正是我多年来一直在等待的东西。Discourse 的用户体验每次都在阻碍我使用它。说实话……它真的没有 Discourse 本身那么出色。

祝你在探索之路上好运。

你的演示在移动端看起来很棒。

1 个赞

我会写一份指南 :slight_smile: 我会把自己制作的所有组件上传到 GitHub,并附上其他人已制作或正在制作的组件的链接。既然其他人也做出了很大的贡献,我觉得把它们打包在一起是不合适的。

正是如此。它的核心框架很棒,这也是我使用 Discourse 的原因——我想看看能否做出一些不错的、不同于典型 Discourse 风格的东西。

1 个赞

有些主题会打包组件,或许可以考虑这一点。另外,也许可以统一使用 lucide 图标?

1 个赞

看起来很棒。有一个 theme-creator 插件,可以在楼主发帖之后,为帖子中的楼主添加装饰。

好的,我看了另一个有回复的主题。我看到你可能已经在使用 Don 的 TC 作者徽章了。

做得非常好。

2 个赞

不,那是我安装之前用的一些自定义 CSS。

1 个赞

类似 Topic List Previews (TLP)? 这样的效果?

这里有个很好的例子:https://www.starzen.space/

不完全是,更多的是后端相关的工作,而不是视觉方面。

1 个赞

哦,好的,这句话让我走了弯路。如果我要根据你提到的其他要求来给 TLP 打分的话:

  • 打开主页即可立即看到相关话题的流。

    :white_check_mark:

  • 从一个话题连续滚动到下一个话题。

    :white_check_mark:

  • 无需打开单独页面即可预览话题内容。

    :white_check_mark: (虽然可以做得更精细——我曾在一个 Discourse 分支上开发过更精细的版本)

  • 直接在信息流中查看图片、视频和摘录。

    2/3 :slight_smile: (我曾在一个 Discourse 分支上开发过更精细的版本,可以在话题列表中播放实时视频 :+1:

  • 当某内容吸引你时,可以点赞、收藏或回复。

    :white_check_mark:

  • 自动将之前滚动过的内容移开。

    :white_check_mark:

  • 稍后返回时,看到的是新话题或未读话题,而不是每次都是相同的主页。

    :white_check_mark:

  • 使用用户交互过的分类、标签和话题,逐步个性化信息流。

    :cross_mark: 尚未实现,后端方面肯定可以。

顺便说一下,这个问题之前已经讨论过了,例如:

我已经全部读完了,但没有人真正付诸实践。

1 个赞

我至少知道一个,但它是闭源的。