引言
传言说,每个程序员都会有个自己的导航网站。
我萌生写一个导航网站的写法,是在大学时期对 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 🌟!
项目仓库地址:github.com/Y80/bmm
线上体验地址:bmm.lccl.cc/