2025.08.31宝藏库配置升级

关联主题:: 苏苏宝藏库搭建过程及说明
同级:: 2025-08-31_星期日
下一级::

---

一、缓存问题

问题说明

内容推送到Github并发布到Cloudflare以后，不同平台看到的内容不一致。

具体思路及方法

浏览器缓存就是这样的：

• 你更新了网站代码并推送到GitHub
• 但是用户的浏览器还”记住”了旧版本的文件
• 所以不同用户看到的内容可能不一样

第一步：给HTML页面加”禁止缓存”标签

在 index.html 文件的头部，我加了这些代码：

<!-- 强化缓存控制 - 确保所有设备都能看到最新内容 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate, max-age=0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

通俗解释：这就像在书的封面贴了个标签说”每次都要拿最新版本，不要用旧的”

第二步：给所有文件加”版本号”

我把所有的CSS和JS文件链接都改成了这样：

<!-- 之前 -->
<link rel="stylesheet" HREF="css/style.css">
<script src="js/admin.js"></script>
 
<!-- 之后 -->
<link rel="stylesheet" HREF="css/style.css?v=20250131">
<script src="js/admin.js?v=20250131"></script>

通俗解释：

• 原来文件叫 style.css
• 现在文件叫 style.css?v=20250131
• 浏览器会认为这是两个不同的文件
• 所以会重新下载新版本

第三步：创建自动更新脚本

我还创建了一个 update-cache-version.js 脚本，以后你只需要运行：

node update-cache-version.js

它会自动把所有文件的版本号更新为今天的日期。

⚙️ 具体是如何实现的？

版本号系统

• 格式：?v=20250131（年月日）
• 原理：浏览器看到不同的文件名就会重新下载
• 效果：每次更新版本号，所有用户都会下载最新文件

多重保障机制

1. HTML缓存控制：告诉浏览器”不要缓存主页面”
2. 文件版本控制：给每个文件加上时间戳
3. 自动化脚本：一键更新所有版本号

🎯 实现的效果是什么？
解决前的问题

• 👎 你更新了代码，但用户A看到旧版本
• 👎 用户B看到新版本，用户C还是旧版本
• 👎 需要用户手动按Ctrl+F5强制刷新
• 👎 不同设备看到的内容不一致

解决后的效果

• ✅ 所有用户看到相同内容：无论什么设备、什么浏览器
• ✅ 自动更新：用户无需任何操作，刷新页面就能看到最新版本
• ✅ 即时生效：你推送到GitHub后，几分钟内全世界用户都能看到更新
• ✅ 彻底解决：再也不会出现”为什么我看到的和你不一样”的问题

📝 日常使用流程
以后更新网站时

# 1. 修改代码（比如改了CSS样式）
# 2. 更新缓存版本号
node update-cache-version.js
 
# 3. 推送到GitHub
git add .
git commit -m "更新样式"
git push

核心推送指令：

# 1. 修改代码（比如改了CSS样式）
# 2. 更新缓存版本号
node update-cache-version.js
 
# 3. 推送到GitHub
git add .
git commit -m "更新样式"
git push

二、文件夹及链接迁移

这部分完全仿照永硕e盘转移文件夹的操作，只是我又增加了根目录文件夹的转移操作。

三、导入浏览器书签🔖🔥

为此我先写了一个浏览器插件，可以导出指定文件夹下的所有子文件夹及链接，导出为JSON格式（以层级树）的方式。

在宝藏库后台，点击添加文件夹的时候，可以将JSON代码导入，然后转换为支持的JSON格式（有一个脚本），再将其导入咱们的宝藏库，相关的图标等会自动完成转换。

将导出的数据转换为支持的JSON格式

支持将转换后的JSON格式，添加到网站。

• 其实有了这一步操作，我后面可以完成更多自定义的操作。比如本地编写的MD资源，转换为JSON格式后批量导入进去。再比如将网上收集的各种书签批量导入进来。

晚上我又进行了一次升级，支持自定义浏览器书签HTML导入

其他细节优化：

1、编辑文件夹可对文件夹更换图标；
2、「轮播图」和「底部标识」始终放在底部（和阿虚同学的操作不同），当展开文件夹的时候，这两个部分往下顺移，不遮挡其他内容；
3、”公告支持“里的内容支持Markdown语法，图标支持SVG；
4、支持”分割线“自定义编辑功能；
5、”更新日志“右侧增加数据统计功能，统计所有资源数