前言
距离上次折腾博客已经过去很久了，最近在AI的帮助下，我为我的博客进行了一次比较大的升级，这篇文章将会记录本次博客升级的主要内容。 👇原文链接
功能更新
1. 服务端渲染（SSR）
为了提升网站的加载速度和SEO，我将博客的大部分页面都从客户端渲染（CSR）改成了服务端渲染（SSR）。
将原来的Axios换成了原生的Fecth请求，同时增加缓存机制，比如文章内容缓存5分钟的设置。
js
async function getArticle(slug: string) {
try {
const response = await fetch(`${API_URL}/article?slug=${slug}`, {
next: { revalidate: 300 }, // Revalidate every 5 mins
});
if (!response.ok) {
return null; // Or handle errors more specifically
}
...
}2. 关于（About）页面改造
About 页面进行了全面的优化和内容补充。
- 个人介绍：优化了中英文介绍，使其更加简洁。
- 设备和App：新增了"我的设备"和"常用App"模块。
- 我的阅读：增加了正在阅读和已读的书籍列表。
- GitHub Contributions：集成了 GitHub Contributions 热力图，展示近一年的代码提交记录。
3. 埋点建设
为了更好地了解博客的访问情况，我增加了全站的访问埋点。主要会记录访问的页面，访问者的浏览器和ip地址。
4. 项目展示模块
新增了项目展示页面，用于陈列我的个人项目。
- 项目列表：展示我的个人项目。
- GitHub Star History：可以查看项目在GitHub上的Star增长历史。
5. 后台管理页面
这次最大的更新是增加了一个后台管理页面，以后更新博客内容再也不用手动修改数据库和上传文件了。
- JWT登录：使用JWT实现了安全的后台登录功能。
- RSS文件生成：可以在后台一键生成最新的RSS订阅文件。
- 文章/书籍管理：提供了对博客文章和阅读书籍的增删改查功能。
- 埋点数据看板：后台可以直观地看到网站的访问数据。
6. UI/UX 优化
对博客的UI和UX进行了一些细节优化。
- 新增图标：增加了 Folo、RSS 和 Discord 的社交图标。
- GitHub图标：将原先的按钮样式改成了更简洁的图标样式。
- 页脚信息：博客底部新增了网站运行时间、总访问量和一句随机的问候语。
7. 服务器脚本
为了方便部署和维护，编写了 start、stop、restart 等一系列服务器管理脚本。
总结
在AI的辅助下，这次博客升级的效率非常高，很多之前想做但一直拖延的功能都得以快速实现。后面我只要想好我要什么，就能快速增加上。下次，做个难度高一点的，多语言如何？😆