NotionNav：用Notion打造高颜值导航页！

URL

type

status

date

slug

summary

NotionNav项目简介

NotionNav是一款基于Next.js和Notion数据库的现代化导航页面解决方案，项目地址：https://github.com/qazzxxx/NotionNav

这个项目将Notion数据库的强大功能与现代化UI完美结合，老铁们只需维护一个Notion表格，就能获得：

支持分类分组的精美导航页

实时更新的菜单内容

基于角色的权限控制

跨设备适配的响应式设计

智能搜索和收藏功能

NotionNav五大核心优势

1. 基于Notion的零代码管理

所有菜单项都在Notion数据库中管理，增删改查就像编辑Excel一样简单，再也不用折腾代码修改了！

2. 精细化的权限控制

支持基于用户角色的菜单访问控制，可以在Notion中为每个菜单项设置可见角色（如guest、admin等），确保不同级别用户看到的内容不一样。

更绝的是，它支持通过URL参数直接验证角色，比如?role=admin就能以管理员身份查看页面，这在团队协作中特别实用。

3. 多环境自动切换

每个链接可以设置内网地址(lanHref)和外网地址(href)，系统会根据访问环境自动选择正确地址，再也不用频繁修改配置了。

4. 现代化的UI体验

NotionNav采用毛玻璃效果设计，支持动态背景图，系统会自动同步Notion数据库的封面作为背景，默认是Bing每日图片，视觉体验完全不输商业导航产品。

5. 全方位的实用功能

智能图标：自动获取网站favicon，无需手动上传

收藏功能：常用项目一键置顶

状态过滤：可以设置菜单项的显示状态

分类分组：按Category字段自动归类显示

实时搜索：快速查找所需资源

一键部署教程

NotionNav支持使用Vercel一键部署，操作非常简单：

获取Notion模板 点击这个导航菜单模板链接复制到你的Notion工作区点击"发布"按钮获取页面ID

一键部署到Vercel 点击部署按钮配置环境变量NOTION_PAGE_ID为你的Notion页面ID 点击"Deploy"完成部署

如果要用私有Notion数据库，需要额外配置：

使用效果展示

部署完成后，你就能获得一个美轮美奂的导航页面了！

1. 智能分类展示

系统会根据Notion中的Category字段自动分组显示菜单项，点击分类名称可以展开/折叠内容。

2. 权限控制实战

假设你设置了以下角色：

guest：仅显示公共资源

member：显示内部文档

admin：显示全部内容

不同角色的用户访问时会看到完全不同的菜单内容。

3. 封面同步效果

只需在Notion数据库添加封面图片：

点击数据库顶部的"Add cover"按钮

上传本地图片或从Unsplash选择

系统会自动同步为导航页背景

4. 移动端适配

完美适配各种移动设备，触控体验流畅，毛玻璃效果在手机上效果更惊艳。

5. 自定义配置

图标优先级：Notion中设置的图标 > favicon自动获取 > 文字首字母

背景优先级：Notion封面 > Bing每日图片 > 本地图片

状态过滤：可通过Status字段控制菜单项的显示/隐藏

项目总结

NotionNav绝对是云舟最近遇到的Notion最佳应用之一！它完美解决了这几个痛点：

团队资源共享混乱：通过权限控制，确保每个人只能看到该看的内容

多环境切换麻烦：内网/外网地址自动识别，省去手动切换

导航页维护困难：直接在Notion中维护，不需要技术能力

界面简陋不美观：现代化UI设计，比大多数商业产品还精致

特别推荐给以下老铁们：

创业小团队：用它做内部资源导航，高效又专业

个人知识管理：分类收藏有价值网站，便于回顾

开源社区组织：管理各类资源链接

任何喜欢Notion的极客：又找到一个Notion工具的深度玩法

项目地址

https://github.com/qazzxxx/NotionNav