ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

书签管理一次讲透:iori-nav后台操作指南——增删改查、多级分类与Chrome书签一键导入导出

书签管理一次讲透:iori-nav后台操作指南——增删改查、多级分类与Chrome书签一键导入导出
  • 前端
  • 后端

【免费下载链接】iori-nav

一个优雅的书签收藏与分享平台,基于Cloudflare Workers构建

项目地址:https://gitcode.com/gh_mirrors/io/iori-nav
点击查看免费下载

iori-nav(灰色轨迹)是一个基于 Cloudflare Workers 构建的优雅书签收藏与分享平台。本文是 iori-nav 书签管理后台的完整操作指南,带你快速掌握书签的增删改查、多级分类整理,以及 Chrome 书签 HTML 文件的一键导入导出,无需写一行代码,10 分钟即可完成日常维护。

一、进入管理后台:两步登录

  1. 浏览器打开你的站点地址,URL 后加/admin,例如https://你的域名/admin。
  2. 输入部署时在 KV 中配置的用户名与密码(对应 schema.sql 所支撑的认证体系,凭据存放在NAV_AUTH命名空间)。

登录后会颁发 HttpOnly 会话 Cookie(默认 1 天有效,可设为 1/7/30/60/90 天),凭据不再暴露在 URL 中,支持一键退出。后台页面结构见 public/admin/index.html。

二、新增书签:一个表单搞定

点击顶部工具栏的「添加书签」,弹出表单包含以下字段:

  • 名称 / URL:必填,URL 会自动做规范化与转义校验,防止脏数据
  • Logo:留空时系统会根据 URL 自动抓取网站图标
  • 描述:不会写介绍?点击描述框旁的 ✨ 按钮,AI 一键自动生成描述
  • 分类:级联下拉框,直接选择多级分类中的目标子分类
  • 排序值:数字越小越靠前,默认 9999
  • 是否私密:勾选后访客不可见,仅后台可见

保存逻辑位于 public/js/admin-bookmarks.js,接口由 functions/api/config/ 目录下的 REST API 处理。

💡 小技巧:把常用工具填上「常用推荐」等自定义分类,前台导航栏会展示为快捷筛选按钮。

三、修改与删除书签:搜索 + 卡片操作

「书签列表」页支持关键词搜索与按分类筛选(public/js/admin-bookmark-list.js):

  1. 在顶部搜索框输入网站名或 URL 片段,秒级定位目标书签
  2. 每张卡片上有两个圆角按钮:
    • 🔵编辑:修改名称、URL、描述、分类、排序、隐私状态,同样支持 AI 生成描述
    • 🔴删除:弹出确认框后才真正删除,防误操作

删除或修改后系统会自动标记首页缓存失效,访客下次访问即可看到最新内容。

四、多级分类整理:拖拽排序 + 层级管理

切换到「分类列表」Tab(public/js/admin-categories.js),分类以树形结构展示:

操作说明
添加分类点击「添加分类」,填写名称、选择父分类(0 级为顶级)、排序值、是否私密
编辑分类点击分类卡片上的编辑按钮,可改名称、更换父级实现"移动分类"
拖拽排序直接按住分类卡片拖到目标位置,松手即保存,后端按 100 条一批写入(functions/api/categories/reorder.js)
删除分类弹出确认框;含私密书签时会自动联动隐私检查

分类层级建议控制在 2~3 级:例如「开发工具 → 前端框架 → React 生态」,前台导航会以级联菜单呈现。

五、批量管理:一次处理几十条

点击工具栏「批量管理」(public/js/admin-batch.js),进入表格视图:

  • 按分类筛选、勾选单条或全选
  • 批量删除:一次清理失效链接
  • 批量更改分类:把散落书签归入新分类
  • 批量更改隐私:一键公开/隐藏

六、审核用户投稿:待审核列表

开启公开投稿后(通过环境变量ENABLE_PUBLIC_SUBMISSION控制),访客提交的书签会进入「待审核列表」Tab(public/js/admin-pending.js):

  • 每条记录提供通过 / 拒绝两个按钮
  • 通过后书签立即出现在前台并自动刷新缓存;拒绝则直接移除

不信任来源时,可将ENABLE_PUBLIC_SUBMISSION设为关闭,相关接口自动返回 403。

七、Chrome 书签一键导入:迁移零门槛

把浏览器里攒了几年的书签搬进 iori-nav,只需 4 步:

  1. Chrome 打开chrome://bookmarks→ 右上角菜单 →导出书签(得到 HTML 文件)
  2. 后台点击「导入」→ 选择「从文件导入」
  3. 选择刚导出的 HTML 文件,系统自动解析出分类树与网站列表,并显示导入预览(functions/api/config/import.js)
  4. 核对后点击确认导入,全部书签连同层级结构落库

✅ 除 Chrome HTML 格式外,还支持导入 iori-nav 自己导出的.json备份文件,也内置了公共书签库可直接选用现成的网站合集。

八、导出备份:JSON 一键下载

点击「导出」,在弹窗中勾选是否包含私密书签,确认后自动生成config.json下载(functions/api/config/export.js)。建议每次大批量改动前导出一次,换服务器或迁移时直接反向导入即可完整还原。

九、顺带掌握:首页外观设置

数据整理完,顺手点「设置」打开系统设置弹窗,可实时预览并调整:

  • 卡片设置:桌面/手机分别配置列数(手机支持 1/2/3 列)、卡片风格、切换动画、毛玻璃与圆角
  • 壁纸设置:更换背景图
  • AI 设置:配置描述自动生成所用的 AI 接口

常见问题速查

  • 改了书签前台没变化?首页有边缘缓存,后台改动会自动标记缓存失效;也可点击工具栏「刷新首页缓存」手动触发
  • 公开书签放进私密分类被拒?公开书签不能挂在私密分类下,系统会提示并联动调整(public/js/admin-bookmark-privacy.js)
  • 忘记密码?到 Cloudflare 控制台修改NAV_AUTHKV 中的admin_password条目即可

📌 核心文件索引:public/js/admin-bookmarks.js · public/js/admin-categories.js · public/js/admin-import-export.js · functions/api/config/import.js · schema.sql

掌握以上操作,从导入 Chrome 书签到整理成多级分类的专属导航站,整个流程不超过半小时。

  • 前端
  • 后端

【免费下载链接】iori-nav

一个优雅的书签收藏与分享平台,基于Cloudflare Workers构建

项目地址:https://gitcode.com/gh_mirrors/io/iori-nav
点击查看免费下载

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进