博客 V3.0 正式发布：这一次，大有不同！

227 阅读 5646 字约 29 分钟 2026-09-09 00:10 · 更新于 2026-09-09 00:13

写在前面

博客 V2 到现在，快两个月了。V2 给我的感觉是"能住人了"，但架不住我这个人手痒。之前那套前端框架用久了体验是真不好，~~页面偶发白屏、打开慢半拍、想改点啥总受框架掣肘，~~所以我这次干脆把整个底层技术栈都换了。顺带把这一两个月攒下来的功能想法，一次性和盘托出。

这篇文章聊聊 V3 到底改了什么、多了什么。内容有点长，建议边逛边看，我会在文中加对应的体验入口。

V3 都更新了啥？

底层技术栈重构：前端从 Vite 切到 Nuxt 4，服务端渲染（SSR），首屏秒开
实况图 / Live Photo：把按下快门的那两三秒还给你，静态图片能"动"起来
全站搜索：全文检索，想找什么直接搜
实况模块：独立上传封面 + 视频，生成识别码随手分享
天气卡片：首页实时天气，出门前看一眼要不要带伞（
致谢名单：把支持过我的人写进博客的"致谢页"
版权中心：版权声明 + 投诉受理，创作该被尊重
隐私政策：数据收集、使用一目了然
文章历史版本：改错了能回退
回收站 ：误删的文章、动态、评论能一键恢复
关于页重做：GitHub / Gitee / B 站入口集中到这，个人主页一页看懂
管理后台大改：模块从 20 个涨到 40 个
MCP 接口：AI 也能像管理员一样帮我维护博客
左上角灵动岛音乐播放器：听歌不断流，快捷键一应俱全
友人帐重设计：粒子星空 + 丝带连线 + 玻璃拟态
网站安全再升级：Nginx 自建轻量 WAF，网关层兜底
站点安全加固：自动封禁、登录防护、审计日志
各种 bug 修复：白屏抖动、CSS 渲染缺陷、按钮白框等

下面挨个聊。

基于NUXT4重构（这版我最想先说的）

先说动机。

我做 V3 没有别的原因，就是觉得之前那套前端框架的体验不好了。老版是 Vite 单页应用，首屏要等浏览器把一堆 JS 下载完、再运行起来才能看到内容，网络一慢就白屏；有时候想渲染一个服务端该给的东西，还得跟框架斗智斗勇，体验真的很一般。

