这个博客的朋友圈是怎么做的

什么是朋友圈#

这里的”朋友圈”不是微信那个朋友圈，而是博客圈里的一种内容聚合页。它会抓取友链列表中各位博友的最新文章，汇总展示在一个页面里。效果类似于一个迷你 RSS 阅读器，但更轻量，也更有人情味。

你可以在导航栏找到”钓鱼”入口（之所以叫钓鱼，是因为逛朋友们的博客就像钓鱼一样，你永远不知道下一秒会钓上来什么有趣的内容）。

核心思路#

实现思路其实不复杂：每个友链条目都可以配置一个 RSS 地址，系统定期去抓取这些 RSS 源，把文章信息整理后展示出来。

整个流程可以分为三步：

1. 配置友链时附带 RSS 地址
2. 服务端抓取并解析所有 RSS 源
3. 前端展示为卡片列表

数据源：friendsConfig#

所有的友链信息集中管理在 friendsConfig.ts 里。每个友链除了常规的站点名、头像、网址外，还可以配置一个 rss 字段：

1
{
2
  title: "友人A",
3
  siteurl: "https://example.com",
4
  imgurl: "https://example.com/avatar.png",
5
  rss: "https://example.com/feed.xml",
6
  enabled: true
7
}

没有配置 RSS 的友链不会出现在朋友圈里，但会正常显示在友情链接页面。这样设计的好处是，每个人可以自由选择是否参与内容聚合。

数据抓取：rss-utils#

抓取逻辑集中在 rss-utils.ts 里。它同时支持 RSS 2.0 和 Atom 两种格式，通过 Promise.allSettled 并行抓取所有友链的 Feed，单个源失败不会影响其他源。

每个 Feed 最多取 5 篇文章，超时时间设为 8 秒。抓取到的文章会解析标题、链接、发布时间、摘要等信息，摘要会被截断到 200 字以内。

API 端点#

/api/circle.json 这个接口负责整合数据。它在请求时调用抓取逻辑，然后将所有文章按发布时间排序，同时返回一些统计数据：

• 好友总数
• 活跃好友数（成功抓取到文章的数量）
• 文章总数
• 最后更新时间

接口会设置一小时的缓存，避免频繁请求给朋友们的服务器造成压力。

前端展示：CircleFeed.svelte#

前端是一个完全客户端渲染的 Svelte 组件。页面加载时会请求上述接口，拿到数据后以卡片网格的形式展示。

每张卡片包含：

• 文章标题（最多两行，超出省略）
• 作者头像和名称
• 发布时间
• 文章摘要

卡片排列采用自适应网格，auto-fill 配合 minmax(260px, 1fr)，在不同屏幕宽度下都能合理展示。鼠标悬停时作者头像会高亮，增加一点交互的趣味。

分页逻辑也在客户端完成，默认每页 20 条，点击”加载更多”逐步展示。排序支持按发布时间和最近更新两种方式，切换后即时生效，不需要重新请求接口。

一些细节#

页面顶部会随机展示一条最新的文章通知（取最近 6 篇中的随机一篇），算是一个小彩蛋。统计栏可以显示好友总数、活跃数和文章数，也可以选择关闭。

评论区在朋友圈页面是可选的，如果配置了评论系统且没有禁用，文章列表下方会显示评论区，方便朋友们留言互动。

最后想说的是，这个功能的初衷很简单——希望博客之间能有更多的连接。友链不只是单向的跳转，它也可以变成一种内容的流动。如果你也有自己的博客，不妨试试在你的站点上搭建类似的功能，感受一下博客圈的温度。