简单记录一下近期的个人博客功能升级

前言

距离上次折腾博客已经过去很久了，最近在AI的帮助下，我为我的博客进行了一次比较大的升级，这篇文章将会记录本次博客升级的主要内容。 👇原文链接

功能更新

1. 服务端渲染（SSR）

为了提升网站的加载速度和SEO，我将博客的大部分页面都从客户端渲染（CSR）改成了服务端渲染（SSR）。

将原来的Axios换成了原生的Fecth请求，同时增加缓存机制，比如文章内容缓存5分钟的设置。

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 热力图，展示近一年的代码提交记录。

见：www.tunan.fun/about

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的辅助下，这次博客升级的效率非常高，很多之前想做但一直拖延的功能都得以快速实现。后面我只要想好我要什么，就能快速增加上。下次，做个难度高一点的，多语言如何？😆