[自行打包] 自制资源挂靠网站 [1+100Kb][老王自建盘]

a1575718520

经常为收藏的资源分散记不住难过，收藏为书签还显得更凌乱
所以自己写了个静态网页，不依赖任何数据库、语言、网络，纯HTML+JS

功能说明书不用看的那么细，点进去搞两下就会了
最重要的就是保存JSON和导入JSON，这两条没看明白会导致数据丢失，很难受
保存JSON是直接保存的，不会弹窗，不会请求。导入JSON需要自己选择文件夹。这两条功能都是检索文件夹下的.json文件，所以目录下必须只能有一个.json文件
用熟练了很方便，可以当一个本地数据库用，主要就是收纳零碎的网站和链接，起到一个归纳的作用。不用找书签找的难受了，反正我用的挺得劲的。
功能如下：
网站二级挂靠工具 — 功能说明书（当前完整版）

单文件 HTML + CSS + JavaScript，无框架、无后端。用浏览器直接打开即可使用。

---

一、产品定位与总体架构1.1 用途

面向「多网站、同关键词检索、结果归档」场景：在多个网站上完成搜索后，把结果链接按网站 → 一级挂靠 → 二级挂靠两级结构整理、标记、排序、批量打开与导出。

1.2 数据层级text


[color=var(--fg-primary)][size=0.9em]网站（Site） └─ 一级挂靠（Level-1）：检索主题 / 关键词分类      └─ 二级挂靠（Level-2）：单条结果（标题 + 网址 + 评分）

另有独立模块：

• 粘贴板：临时多行文本 + 网站标签关联
• 搜索：当前站 / 跨站检索二级
• 路径与 JSON：授权文件夹后读写 二级挂靠数据.json
  

1.3 技术形态项说明
形态单页、单文件 .html
依赖无（纯原生）
临时存储sessionStorage（键名：site_level2_attach_session）
永久存储File System Access API + IndexedDB 记住目录句柄
同目录尝试启动时 fetch('二级挂靠数据.json')（本地 http 更稳，file:// 常被拦）
推荐浏览器Chrome / Edge（路径授权依赖此）






1.4 界面分区（自上而下 + 左侧）

• 标题与说明条
• JSON 拖入区
• 粘贴板卡片
• 搜索卡片
• 搜索结果区（有关键词时出现）
• 网站 Tabs + 一级/二级主工作区
• 左侧浮动：选择路径并导入、路径提示、保存到 JSON
• 二级书签导入弹窗（按需）
• 底部 Toast
  

---

二、存储与生命周期2.1 sessionStorage（临时）

• 时机：几乎每次增删改后自动 autoSave()
• 内容：全部 sites、results、clipboard
• 清空：关闭浏览器标签/窗口后清空（符合「不长期留在浏览器里」）
• 界面提示：「✓ 已临时保存 时分秒」
  

2.2 文件夹 JSON（偏永久）操作行为
选择路径并导入系统选目录 → 写入 IndexedDB 记住 → 自动找并导入 .json
保存到 JSON未选路径时禁用；有路径则写入目录下 二级挂靠数据.json
多 JSON优先 二级挂靠数据.json；否则按名称排序取第一个，多个时确认
刷新后尽量恢复目录授权；无站点数据时可自动再导入
权限失效保存时可能再弹权限；需重新「选择路径并导入」

限制说明：不能手填 G:\xxx 直接读写；必须用户选一次目录。浏览器安全策略限制。

2.3 拖入 JSON

顶部虚线框拖入 .json 备份，解析后覆盖当前会话数据。

2.4 同目录自动加载

无记住路径且会话无站点时，尝试请求同目录 二级挂靠数据.json。

---

三、网站管理（Tabs）3.1 添加

• Tabs 最右侧 + 展开面板
• 字段：网站名字、域名/URL（自动规范化：去协议、路径、www.）
• 域名不可重复
• 添加后自动选中该站
  

3.2 Tab 展示与操作元素功能
⋮⋮拖动调整网站顺序（即下拉/展示顺序）
站名点击切换当前站
↗新标签打开 https://域名
×删除站及下属全部一级/二级（确认）






3.3 其它

• 网站按名称排序（添加面板内）
• 默认选中第一个站；去掉「请选择网站」空选项
• 无站时主区提示添加
  

3.4 切换站

切换清空当前展开状态；展示该站一级列表。

---

四、一级挂靠4.1 添加

主区顶部栏：

• 一级名称（必填）
• 一级链接（可选）
• 添加一级挂靠
  

同站下一级名称不区分大小写查重。

4.2 展示

