网站朋友动态功能详细设计

type

status

date

slug

summary

📝 前言

近日经常有看到不少博友的网站都有一个朋友圈的模块，用于展示友链中博主的文章更新，因此萌生出自己也做一个的想法，正好趁着上周末有点时间，花了一天的时间完成了该功能。

今天就来分享一下本站的朋友动态是如何实现的。

🧭 背景介绍

在个人博客网站中友链常用于展示站点主人的社交关系和互访资源。

为了让“友链”更有生命力，越来越多网站开始实现“朋友动态”功能，即实时展示友链网站的最新文章、更新等内容。

不仅提升了页面互动性，也营造了良好的社区氛围，同时有助于：

提高用户粘性

增强搜索引擎对站点活跃度的判断

自动同步友链更新，免去手动整理负担

PS：由于本站跟其他站点不太一样，官方框架并没有支持该功能，因此只能自己实现，由于不想改动框架源码，最终采用的是嵌入页面的形式进行展现。

🔍 使用场景

技术博客希望展示友情链接的最新博文

个人主页希望构建“朋友圈”-式的订阅信息流

站长希望以低成本、高自动化的方式维护友链生态

📋 功能架构总览

该功能整体分为四大模块：

友链站点信息爬取：自动识别并提取本站友链信息和 RSS 地址。

RSS 订阅定时抓取：定期抓取 RSS 内容，存入数据库。

后端 API 查询接口：供前端查询最新动态内容。

前端展示模块：美观地展示朋友动态内容，支持头像、，名称、描述、标题、时间等字段。

🛢️ 数据库设计

这里我一开始也考虑过使用json，不过虽然轻量但是不够灵活，因此最终还是使用数据库存储了，以下为数据库表结构设计，比较简单总共就3张表：

友链信息表：这个是主表，用于存储友链站点的信息，首次爬取本站友链页面并存入。

PS：后续若需要添加新的站点只需要插入基础数据到这张表即可。

友链文章表：每日定时根据友链信息表中的 rss_url 链接抓取文章并存入。

抓取日志表：记录每日抓取的详细日志信息。

🚀 功能模块详解

1️⃣ 友链站点信息爬取

目标：自动抓取本站友链的信息并插入数据库。

这里我是直接爬自己的友链页面，由于链接比较多（目前70个），一个个自己添加不现实。

因此我写了个脚本，用于爬页面信息，另外一开始友链里面并没有存RSS地址，所以还需要探测站点的RSS链接是多少，这里仅根据常用地址探测如：/rss、/rss.xml、/feed、/rss/feed.xml等

如果返回200状态码则为正常链接，爬完后存入数据库。

这只是很初步的，有的链接是200，但是并没有数据，因此可能需要后续再手动优化下，还好并不多。

2️⃣ RSS 订阅定时抓取

目标：周期性抓取友链RSS的内容并同步更新数据库。

这里采用的XXL-JOB做定时任务，去掉重复的并加上判断，若抓取失败则在友链信息表中进行记录，当超过3次时，则禁用该友链，避免后续一直无效抓取。

另外由于首次已探测过友链RSS链接，这里基本不会出错，不用每次都探测链接了，一般站点也不会随便变动 RSS 链接。

PS：如果有人要问为何不用系统自带的crontab而是用XXL-JOB这么重的，其实很简单我本就已经有部署该服务，不用也是浪费，最后 Just for Fun ~

这里还有个小插曲，我发现有2个博友站点RSS内的文章链接居然是localhost开头，一开始还以为是自己的问题，后面赶紧提醒站长，进行了相应修复~

3️⃣ 后端 API 查询

目标： 提供接口供前端获取最新的“朋友动态”。

很简单的一个接口，主要就是查询数据库信息并返回给前端。

这里避免文章发布的时间过长，仅返回最近半年的文章信息，单个站点仅返回3条最新文章。

4️⃣ 前端展示模块

目标： 美观、简洁地展示友链更新内容。

这里我的设计原则是以站长为中心，采用倒序时间轴的形式进行展示。

每个站点以卡片的形式显示以下内容：

👤 站点头像（圆形）

🌐 站点名称（可点击）

📖 站点描述

📝 文章标题（可点击）

🕒 更新时间

前端采用的是静态构建，在构建时调用后端API将数据写入，并打成镜像。

最后到服务器上仅部署一个Nginx容器即可。

前端也是采用的定时构建部署，这里使用的是 Gitea Aciton 定时构建，后面会在 DevOps 专题进行相关介绍。

另外前端的功能入口是在主站顶部菜单的社交 → 朋友动态。

PS：由于采用的是静态构建，后端服务并没有部署到服务器而是在本地，这样不仅可以节省资源，而且可以通过 CDN 进行加速。

5️⃣ 优化主题和兼容性

经群内博友提醒，第一版并未做亮/暗主题自动切换以及移动端的适配，初版移动端效果如下：

后面就抽空花了点时间，做了跟主站一样的按时间自动切换亮/暗主题，并进行移动端适配。

移动端因为空间有限去掉了时间轴，将时间统一放到卡片上方，最终效果如下：

✅ 总结

虽然朋友动态功能不大，但是涉及到的点也不少，通过该功能不仅提升网站的交互层级，更有助于打造一个开放、活跃的博客生态系统。

欢迎大家体验该功能，后续会将代码开源出来以供大家参考~

💡

有关文章的任何疑问，欢迎您在底部评论区留言，一起交流~

若文章对您有帮助，欢迎请我喝杯咖啡~