应用介绍

NotionNav 是一个基于 NextJS + Notion API 实现的现代化导航网站，让你无需复杂服务器维护，零门槛搭建属于自己的私有导航站，使用 Notion 数据库轻松管理所有网址书签，界面美观流畅，支持多种个性化配置。

核心功能特点：

🎯 Notion 原生管理：完全使用 Notion 数据库管理导航菜单项，你可以直接在 Notion 中编辑、新增、删除网址，无需重启应用就能实时更新导航页，对于经常使用 Notion 的用户来说零学习成本。
🔐 权限控制：基于用户角色的菜单访问控制，可以配置不同角色可见的菜单，支持URL参数直接验证角色，方便分享给不同权限的用户。
🔍 快速搜索：支持对菜单标题和描述进行实时搜索，瞬间找到你需要的网站，导航效率极高。
🏷️ 自动分类分组：根据 Notion 中的分类字段自动分组显示菜单，结构清晰一目了然。
🌐 内外网切换：支持同时配置内网和外网链接，自动根据访问环境切换对应网址，非常适合NAS本地部署使用。
⭐ 收藏功能：支持收藏常用菜单，独立展示在首页，常用网站一步直达。
🖼️ 背景图自动同步：Notion 数据库封面自动同步为导航页背景，你可以随时更换背景，让导航页每天都有新感觉。
📱 完美响应式：适配桌面端、平板、手机等各种屏幕尺寸，移动端体验同样优秀。
🎨 现代化UI设计：支持流行的毛玻璃效果，流畅交互动画，美观又好用。
🌄 多种动态背景：支持 Notion 封面、Bing 每日一图、本地图片三种背景来源，满足不同喜好。

NotionNav 让你利用 Notion 强大的内容管理能力，轻松打造高颜值私人导航站，非常适合放在NAS内网作为自己的浏览器首页使用。

安装说明

前提依赖

如果你想部署在自己的NAS服务器，需要 NodeJS 环境，或者使用 Docker 部署。也可以一键部署到 Vercel 等云平台，免费额度足够个人使用。

Docker 安装配置

version: '3'
services:
  notionnav:
    image: ghcr.io/qazzxxx/notionnav:latest
    container_name: notionnav
    ports:
      - "3000:3000"
    environment:
      - NOTION_PAGE_ID=你的Notion页面ID
      - NOTION_TOKEN=可选，你的Notion Token
      - NOTION_ACTIVE_USER=可选，你的活跃用户ID
    restart: unless-stopped

你需要先复制NotionNav导航菜单模板到你的Notion工作区，然后分享页面获取页面ID。

使用说明

部署完成后，访问 `http://你的NASIP:3000` 即可看到导航网站，你所有的菜单项都在Notion数据库中管理，新增网站只需要在Notion中添加一行数据即可，导航页会自动更新，无需重新部署。

Notion 数据库需要配置这些属性：

`title`：标题（必填）
`description`：描述（可选）
`href`：外网链接（必填）
`lanHref`：内网链接（可选，NAS部署场景非常实用）
`avatar`：图标地址（可选）
`category`：分类（可选，自动分组）
`roles`：访问权限（可选）
`status`：显示/隐藏（可选）

如果图标没有设置，NotionNav 会自动获取网站的favicon作为图标，非常智能，节省你手动找图标的时间。

支持收藏常用网站，点击菜单右上角星星即可收藏，收藏的网站会显示在页面最顶部，方便快速访问。

开源信息

GitHub 地址：https://github.com/qazzxxx/NotionNav
Notion 模板：https://qazz.notion.site/219692535678800fbefffd8ae6924454
技术栈：Next.js + TypeScript + Tailwind CSS
许可证：MIT开源许可证