使用 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/

2 个赞