• 可折叠块；默认收起
• 全部展开 / 全部收起 与添加同一行
• 展开状态在重绘后尽量保持（keepOpenIds）
• 有链接时标题可点打开
• 条数徽章
• 标记完成：勾选后整块浅绿；表示该类目检索已完成
  

4.3 排序与结构

• ⋮⋮ 拖动调整一级顺序
• 编辑：改名称、链接
• 删除：连带其下全部二级（确认）
  

4.4 已去掉的能力

• 页码相关全部移除
• 一级「按名称排序」按钮已去掉
  

---

五、二级挂靠5.1 单条结构

• 标题
• 网址（支持网页与本地路径）
• 评分 0～5 星（默认 0）
  

5.2 添加方式

A. 大文本框（智能粘贴）

• 两行：标题一行、地址一行，顺序不限
• 粘贴时自动识别 URL 并尽量排成「标题 + 换行 + 地址」
• 支持：
  
  • http(s)://、www.
  • 本地：G:\Download\A、file:///、UNC \\server\share
    
• 打开时本地路径转为可打开的 file:/// 形式
• 同级网址查重（规范化后比较：协议、尾斜杠、大小写等）
  

B. 书签标签导入（弹窗）

• 位置：工具栏 取消全选 后的 导入
• 居中弹窗；点遮罩 / 取消 / Esc 关闭
• 格式示例：
  

text


[color=var(--fg-primary)][size=0.9em]<DT><A >标题文字</A>

• 标题 = 标签内文本；网址 = HREF
• 重复网址跳过；标题可重复
• 成功导入后短暂提示并自动关窗
  

5.3 列表操作功能说明
⋮⋮ 拖动仅手柄可拖，避免与文本选择冲突
复选框批量打开 / 删除 / 移动
标题链接新标签打开
星级改字左侧；悬停预览，点选 1～5，× 清零
改大文本框两行编辑（同添加规则）
删除单条确认删除






5.4 批量工具栏（每个一级内）

顺序大致为：

• 打开全部 — 一次打开该级下所有二级（多时确认防拦截）
• 打开选中
• 删除选中
• 全选 / 取消全选
• 导入 — 书签弹窗
• 按名称 — 标题 zh-CN 排序
• 按评分 — 仅从高到低（无升序按钮）
• 按网址 — 按「域名主体」排序（见下）
• 移动选中到… — 下拉可选其它站的其它一级（跨站移动）
  

5.5 「按网址」排序规则

• 去协议、www.、路径、查询、锚点
• 处理多段后缀（如 .com.cn、.co.uk 等）
• 取主域名标签排序；相同再按标题
• 本地路径按规范化后的 file 路径字符串参与排序
• 不限于 .com，兼容 .vip、.cc 等
  

5.6 跨站移动

• 勾选二级 → 选择目标「网站 → 一级」
• 目标已存在相同规范化网址则跳过并统计
• 可跨不同网站移动
  

---

六、搜索6.1 两个搜索框（同一行，在 Tabs 上方区域）框范围
仅当前网站当前选中站的二级标题 + 网址
跨网站全部站的二级标题 + 网址

• 输入即搜；两个框互斥清空对方
• 清除 清空关键词与结果区
  

6.2 结果区（独立卡片）

• 展示：评分星、标题链、来源标签「站名 → 一级名」
• 打开选中 / 打开全部结果
• 按网站排序 / 按评分（高到低）
• 与主列表数据同源，仅展示层独立
  

6.3 已去掉

• 一级块内部的二级搜索框
• 仅搜标题不搜网址的旧逻辑（现标题+网址都搜）
  

---

七、粘贴板7.1 开闭

卡片标题旁 打开粘贴板 / 关闭粘贴板，面板折叠。

7.2 添加

• 多行文本，每行一条
• 添加到粘贴板：去重；新条目插在最上方
• 条目点击文本 → 复制到系统剪贴板（Toast「已复制」）
  

7.3 行内结构

左到右大致：

• 复选框
• 文本（点复制）
• 已关联网站标签（可 × 移除）
• +：展开本行可选网站列表（未关联的站）；每站每行只能选一次
• 标绿 / 已完成：手动强制完成样式
• ×：删本行
  

7.4 绿色行条件

满足任一即整行变绿：

• 已关联当前所有网站，或
• 手动「标绿」
  

7.5 批量

全选 / 取消全选 / 删除选中 / 清空粘贴板。

7.6 与网站列表联动

删站或加载数据时，会清理无效的 siteIds。旧版纯字符串条目会升级为 { text, siteIds, forceGreen }。

---

八、打开链接策略

• 统一经 toOpenableUrl：补协议、本地盘符转 file:///
• 批量打开：不再分段延迟，循环立即 window.open
• 超过 8 条会确认（减轻弹窗拦截困扰）
• 浏览器仍可能拦截多标签，需用户允许
  

