让人炸毛的zen缓存污染😖
到我写完的时候，这个Qr_Code的功能已经实现了😊，就在文章的右下角！ 不过欢迎大家看我怎么翻车，下面就是我的踩坑实录了，看看我是怎么一步步实现的：
本来想给小花园增加一个Qr_Code的功能🌼，docusaurus项目里面的环境和脚本都好好的，结果是渲染用的zen浏览器缓存污染，导致一直报错。我前后把我的脚本删来改去都无效，甚至把小花园的docusaurus文件夹删除，重新解压备份都无效。真的很吓人😟
除了这个问题，我还是很推荐大家用zen浏览器毕竟它侧边栏和多工作区真的很顶👍
不过用edge本地渲染居然什么事没有，整了几个小时，得到一个教训。
还是要多备份版本，不要任何偷懒。不然多年积累就没了。 也要保留一些好像挺落后的浏览器，不然严重误导判断。这种策略倒也不止适用于浏览器✅。
最后这个Qr_Code功能都不知道算不算实现到，显示了，报错，删掉了。回滚，什么都没实现，得到了一个教训，然后留在我认知里面曾经有一段Qr_Code. 已经实现了啦😄
这段是AI复盘，既然协作跑一轮了，那就偷懒不自己写了😄
第一步
在docusaurus根目录打开终端（直接 cmd）：
npm install qrcode.react
第二步 在src/components新建QrCode.js 让 AI 调取代码填写 在 src/theme 新建一个 BlogPostItem.js，让 AI 调取代码填写，把二维码挂到文章底部。
第三步 启动 npm run start，Zen 报错，Edge 正常。 开始怀疑代码、怀疑环境、怀疑人生。
第四步 删除 QrCode.js，删除 BlogPostItem.js，删除 .docusaurus，删除 node_modules/.cache，重装依赖，重启电脑，依然报错。
第五步 回滚整个项目，解压备份，依然报错。 开始觉得“小花园要塌了”。
第六步 在 Edge 打开 localhost:3000，一切正常。 意识到不是代码的问题，是 Zen 的缓存污染。
第七步 清空 Zen 所有缓存、Cookie、Service Worker、Code Cache，甚至 about:support 里重置浏览器。 依然报错。
第八步 放弃 Zen，改用 Edge 开发。 二维码功能在 Edge 上正常工作。
第九步 把 QrCode 改到最小尺寸 40，透明背景，右对齐，文案改成“神经肉鸡传播源”。 像一枚印章，安静地盖在每篇文章末尾。
第十步 决定保留这个功能，但不纠结 Zen。 把 QrCode.js 和 BlogPostItem.js 加上 .bkd 后缀，需要的时候再改回来。
功能实现了，但没完全实现。 教训比代码更值钱：
多备份版本
不要迷信单一浏览器
缓存是隐形敌人
有些问题不是你的问题，是工具的问题
我把跑通的脚本代码也给你们👇
QrCode.js
路径是src/components/QrCode.js
import React from 'react';
import { QRCodeSVG } from 'qrcode.react';
import { useLocation } from '@docusaurus/router';
export default function QrCode({ url, size = 50 }) {
const location = useLocation();
// 只在博客详情页显示（路径匹配 /blog/xxx）
const isBlogPost = /^\/blog\/[^/]+$/.test(location.pathname);
if (!isBlogPost) return null;
const targetUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
if (!targetUrl) return null;
return (
<div style={{ margin: '12px 0', textAlign: 'right' }}>
<QRCodeSVG
value={targetUrl}
size={size}
bgColor="transparent"
fgColor="currentColor"
level="H"
/>
<p style={{ fontSize: '10px', color: 'var(--ifm-color-emphasis-600)', marginTop: '4px' }}>
扫码分享本文
</p>
</div>
);
}
BlogPostItem.js
路径是src/theme/BlogPostItem.js
import React from 'react';
import OriginalBlogPostItem from '@theme-original/BlogPostItem';
import QrCode from '@site/src/components/QrCode';
export default function BlogPostItemWrapper(props) {
return (
<>
<OriginalBlogPostItem {...props} />
<QrCode />
</>
);
}
