头像

白日梦与诗

林深时见鹿，海蓝深见鲸

苏苏宝藏库搭建过程及说明

9分钟阅读

关联主题::
同级:: 2025-08-29_星期五
下一级::

背景说明

作为一名玩机党，我经常会囤积各种资源并将它们零散的推送和归档到各个地方，知识星球、社群、Notion、Obsidian… …

但是找一个什么样的工具来持续的汇总这些资源呢？
我期间探索了很多工具，后面选定了永硕e盘： http://brmys.ysepan.com/ （可惜后来没有坚持更新下去）

后来看到阿虚同学的储物间： https://axutongxue.com/ ，很心动，我觉得这是更好的方案。
也一直想搭建个同款的平台，仔细挖掘，我发现他这个网站也是在永硕e盘的基础上搭建起来的。

于是2023年的时候，我就在Github上找到了阿虚同学的这个项目公开代码： https://github.com/axutongxue/axutongxue.github.io

部属很简单，我直接部属到了Vercel，但问题在于如何上传和编辑内容呢？
我发现这个网站很简单的就是一个简单的HTML，
于是我一开始的方案是在永硕e盘编辑内容，然后手动复制前端的HTML修改后手动在github里编辑…（其实很麻烦）
早期版本： https://baozangku.vercel.app/

可能也是因为上传路径太麻烦了，我后面就放弃了。

现在的方案

由于经常使用cursor，我在claude-4-sonnet的帮助下魔改了一套方案。（2025.08.30）

  • 首先说明，我是这方面的小白，所以在探索的过程中，遇到了很多坑…但总归都是成长。

我不清楚阿虚同学是如何编辑内容的，因为从他的代码里，我没有看到相关的后台及API，只有一个简单的HTML和相应的CSS，所以合理的推测是，他是直接编辑的HTML文件。

用 文本编辑器（如 VS Code、Notepad++、Sublime Text）打开你的 HTML 文件。
手工增加 <ul><li> 这样的层级结构，插入链接。

但是这个方案不适合，我对HTML相关的语言不熟悉。

  • 所以我想到一个方案，直接解决永硕e盘的内容管理方式。

我让AI帮我做了一个管理员后台，当前地址后面加上#admin https://zy.brmys.cn/#admin ，即可跳出一个管理员账号密码登录界面。

image.png

第一天（08.28）的时候，我改了好多内容，结果发现上传到Cloudflare后，并没有和本地同步，修改的HTML文件并没有生效…

研究了一番发现，浏览器不能直接对HTML文件进行修改，即使修改也是保存在了浏览器本地缓存里 localStorage 所以我第一天的修改基本白费了… 只能第二天推导重来。

当前的文件修改方案 

您的操作 → JavaScript收集修改 → 发送给PHP → PHP写入HTML文件 → 网站真正更新

内容架构：

1、HTML（网页结构）

  • index.html - 这是您网站的主页面，就像房子的框架，定义了页面的基本结构，包含了所有的网站链接和分类

2、JavaScript（网页功能）

  • js/admin.js - 这是管理后台的核心文件

  • js/mouse-click.js - 鼠标点击特效

  • 就像房子的电路系统，让网页能够响应用户操作

  1. PHP（服务器处理）🔥
  • save_html.php - 这是关键文件！
  • 作用：接收您在网页上的修改，然后直接写入到HTML文件中
  • 为什么需要PHP：因为浏览器出于安全考虑，不能直接修改服务器上的文件，需要PHP这个”中介”

php的具体处理过程：

   // PHP做的事情（简化版）：
   1. 读取当前的 index.html 文件
   2. 找到需要修改的部分（比如导航菜单）
   3. 用新内容替换旧内容
   4. 保存回 index.html 文件

为什么涉及到PHP？

简单说：因为网页安全限制！

  • 浏览器规则：网页中的JavaScript不能直接修改服务器文件
  • PHP的作用：作为服务器端语言，有权限修改服务器上的文件
  • 工作流程：JavaScript → PHP → 文件系统

这就像：

  • JavaScript是顾客（只能提需求）
  • PHP是服务员（有权限操作后厨）
  • HTML文件是菜品（最终产品）

内容修改及板块介绍

使用终端进入文件夹，然后输入命令

php -S localhost:8000
  • 本地开发需要PHP环境。

然后本地访问： http://localhost:8000/ ，就可以看到完整内容了。
访问 http://localhost:8000/#admin 并输入管理员账号密码就进入后台了。

功能一：添加链接、分割线、文件夹

image.png
当前我只是做了三个简单的按钮，后面我再去换图标。

  • 点击文件夹按钮，就会在当前目录创建一个新文件夹，简单命名，保存或关闭；
  • 点击分割线按钮，会在当前位置添加一个分割线；
  • 点击链接按钮，这个会弹出一个弹窗，进行更加自定义的编辑。

image.png
我挑重点说一下！

  • 更新日期，这个除了在连接的右侧显示，还会关联“更新日志”（后面会提到）
  • SVG代码， https://www.iconfont.cn/ 选定的图标可以在这里自定义添加
    image.png

功能二：点击图标多项编辑

image.png
点击图标后可以对当前链接进行编辑或删除，其中还有一个“多项编辑”功能，点击后会出现一个“多项编辑”弹窗。
image.png

这里显示的都是当前文件的同层级的文件，可以进行拖拽排序，或者批量的删除。

功能三：管理工具-弹窗管理

image.png
点击右侧的“弹窗管理”会跳出一个功能弹窗，在这里对弹窗进行自定编辑和内容管理。

功能四：轮播图管理

image.png
这个模块负责控制顶部的轮播图

功能五：公告管理

image.png

功能六：更新日志

之前我们提到过，编辑链接或者添加链接的时候是可以添加日期的。
根据这个日期，我们会来动态的获取更新日志。（支持自定义日期筛选）
image.png

苏苏宝藏库更新日志的机制说明

推送Github

编辑后的内容，会手动推送到Github

git add .
git commit -m "更新"
git push -u origin main

然后会自动在Cloudflare完成部属。

域名优选

这个直接看这个教程就好了Cloudflare给pages和Worker优选域名

关系图谱

1

反向链接