---

九、拖拽体系（仅手柄）对象手柄作用
网站 Tab⋮⋮调整站顺序
一级块⋮⋮调整一级顺序
二级行⋮⋮调整二级顺序

输入框、文本选择不启动拖拽，避免「选字却拖走行」。

---

十、评分

• 每条二级 0～5 星
• 位置：操作区「改」左侧
• 悬停预览，点击设定，× 清除
• 参与：一级内按评分排序、搜索结果按评分排序
  

---

十一、导出11.1 保存到 JSON（左侧大按钮）

写入授权目录 二级挂靠数据.json，结构含 sites、results、clipboard。

11.2 导出为 HTML

（若当前构建中仍保留该函数）生成可读静态书签页：按站 → 一级 → 二级列表，含完成标记与星级；浏览器下载。

注：近期 UI 以「保存到 JSON」为主；HTML 导出逻辑在完整脚本中仍可能存在，以你保存的那一版源码为准。

11.3 拖入 / 路径导入 JSON

恢复整包数据；会去掉历史字段 page（页码已废弃）。

---

十二、查重规则汇总场景规则
网站域名规范化后唯一
同站一级名称不区分大小写唯一
同级二级网址normalizeUrl 后唯一
粘贴板文本完全相同文本不重复添加
书签导入同级已存在相同网址则跳过
跨站移动目标级已存在相同网址则跳过

normalizeUrl：可打开 URL → 去尾 / → 小写。

---

十三、交互与状态细节

• 展开保持：添加/编辑/排序/导入后尽量保持一级展开
• 完成标记：仅视觉与数据字段 done，不锁编辑
• 空状态文案：无站、无一级、无二级、粘贴板空、搜索无结果均有提示
• Toast：复制、部分导入/保存提示
• 状态行：主操作成功/失败短时文字
• 弹窗导入：成功约 0.5s 后自动关闭；仅跳过无成功时可留在框内看统计
  

---

十四、兼容与限制点说明
手填磁盘路径读写不支持
目录授权Chrome/Edge；需用户手势
file:// 打开 HTML同目录 fetch JSON 常失败；可用本地静态服务器
file:/// 打开本地二级受浏览器本地文件策略限制
多标签批量打开可能被拦截
Cookie / nginx 400与本工具无关（本工具不用超大 Cookie）
关闭窗口session 数据清空；IndexedDB 中的目录句柄仍在，但 JSON 文件在磁盘上

---

十五、推荐工作流

• （可选）选择路径并导入 → 恢复上次 二级挂靠数据.json
• + 添加各检索网站，↗ 可直达
• 为每站添加一级（关键词/类目），需要时勾选「标记完成」
• 自去各站搜索；结果用二级框粘贴添加，或 导入 书签标签批量进
• 评分、排序、拖拽整理；跨站用「移动选中到」
• 粘贴板放待处理文案，用 + 打网站标签，齐了变绿
• 搜索框快速定位二级
• 保存到 JSON 落盘；关窗即可（会话清空，文件保留）
  

---

十六、数据模型（逻辑结构）JSON


[color=var(--fg-primary)][size=0.9em]{  "sites": [    { "id": "…", "name": "站名", "domain": "example.com" }  ],  "results": {    "站点id": [      {        "id": "…",        "title": "一级名",        "url": "可选链接",        "done": false,        "items": [          { "title": "二级标题", "url": "https://…", "rating": 0 }        ]      }    ]  },  "clipboard": [    { "text": "一行文本", "siteIds": ["站点id"], "forceGreen": false }  ]}

---

十七、功能清单速查

网站：添加、删除、访问、拖拽排序、按名称排序、Tab 切换

一级：添加、编辑、删除、折叠、全展/全收、完成标记、拖拽排序、可选链接

二级：智能粘贴添加、书签弹窗导入、编辑、删除、评分、拖拽排序、查重、按名称/评分/网址排序、全选、批量打开/删除、跨站移动

搜索：当前站/跨站、标题+网址、独立结果、打开、按站/按评分排

粘贴板：多行、置顶、复制、站标签、满站/手动标绿、批量删

存储：session 自动存、路径记住、保存/导入 JSON、拖入 JSON、同目录尝试

其它：本地路径二级、打开全部样式与确认、手柄拖拽、中文排序

xzwlh328

技术贴 支持一下 但是怎么用呢

匆匆一过

各种大神都有啊

Lzcxfys

我去，虽然看不太懂但是感觉可以出一篇论文了

hhhhgnj

看不懂，但是感觉很nb

qiao8879

技术到位，造福一方呀！