第一篇Blog测试
AI
好的,以下是完整的 Notion 配置方案。属性名必须和代码完全一致(区分大小写)。
第一步:创建 Notion Integration(获取 API Key)
- 点击 "New integration"
- 填写信息:
- Name:
YeagerZhao Blog - Associated workspace: 选择你的工作空间
- Type: Internal
- 点击 Submit
- 复制生成的 Internal Integration Secret(以
secret_开头的字符串)
第二步:创建 Blog 数据库
在 Notion 中新建一个 Full-page Database(全页数据库),命名为
Blog。然后按照以下规格添加属性列(属性名必须严格一致,区分大小写):
属性名 | 类型 | 说明 |
Title | Title(默认自带) | 文章标题 |
Slug | Text | URL 路径标识,只用英文小写+连字符,如 my-first-post |
Summary | Text | 1-2 句摘要,显示在卡片和 SEO 中 |
Date | Date | 发布日期 |
Tags | Multi-select | 添加选项如 Tech、Life、AI、Product |
Language | Select | 添加两个选项: zh 和 en |
Published | Checkbox | 勾选 = 在网站上显示 |
Featured | Checkbox | 勾选 = 在首页展示 |
文章的 封面图 使用 Notion 页面自带的 Cover(在页面顶部添加封面),代码会自动读取。
第三步:创建 Product 数据库
新建另一个 Full-page Database,命名为
Products:属性名 | 类型 | 说明 |
Name | Title(默认自带) | 产品名称 |
Description | Text | 简短描述 |
URL | URL | 产品链接 |
GitHub | URL | 源代码地址 |
Language | Select | zh 或 en |
Published | Checkbox | 是否显示 |
Order | Number | 排列顺序(数字越小越靠前) |
第四步:授权 Integration 访问数据库
对 Blog 和 Products 两个数据库都要做这一步:
- 打开数据库页面
- 点击右上角
···菜单
- 找到 "Connections" / "连接"
- 搜索并选择
YeagerZhao Blog(你刚创建的 Integration)
- 点击 Confirm
第五步:获取 Database ID
每个数据库的 URL 格式为:
https://www.notion.so/your-workspace/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx?v=...
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
这一段就是 Database ID(32位)复制 Blog 和 Products 两个数据库的 ID。
第六步:填入 .env.local
Read d:\Study\Computer Science\AI Learning\YeagerZhao_Blog\.env.local
把 .env.local 中的三个值替换为你的真实值:
NOTION_API_KEY=secret_xxxxxxxxxxxxxxxxxxxxxx
NOTION_BLOG_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
NOTION_PRODUCT_DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx替换后重启 dev server(
Ctrl+C 然后 npm run dev)。第七步:写第一篇博客
在 Blog 数据库中点击 "New" 新增一行,填写属性:
属性 | 示例值 |
Title | 我的第一篇博客 |
Slug | my-first-post |
Summary | 这是我的个人网站上线后的第一篇文章 |
Date | 2026-04-14 |
Tags | Tech |
Language | zh |
Published | ✅ 勾选 |
Featured | ✅ 勾选 |
然后打开这个页面,在正文区域用 Notion 正常写内容:标题、段落、代码块、图片、列表、引用等都支持。
react-notion-x 会完整渲染 Notion 支持的所有块类型。可选:在页面顶部点击 "Add cover" 添加封面图,网站卡片会自动显示。
实时更新机制
网站使用 ISR(增量静态再生成),配置为
revalidate = 3600(1 小时):- 你在 Notion 中修改内容后,最多 1 小时网站自动更新
- 开发模式下(
npm run dev)每次刷新都会拉取最新数据,实时生效
- 如果需要生产环境立即更新,重新部署即可
中英文双语文章
同一篇文章的中英文是两个独立的 Notion 页面:
Blog 数据库:
┌─────────────────────┬──────────────┬──────────┐
│ Title │ Slug │ Language │
├─────────────────────┼──────────────┼──────────┤
│ 我的第一篇博客 │ my-first-post│ zh │
│ My First Blog Post │ my-first-post│ en │
└─────────────────────┴──────────────┴──────────┘Slug 相同,Language 不同。访问
/zh/blog/my-first-post 显示中文版,/en/blog/my-first-post 显示英文版。配置完成后,在浏览器打开 http://localhost:3000 即可看到从 Notion 拉取的博客内容。你完成 Notion 配置后告诉我,我帮你验证是否对接成功。