博客 V2.0 正式发布：我给这个小破站做了一次大手术
写在前面
博客上线两个月了。V1 版本就是个能跑的毛坯房——文章能发、评论能写、页面能看，仅此而已。作为一个对细节有执念的人，我实在受不了那些粗糙的地方，于是花了一个半月做了次全面升级。
这篇文章聊聊 V2 版本到底多了些什么。文中一些功能加了「立即体验」链接，读完了可以直接去试试。
V2 都更新了啥？
- AI 智能助手——评论 @lcr 召唤 AI 回复，文章自动生成智能摘要
- 全站灯箱系统——图片视频统一查看器，双指缩放、缩略图导航、下载
- 评论邮件通知——有人回复你的评论会发邮件，多条合并
- RSS 订阅 + 邮件订阅——两种方式追踪博客更新
- 暗色模式——全站适配，一键切换
- 媒体库全面重做——相册系统 + 精选页面 + 入场动画
- 管理后台数据大盘——访客数据、设备分析、最近访客详情
- 页面性能优化——首屏加载速度大幅提升，返回不重新加载
- 友人帐全面美化——粒子背景、3D 磁吸、弹簧动画
- 怀旧版博客——交互式预览旧版博客
- 朋友圈实验页面——仿微信朋友圈九宫格动态
- 文章置顶轮播——首页置顶文章卡片轮播展示
- 代码块一键复制——hover 显示复制按钮
- 阅读进度条 + 回到顶部——顶部进度条，滚动后浮现回到顶部按钮
- 文章分享图——生成带标题和摘要的分享图片
- 文章目录侧边栏——常驻显示，滚动高亮当前章节
- 背景图实验室——展示所有背景图并支持打分
- 通知横幅系统——首页横幅通知，后台可编辑
- 全站 SEO 优化——meta 信息、结构化数据、sitemap、IndexNow
- 网站字体本地化——不再依赖外部 CDN
- 网易云音乐集成——搜索、播放、歌词、歌单导入，毛玻璃界面
- 首页手势动画——手势驱动的交互动画 + 实验场演示页
- 各种 bug 修复——草稿权限泄露、评论删除报错、分类筛选翻页失败等
下面挨个聊。
AI 智能助手
评论区接入了 GLM-4.7 大模型。现在你在评论里 @lcr 就能召唤 AI 回复，它有点皮、爱玩梗、偶尔阴阳怪气，不是那种冷冰冰的客服机器人。AI 助手有独立身份——名字叫 lcrAI，紫色标签，专属头像，不计入评论统计。它会根据文章内容和上下文自己组织回复，有时候比博主本人回复得还快。
每篇文章标题下面还有一个 AI 智能摘要，它会读完整篇文章然后用一两句话总结核心内容，以打字机效果逐字展示。懒得看长文的，扫一眼摘要就知道文章讲什么。
(看完文章到评论区体验即可)
全站灯箱系统
之前博客的图片查看体验很割裂——媒体库一种查看器，相册另一种，动态又是一种，文章里的图片干脆不能点。四个页面四套代码，功能还不一样。于是写了一个统一的灯箱组件，全站所有图片视频的展示全部统一了。
图片支持双指缩放（手机）和滚轮缩放（电脑），1 到 5 倍随意放大，放大后可以拖拽平移，双击切换缩放。底部有连续缩略图条，高亮当前项，切换时自动滚动到中间。键盘左右箭头切换，支持下载和全屏。视频也统一到灯箱里，外观一致，播放器还是用系统的，不造轮子。
文章正文里的图片现在也能点击放大了，动态详情页之前没有灯箱现在也接上了。全站图片视频体验终于统一了。
评论邮件通知
之前有人留了评论，别人回复了他完全不知道，除非自己回来刷页面。评论区像扔进黑洞的信，有没有回复全靠缘分。现在评论时留了邮箱的话，有人回复你会自动发邮件通知，邮件里有原评论、回复内容和跳转链接，点一下就能回到评论区。
为了不骚扰人，做了几个限制：同一邮箱每天最多 2 封；多条回复合并成一封，标题是「亲爱的 xxx，你在 lcrworld's Blog 的评论收到了 N 条回复」；AI 回复也触发通知；博主自己回复不通知自己。管理后台可以开关功能、设置限额、查看发送记录。邮件模板重新设计了，Georgia 衬线字体，黑白极简风格，移动端适配。
(看完文章到评论时填写即可)
RSS 订阅 + 邮件订阅
RSS 支持两个源：文章 RSS 和动态 RSS，用任何 RSS 阅读器都能订阅，有新内容自动推送。邮件订阅则更直接——留下邮箱确认后，每次发布新文章都会收到通知邮件，不想收了随时退订，链接在邮件底部。
在信息流全被算法把持的今天，RSS 和邮件订阅是少有的你能完全自己控制的信息获取方式——订阅了就一定能收到，不会被算法过滤掉，也不会被推荐你不感兴趣的内容。
暗色模式
顶部导航栏有日/月图标，点击切换。不是简单把背景翻黑，而是全站每个组件都单独调了暗色配色——侧边栏、文章卡片、评论区、输入框、图表、时间线、灯箱、媒体库等等，每一个都重新配色。切换即时生效不用刷新，设置会记住，下次来还是你上次选的。
媒体库全面重做
之前媒体库就是一个图片平铺列表，没什么设计感，跟文件夹浏览没区别。V2 做了彻底重做：首页改成精选页面，以相册集形式展示，每个相册有封面图和标题，卡片有从底部向上滑入的入场动画。相册详情页图片以相框边框形式展示，hover 可看图片介绍，点击进入灯箱。管理后台支持创建相册、上传封面、移入移出媒体、拖拽排序、批量操作等完整管理功能。
顺便修了一个烦人的 bug：媒体库滚动时卡片会乱跳往上蹿，是 CSS transition: all 导致的——新卡片插入时已有卡片的位置变化被动画化了，改成只过渡需要的属性就好了。
管理后台数据大盘
之前后台只能管理内容，啥数据都看不到，两眼一抹黑。现在加了数据大盘：今日访问量、独立访客数、设备分布、浏览器分布、来源分析、最近访客详情、最近评论一览。访客追踪系统记录每次访问的 IP、设备、浏览器、来源、停留时长。关于页面也开放了访客趋势图表，近 30 天的 PV/UV 走势一目了然。
页面性能优化
之前首页白屏时间长，排查发现是首屏同步解析了 43 张背景图模块（27MB），全塞进了主 bundle，浏览器得把它们全下载完才能渲染。改成按需加载后首屏几乎秒开，背景图在用户滚动到对应区域时才加载。另外做了列表页缓存优化——浏览文章列表后点进文章再返回，不重新加载、不闪烁、滚动位置保持不变。之前返回会闪一下重新拉数据，现在丝滑了。
友人帐全面美化
全站最花的页面，没有之一。动态粒子背景（Canvas 粒子连线）、SVG 丝带弹性连接、玻璃拟态卡片、卡片入场弹簧动画、悬浮 3D 磁吸效果（鼠标靠近时卡片跟着倾斜）、头像旋转光环、标题字符摔落动画。
可能有点过度设计，但好看就完事了——友人帐嘛，就得有排面。
怀旧版博客
关于页里加了怀旧版区块，可以交互式预览旧版博客的样子，还原了旧版白色侧边栏、顶部栏、首页头像、卡片风格。数据实时调用当前博客 API，内容是同步的——你看到的文章、动态都是最新的，只是套了个旧版皮肤。算是给博客留个纪念，也算记录一下变迁。
朋友圈实验页面
实验场里加了一个仿微信朋友圈页面，九宫格图片展示，点击进入灯箱，1:1 还原微信朋友圈视觉风格。发动态、配图、点赞评论都有，算是把博客的动态系统换了个微信皮肤。首页也做了动画升级，加了手势驱动动画和实验场演示页。
文章置顶轮播
后台可以设最多 5 篇置顶文章，首页以轮播卡片形式展示，5 秒自动切换，也可以手动点左右箭头。重要的文章可以钉在最前面，不会被新内容冲下去。之前置顶文章就是在列表前面多显示一遍，现在有了专属的轮播展示位，体面多了。
代码块一键复制
文章里的代码块，鼠标 hover 会显示复制按钮，点击直接复制到剪贴板。看技术文章的时候方便不少，不用手动框选复制了。移动端也有按钮，不依赖 hover。
阅读进度条 + 回到顶部
页面顶部一条绿色渐变进度条，实时显示当前阅读到了哪里。滚动超过一定距离后右下角浮现回到顶部按钮，点击平滑滚回顶部。都是小功能，但看长文的时候体验好很多——这篇文章就很长，你可以往上滚一下试试。
👉 你现在往上滚一下就能看到顶部的进度条，右下角也有回到顶部按钮。
文章分享图
文章详情页有「生成分享图」按钮，可以生成一张带文章标题和摘要的图片，方便发到社交平台。不用自己截图再配字了，一键生成，保存即用。配色和博客主题一致，发出去也好看。
👉 本文标题下方就有分享按钮，看完了点一下试试。
文章目录侧边栏
文章详情页的目录从原来的内嵌改成侧边栏常驻显示，粘性定位，滚动时高亮当前章节，点击直接跳转到对应位置。长文章找章节方便多了。手机端会折叠成顶部的展开按钮，不占空间。
👉 你现在看看屏幕右侧（桌面端），应该能看到本文的目录。
背景图实验室
实验场里的一个页面，展示博客用过的所有背景图，支持五星打分。低于 1 星的会自动过滤，不再在博客中展示。打分数据持久化存储，下次来还在。相当于让读者投票决定哪些背景图留哪些走。
通知横幅系统
首页可以显示横幅通知，后台可编辑内容。5 分钟内关闭后不会重复弹出，从管理页切回时自动重新检查。有公告或者通知的时候用，比如这次 V2 发布就可以挂个横幅。
全站 SEO 优化
补齐了所有页面的 meta 信息、Open Graph 标签、JSON-LD 结构化数据。新增了 sitemap.xml 和 robots.txt。提交了 Bing IndexNow，新内容发布后能即时被搜索引擎收录，不用等爬虫慢慢爬。文章标题会自动设为浏览器标签页标题，分享到社交平台也有正确的预览图和摘要。
网站字体本地化
之前博客用的是 LXGW WenKai 字体，从 CDN 加载。CDN 挂了字体就没了，全站回退到系统字体，观感直接降级。现在把字体文件（485 个子集文件，26MB）全部下载到服务器本地，不再依赖外部服务。CDN 挂不挂都跟我没关系了。
网易云音乐集成
音乐库接入了网易云音乐，可以直接搜索歌曲、在线播放、同步歌词，还支持导入网易云歌单——输入歌单 ID 就能把整个歌单搬过来。界面做了毛玻璃效果（backdrop-filter: blur），专辑封面放大到 52px，背景随机切换。之前的双重背景图 bug 也顺手修了。
首页手势动画
首页做了一次动画升级，加入了手势驱动的交互动画，页面元素会跟着手势做出响应。实验场里新增了演示页面展示动画效果，可以直观看到各种手势对应的动画反馈。
👉 立即体验：回首页试试手势动画 (别忘了回来哦)
Bug 修复
除了上面提到的，还修了一堆：草稿文章权限泄露（ISR 缓存导致登录后草稿内容被缓存给匿名访客，这个比较严重）、删除有回复的评论报错（SQLite 外键约束）、首页分类筛选翻页失败（请求竞态条件）、访客追踪数据异常、仪表盘概率白屏、SEO 关键词保存后消失、文章置顶不生效、图片灯箱切换按钮位置不对等等。每个 bug 都是实际用的时候踩到才修的。
最后
从 5 月底到 7 月初，一个半月，V2 从规划到完成。每个功能都是我自己用得上的，每个细节都是我自己看不顺眼才改的。博客对我来说像一个数字花园，慢慢种慢慢养，每次来看都比上次好一点。V2 是一个里程碑，但不是终点。
如果你看到了这篇文章，欢迎在评论区 @lcr 试试 AI 回复，留个邮箱体验评论通知，或者订阅 RSS 和邮件。关于页面上有所有入口。
下次见。
评论 (0)