所以这次我把前端整个切到了 Nuxt 4，核心就一句话：页面变成服务端渲染了。服务器直接把拼好的 HTML 返回，浏览器拿到就是有内容的页面，首屏基本秒开，也不会再忽闪白屏。(当然网络质量也不能太差hh）

这次切换代价不小。老版前端依赖了一大堆第三方库（动画、UI、跨端框架），我全清理了，能自己写的绝不引包，能省的依赖全砍。最后是从根上换了渲染架构，不是打补丁～

换完之后最直观的感受：首页、文章列表这些页面访问速度上了个台阶，深夜里刷起来也是顺的，之前的首屏散架状态也没有了，这是我自己天天用能体感到的变化。

实况图 / Live Photo（我最喜欢的新功能）

说重点，这是我最想让你去玩的东西。

之前发一张照片，它就永远停在那一个瞬间。其实实况图这个功能有个别的博客已经支持了，比我早。主流的方案是使用苹果的那个livephoto-kit快速接入，我搞了十几分钟接入后发现：我没苹果手机啊！

是的，苹果的js包只支持苹果设备所拍摄的实况图，安卓设备并不支持，虽然我本地有好多OPPO手机拍的实况图，但压根用不上。

经过三十多个小时的“刻苦钻研”，也是终于实现了对安卓实况图的一键提取，相关工具作为单独的服务独立于博客（因为我想让我的所有网站都能用hh）

电脑端鼠标悬停播放，手机端长按播放（还有震动反馈哦）

同时V3 我加了一个叫实况图的模块，专门干这件事：给一张照片配上一段一两秒的真实视频，让它能"活"起来。他也支持通过我自研的16位实况图识别码自动转换实况图，从手机相册转到博客，只需要一个按钮。

你在文章、动态里看到它，桌面上鼠标移上去，手机上长按一下，它就会从一张图还原成一段会动的画面，动完自然回到静图，完全不打扰阅读节奏。

同时后台配套做了完整的实况管理：上传封面时同时配视频，系统自动生成一个识别码；图片没渲染完先用灰度占位撑住；所有视频默认只在悬停 / 长按时触发，不自动霸屏、不抢视线。前阵子我动态页图片全炸，就是这类需求没处理好，这次一并做扎实了喵

以后我会在文章里大量用这个功能，回头你看看动起来的感觉喵

全站搜索

之前想找一篇老文章，只能一个栏目一个栏目翻，翻到眼瞎。V3 加了全站全文搜索，按标题、正文、标签建立索引，输入几个字就能直接定位。写了几十篇文章之后，这是刚需，早该有了。

👋你现在可以鼠标点击右上角的搜索图标，试着搜索一下“实况图”，看看会出现什么结果吧～～

实况模块

除了文章里的实况图，还单独做了一个实况总入口。后台可以自定义封面和视频，系统生成一个识别码，把这个码发给朋友，别人扫码就能看到你这段实况。一个落在内容里，一个独立成页，两个入口配套着用。

天气卡片

首页加了一块天气卡片，根据你的 IP 自动定位城市，显示当前实况和温度。晴天、阴、下雨一目了然。

致谢名单

建站以来，帮我解决过问题、给过建议、一直陪着这个站的朋友，我把他们写进了新增的"致谢"页面。这些人不该只在某篇文章的角落里被提一句，值得有个专门的位置。（列表成员以实际为准哦）

版权中心

隐私政策

访客数据（IP、设备、访问来源）会被记录，用来做访问统计和站点防护，这个一直都有，但以前没写过。V3 我新增了专门的隐私政策页，把这些数据到底存了什么、怎么用、用户有哪些权利，都白纸黑字写明白了。

顺便说一句，安全封禁依赖的也是这些记录，两者是一套东西，写清楚之后大家逛着也踏实，想看随时能查到。

文章历史版本

以前文章改错了就是真改错了，找不回来。V3 给每篇文章都加了历史版本记录，每次保存都会留一个版本快照。

~~我之前改v2那篇文章改砸了、手滑删了一大段。~~

写长文最怕这个，一段几千字敲完保存，结果越改越差还回不去。现在没有这个顾虑了，改之前先把昨天那版留好，胆大了不少hh

回收站

以前点删除，数据就直接没了，后悔都来不及。V3 把文章、动态、评论这些的删除改成了先进回收站（软删除），而不是彻底抹掉。误删的东西能一键恢复，想清楚了再清空回收站才真正删掉。

这个设计跟前面的历史版本是一套思路：重要的东西多留一分余地，出意外时还有后悔药吃。删错东西这个坎，终于不用翻数据库去捞咯～

关于页

关于页也是这版重做的重点。v2的版本只有基础的站点介绍和服务器状态，而v3则是从0开始重新写了它。

在全新的关于页，你可以看到我的自我介绍（支持分段markdown标记），博客的统计数据，服务器的负载状况/宽带占用，我的GitHub贡献和gitee仓库，博客更新热力图，我投稿的b站视频，怀旧版博客（有待完善），以及本站的更新日志。

~~（真的超多哦）~~

在关于页的左上方，你还可以点击按钮前往本站的“鸣谢”和“版权中心”哦～

👉去看看焕然一新的关于页

友人帐页面重设计

友链"友人帐"这页也花了不少心思重做。背景换成了动态粒子星空，站与站之间用淡入淡出的"丝带"曲线连起来，配合磨砂玻璃质感的卡片，整体不再是以前那张板着的表。

每张卡片做了玻璃拟态：封面图、渐变纹理、白色光点，头像带一圈光环，鼠标移上去有微妙的悬浮反应。顶部「友人帐」三个字也是逐字弹入开场的，小彩蛋配小细节，整体比之前清亮、年轻了不少。

下面照例是申请条件、博客信息这些；「博客信息」还加了一键复制，换链沟通时直接把本站信息复制发过去就行，省得手打。

👉去看看焕然一新的友人帐（别忘了回来哦）

管理后台大改

这一版后台模块从二十多个一路涨到四十多个，几乎是把原来散落在别处的东西都集中进来了。除了常规的文章、动态、评论管理，新增了安全风控（黑名单、告警、审计日志可视化）、AI 中心、版权管理、回收站、运维日志这些入口。

以前封个IP、查个日志、看条告警都得翻数据库、敲命令，现在在后台点几下就完成。管理视角也从单一的"维护内容"，升级成了内容、安全、数据一起管，日常维护顺手了不少。

MCP：AI 也能帮我维护博客了

这大概是这版我最意想不到的用法。我把博客后台封装成了一个 MCP 服务，让懂我的 AI 客户端（TRAE、Claude 这类）也能像我一样帮我看后台。

原理不复杂：在后台「令牌管理」生成一个带权限范围的私有令牌（PAT），MCP 服务拿着这个令牌就能调用博客的接口。文章、动态、项目、资源、友链审批、评论、站点设置、数据大盘……这些都变成了一块块可以调用的工具。

权限是跟着令牌走的——勾选了哪些 scope 才能动哪些数据，令牌可以随时吊销、过期自动失效，就算漏出去也能及时切断。也就是说，能让 AI 替我干活，但也把它关在权限笼子里，怎么用由我说了算。

以后想让它帮我写篇草稿、把友链申请审批一下、查查访问大盘，喊一声就行——这也是我把博客"交给 AI"的第一步喵。

站点安全加固

这版的一个重点，也是改动最花心思的部分。开个玩笑，之前博客被克隆那件事给我提了个醒，既然已经被盯上过，这次就一次性把该挡的都挡上。我对博主说的安全，从来不是口号，要有东西落地。

先是一套主动侦查的自动风控引擎，每天在服务器前端盯着进来的每个请求。它认识几十种常用安全扫描工具，命中恶意UA直接拒绝；还会盯常见的探路路径（比如 /.env、/.git/、/wp-login.php 这种来找后门的），一旦发现直接报404，让对方以为压根没有这个目录。

你可能会问，怎么不直接封？这里有个分寸。误伤最讨厌，所以我给主流搜索引擎和AI爬虫建了白名单，先放行它们再谈防御，普通访客完全不受影响。

那怎么算恶意？分两类。一类是明确的高危信号，比如恶意扫描器UA、探路路径、非法Host，属于实锤，一次命中就直接封，默认24小时到期自动解封；

另一类要靠累计，典型的就是登录防护，登录接口挂了ALTCHA无感验证，你在页面上敲几个字根本感觉不到它存在，但机器脚本会被卡住；再叠加每IP每小时3次的限速，以及1小时内输错密码超过5次封1小时，正常手滑输错几次完全没事。这样既堵死了暴力破解，又不会把真人误伤。

封禁也不只是应用层拦一下。管理后台手动加的IP，会真正落到内核级防火墙DROP规则，连接直接被丢弃，不是做个样子。临时封禁的都带过期时间，到期自动清理，不用人工去解。

最后是所有关键操作留痕。后台每一次封禁、解封、改文章、清空告警，都记进审计日志，谁在什么时间干了什么都清清楚楚，出问题能追到人。

后台还专门加了个安全风控模块，黑名单、告警记录、审计日志都可视化，一键管控，不用再摸黑翻数据库。

网站安全大升级

除了前面说的后台风控，这版在最外层的 Nginx 上又加了一道自建的轻量 WAF，跟应用层的自动防御配合，构成双保险。这次是 9 月初做的，主要针对之前的克隆事件，把防线从"应用层"再前置到了"网关层"。

第一道：Host 白名单 + SNI 校验。WAF 有一份本站域名的白名单，非本站的 Host 直接 444 断开；443 端口还额外校验 TLS 的 SNI，就算对方带着合法 Host 用 IP 直连，也被拦在握手阶段。克隆站、仿冒站连门都进不来。

第二道：CORS 动态回显。只有在白名单里的域名，浏览器才允许跨域读取本站接口；克隆站因为来源不在名单里，浏览器的跨域拦截会直接把请求挡掉，哪怕它拿到了 HTML 也调不动数据。

第三道：恶意指纹识别。几十种扫描器和攻击工具的 UA（sqlmap、nuclei、nikto、masscan……）直接 403；curl / wget / Python 这类批量下载器热链静态资源、上传目录时会被 444 断开；GET 请求里还检查 SQL 注入、XSS、路径穿越、敏感文件、命令执行这类攻击特征，命中即 403。

第四道：限流。全局限速 30 次/秒 + 突发量，超过直接 429 / 连接段保护，防 CC 和暴力破解。跟应用层的封 IP、登录防护叠在一起，分层拦截。

一句话：以前是"应用层一个点防"，现在是"网关到应用两层一起防"，克隆、扫描、爆破、爬取这套组合拳，基本都挡在门外了。

外观 / 体验的打磨

外观这块我刻意保留了lcrworld长久以来的设计风格，在不颠覆的基础上做减法再强化。全局固定背景，切换页面不会白闪；桌面端是胶囊样式的导航，手机上自动收成抽屉菜单，配色和玻璃质感一脉相承。

阅读体验是这版重点打磨的地方。看长文时顶部有阅读进度条，播放音乐时徽标会变为mini音乐播放器，右下角有返回顶部，侧边栏有自动生成的文章目录，点一下跳到对应章节，来回翻很方便。首页的挂件也比以前丰富，天气、站点统计、标签云、公告横幅、音乐一应俱全，想看的开关一次就能找到。

左上角灵动岛音乐播放器

这版把听歌的入口也重新收拾了一遍。在"音乐"页点开一首歌，左上角会浮起一枚"灵动岛"样式的迷你播放器，唱片封面跟着旋转，歌名、歌手、进度、音量一目了然，完全不挡内容。

麻雀虽小五脏俱全：上一首 / 下一首 / 播放暂停、进度条拖拽、音量调节、单曲 / 顺序 / 随机三种模式都塞在里面；点一下还能展开歌词面板，跟唱看着也方便。播放速度也能调（0.5x~2x），语速快就放慢点咬字，当背景音就 1.5x 带过。

它还支持整套键盘快捷键：空格播放 / 暂停、←/→ 快退快进 5 秒、↑/↓ 调音量、M 静音、L 开关歌词。跨页面不断流，你在别的页面逛着，歌也一直在放。

Bug 修复

上次动态页图片全炸，根源就是图片渲染配合 overflow:hidden 藏图的方式不对。V3 全面改成更稳的裁切方式，SSR 白屏抖动、按钮白框、列表闪烁这类问题一并处理了。每个都是实际用的时候踩到才修的。😭

最后

从 7 月初到现在，一个多月，换个框架、加点功能、修一堆毛病。做这事的初衷挺简单：老框架用得别扭了，就想把它换掉，顺手把一直想做的新功能一起落地。

如果你逛到了这篇文章，去文章列表找一篇带实况图的文章，鼠标移上去或者长按一下，看看照片"活过来"是什么感觉。难得遇到这样的博客，也算我给你的一个小惊喜。

下次再见～

侵权举报