引言
传言说，每个程序员都会有个自己的导航网站。
我萌生写一个导航网站的写法，是在大学时期对 Chrome 自带的书签系统实在不满意，它只提供基于目录的收纳书签的形式，这让我在收藏网站时非常纠结 🤯。
比如对于 Ant Design 这个网站，我可以把它放在 React 目录中，因为它是 React 生态相关的项目；也可以把它放在 组件库 目录中，这样当我开始一个新项目需要调研组件库时，就可以很方便的在一堆组件库中调研对比；也可以放在 开源项目 或 文档 目录下……
都可以，就是都不可以 —— 总不能在每个目录下都重复添加这个网站 🤷。
浏览器自带的书签系统另一个痛点是，每个分类所用的图标都是一样的：
众所周知仅靠文字检索信息的效率是不高的，如果为每个目录都配上一个合乎语义的图标，通过图标 + 名称的形式是可以提高信息检索速度的。
为了解决这 2 个痛点，也为了检验个人的前端技术能力，我决定写一个导航网站。
迭代历程
这个项目源起大学时期，时至今日，前前后后已经迭代、重构了很多次，功能也丰富了很多。大致历程如下：
- 使用 HTML、CSS、JavaScript 实现的静态页面
- 使用 Vue + NaiveUI 实现的单页面应用（SPA）
- 使用 Next.js 12 (Page Router) + MySQL + Prisma ORM 重构，并增加了内容管理系统（CMS）
- 使用 Next.js 14 (App Router) + PostgreSQL + Drizzle ORM 重构，更好用！更好看！
最近的这次重构，项目正式命名为 BMM，并且开发之初便以开源为目标！
BMM 核心理念
BMM 即 bookmark master，希望可以成为你的专属书签管家 🤵，助你更高效的收纳、分享、探索优质网站。
BMM 抛弃了传统的”分类+标签”管理模式，转而采用完全基于标签的关联系统：标签和标签间关联、书签和标签间关联 🔗。
这种方法为用户提供了更灵活、更直观的书签组织方式，使得信息检索变得更加高效。
亮点功能
1. 简洁明了的书签卡片
比如对于上面提到的 Ant Design，可以创建一个这样的书签：
通过网站图标 + 网站标题，可以很高效的检索到这个书签，同时提高卡片的美观性。
通过简短的描述 + 关联的标签，极少的信息便可以大概知道这个网站提供的主要内容。
2. 高效的标签导航系统
由于 BMM 中的书签只会关联标签，所以能高效的定位目标标签是很重要的，BMM 为此作出了诸多功能。
人脑对于图像的处理速度远高于文字，因此为标签配置图标、主题色，可以助你更快的找到想要的标签。
在标签数量特别多时，可以关闭不重要的、零碎的小标签的「主标签」属性，然后在侧边栏打开「仅展示主标签」，就可以隐藏这些不重要的标签。此时浏览侧边栏时，只会展示重要的主标签，但那些不重要的标签依然可以通过筛选、标签关联、书签关联等方式检索到。
还可以通过标签关键词、关键词拼音、名称拼音首字母快速筛选标签。
每个标签页面，都会展示关联标签，点击即可跳转该标签对应的页面，查看和该标签关联的书签和标签。
是的，每个书签卡片底部的标签也是可以点击的。
3. 支持暗黑/明亮模式、移动端模式
4. Github 授权登录 + 内容管理系统
使用 Github 授权登录，即可进入内容管理系统对标签、书签进行管理。
5. 导入浏览器导出的书签数据
一键导入浏览器导出的书签数据（.html 文件），助你更快的将浏览器书签数据迁移至 BMM。
6. AI 驱动的智能功能
BMM 集成了一些实用的 AI 功能，大大减轻了用户维护书签的负担：
- 新增标签时，关联已有的标签
- 新增书签时，自动获取网站图标、标题、分析网页给出简介、关联标签
技术栈
BMM 采用了现代化的技术栈，确保了系统的高性能和可扩展性：
- Next.js：用于构建快速、SEO 友好的 React 应用
- NextUI + Tailwind CSS：用于搭建现代化的、美观的、响应式的用户界面
- PostgreSQL：强大的关系型数据库，用于存储书签和标签数据
- Drizzle ORM：轻量级的 TypeScript ORM，简化数据库操作
- Docker：确保了部署的一致性和可移植性
项目部署
本项目提供了 3 种部署方式：
git clone项目后，通过 pnpm 安装依赖、启动项目git clone项目后，通过 docker compose 一键安装、启动项目- github fork 项目后，部署至 Vercel 的边缘计算云平台上
部署详细教程，可参考项目 README：项目部署 🚀
开源与社区
BMM 是一个开源项目，欢迎社区的贡献和反馈。无论你是开发者、设计师还是普通用户，都可以参与到 BMM 的改进中来。
未来展望
BMM 迭代的脚本没有停下，以下功能可能会在未来实现：
- 书签置顶、仅管理员可见
- 定期检测网站可连通性
- 开发浏览器扩展协同工作
- 阅读清单系统
- 用户系统（任意用户登录后都可以在上面管理自己的书签）
结语
BMM 不仅仅是一个书签管理工具，它代表了我对信息管理的一种独特的思考。我相信 BMM 将为大家提供一种全新的、更智能的信息组织管理方式。
欢迎访问项目 GitHub 仓库，体验 BMM，如果对你有帮助，欢迎 Star 🌟！
项目仓库地址：https://github.com/Y80/bmm
线上体验地址：https://bmm.lccl.cc/