第一篇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 配置后告诉我，我帮你验证是否对接成功。