基于 Notion 数据库的现代化导航网站,使用 Next.js 14 + Tailwind CSS 构建。轻松管理和分享你的网站收藏。
- 📝 使用 Notion 数据库管理网站链接
- 🎯 实时搜索功能
- 📱 响应式设计,支持移动端
- 🌓 自适应深色/浅色模式
- 🎨 支持 Notion 数据库封面和图标
- ⚡️ 基于 Next.js 14,性能优秀
- 🔄 自动同步 Notion 数据更新
点击链接复制导航数据库模板:导航站模板 点击链接复制配置数据库模板:配置模板
配置数据库包含以下字段:
type
(选择类型):配置类型order
:分类排序url_order
:链接排序
title
(标题类型):- 当 type 为 order 时填写分类名称
- 当 type 为 url_order 时填写 "lasted"
value
(数字/复选框类型):- 当 type 为 order 时填写排序权重(数字越小越靠前)
- 当 type 为 url_order 时,true 表示按时间正序,false 表示按时间倒序
description
(富文本类型):配置说明
需要配置两个数据库的 ID:
NOTION_DATABASE_ID
:导航数据库 IDNOTION_CONFIG_DATABASE_ID
:配置数据库 ID
- 访问 Notion Developers 创建一个集成
- 点击
New integration
创建新的集成 - 填写名称(如:My Nav Integration)并保存
- 复制生成的
Internal Integration Token
(这就是你的NOTION_API_KEY
) - 回到你的 Notion 数据库页面
- 点击右上角的
Share
按钮,在Connections
中添加你刚创建的集成 - 从数据库 URL 复制数据库 ID:
https://notion.so/myworkspace/{DATABASE_ID}?v=... ↑ 复制这一段作为 NOTION_DATABASE_ID
- 点击上方按钮,使用 GitHub 账号登录 Vercel
- 导入项目后,配置环境变量:
NOTION_API_KEY
:第 2 步获取的 Integration TokenNOTION_DATABASE_ID
:第 2 步获取的数据库 ID
- 点击
Deploy
开始部署
# 克隆项目
git clone https://github.com/TWO-ICE/notionnav
cd notion-nav
# 安装依赖
npm install
# 配置环境变量
cp .env.example .env.local
# 编辑 .env.local 填入你的环境变量
# 启动开发服务器
npm run dev
访问 http://localhost:3000
查看效果
- 在 Notion 数据库中添加或修改内容,网站会自动同步更新
- 可以通过搜索框搜索网站标题、描述或分类
- 点击左侧分类可快速跳转到对应区域
- 支持自定义数据库封面图和图标
- 移动端可通过左上角按钮打开分类菜单
- 通过设置 order 字段的数值来自定义网站排序(数字越小越靠前)
MIT License © 2024
如果这个项目对你有帮助,欢迎 Star ⭐️