前言

个人书签导航系统过去两三年一直用的OneNav，主要原因就是它支持全文搜索。2023-05-05也购买了永久订阅来支持正版，订阅版在当时的主要特色是支持多种主题在线切换，不过在后续的使用过程发现适配的主题多少都有功能上的损失，尤其是全文搜索，启用后均不支持链接描述搜索，有的直接不支持站内搜索。。。。对搜索适配最好的就是默认主题，只有这个支持链接标题、地址和描述搜索，所以即使订阅了也是一直使用的默认主题。而实际上默认主题也有缺陷，链接分类如果设置成前端仅显示20，此分类下超出的链接是搜索不到的，为了解决这个问题，我分类设置成前端显示500个链接来绕过这个缺陷。到此OneNav使用的问题基本就解决了，后续也一直稳定使用，适配的浏览器插件也非常好用能非常方便的快速添加链接，这也是坚持使用OneNav的第二个点。但是一直以来对默认主题的样式还是耿耿于怀，不满足它的简陋样式，终于最近使用Cursor写了个符合自己心意的书签导航。功能上必然支持无缺陷的全文搜索，至于快速添加链接是用前端监听粘贴链接的动作（自动弹出添加链接窗口+自动抓取链接信息）来替代OneNav的插件快速添加链接。至此，OneNav吸引我的两个主要优势已经被替代，并且自己开发的导航系统具备了还不错的前端UI。下面详细讲下书签导航主要的功能特色，喜欢的也可以前往Github拉取下来部署体验，觉得有用的话希望能给个Star支持下。

项目地址：https://github.com/DEKVIW/book-nav

导航地址：https://nav.ylbolg.top/

特色功能

BookNav（炫酷导航） 基于 Flask Web 框架打造，提供了以下核心功能：

交互增强功能

  • 右键菜单交互: 链接卡片右键可弹出快捷菜单，支持添加、编辑、删除、复制链接等操作
  • 快速添加网站: 首页直接粘贴链接可弹出快速添加链接对话框，无需进入后台
  • 拖拽排序功能:
    • 支持网站卡片拖拽排序
    • 支持侧边栏分类拖拽排序
  • 重复链接验证功能:
    • 在添加或编辑网站时自动检测 URL 是否已存在
    • 智能提示已存在的链接及其所属分类
    • 提供选项: 取消添加、强制添加或跳转到已有链接
    • 有效防止重复添加相同网站，保持导航整洁

高效搜索系统

  • 全局快速搜索: 顶部搜索框支持即时搜索整站内容
  • 多维度匹配:支持网站标题、URL、描述和关键词的全文搜索
  • 分类内搜索: 在特定分类页面可限定搜索范围

数据库导入导出功能:

  • 完美兼容 OneNav 数据结构，支持无缝迁移
  • 支持导入 OneNav 的 SQLite 数据库导出文件
  • 自动匹配分类，保留原有的组织结构
  • 导出为多种格式：原生格式、OneNav 兼容格式

后台管理系统

  • 完整的后台管理界面: 独立的管理控制台
  • 网站与分类管理: 完整的增删改查功能，批量删除，批量修改公开，私有状态
  • 站点设置: 自定义站点名称、Logo、SEO 信息等，支持自定义背景图片，支持开启链接跳转过渡页（支持放广告）
  • 邀请码管理: 生成和管理注册邀请码
  • 数据批量操作功能：
    • 一键抓取图标
    • 一键清空所有数据
    • 备份功能

用户系统

  • 用户管理: 首次启动默认超级管理员权限，支持查看和管理用户账户，支持添加普通用户和管理员角色
  • 邀请码注册: 仅通过邀请码才能注册新用户，确保站点的私密性
  • 用户认证: 完整的登录、注册和登出功能
  • 权限管理: 区分普通用户和管理员权限

注意：如果多用户，谨慎放开用户的的超级管理员权限；可以适当放开普通管理员权限（普通管理员后台功能只涉及链接相关和邀请码部分）

图标处理

  • 自动获取网站图标: 自动尝试获取并显示网站的 Favicon
  • 优雅的降级显示: 当图标加载失败时，显示基于网站名称首字母的默认图标
  • 一致的视觉体验: 确保界面整洁一致，即使外部资源不可用

响应式设计

  • 全设备适配: 完美支持桌面、平板和移动设备
  • 布局自适应: 基于 Bootstrap 的响应式网格系统
  • 触摸友好: 为移动设备优化的交互体验

技术栈

后端

  • 核心框架: Python 3.9+, Flask
  • ORM: SQLAlchemy
  • 数据库迁移: Flask-Migrate
  • 用户认证: Flask-Login
  • 表单处理: Flask-WTF
  • WSGI 服务器: Gunicorn

前端

  • UI 框架: Bootstrap 5
  • 动画效果: Animate.css
  • 图标: Font Awesome, Bootstrap Icons
  • 交互: 原生 JavaScript

数据存储

  • 默认数据库: SQLite
  • 可选扩展: 支持 PostgreSQL, MySQL 等关系型数据库

部署

  • 容器化: Docker, Docker Compose
  • Web 服务器: Nginx (容器内反向代理)
  • 进程管理: Supervisor

部署指南

自构建镜像运行

  1. 环境准备:

  2. 获取代码:

    1
    2
    3
    4
    git clone https://github.com/yourusername/booknav.git
    cd booknav
    sed -i 's/\r$//' docker/cleanup_backups.sh
    sed -i 's/\r$//' docker/entrypoint.sh

  3. 构建与启动:

    1
    2
    docker-compose build
    docker-compose up -d

    注意：无需预先创建任何配置文件！容器首次启动时会自动将默认的 Nginx 配置文件复制到宿主机映射目录，实现真正的一键部署体验。

  4. 访问:

    • 在浏览器中打开 http://<您的服务器IP>:8988
    • 默认用户名：admin，密码：admin123

拉取镜像运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
version: "3"

services:
  nav:
    image: yilan666/booknav-nav:1.7
    container_name: nav
    restart: always
    ports:
      - "8988:80" # Nginx端口
    volumes:
      - ./data:/data # 数据目录
      - ./data/backups:/app/app/backups # 备份目录
      - ./data/uploads:/app/app/static/uploads # 上传文件目录
      - ./config/nginx:/etc/nginx/http.d # Nginx配置
    env_file:
      - .env
    environment:
      - DATABASE_URL=sqlite:////data/app.db

docker-compose.yml文件同级目录下创建.env文件

1
2
3
4
5
6
7
8
9
10
11
12
# 基本配置
SECRET_KEY=
FLASK_ENV=production
DATABASE_URL=sqlite:////data/app.db

# 管理员设置
ADMIN_USERNAME=admin
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=admin123

# 其他配置
INVITATION_CODE_LENGTH=8

SECRET_KEY=

ADMIN_USERNAME=
ADMIN_EMAIL=
ADMIN_PASSWORD=

这些参数自定义填写，执行

1
docker-compose up -d

用户名和密码为.env文件中自定义填写的