网址
type
Post
status
Published
date
Feb 12, 2026
slug
NotionNextCoverBug
summary
tags
category
技术分享
icon
password
本文记录在使用 NotionNext 搭建博客时，关于封面图和头像图标配置的所有坑点及解决方案。
一、问题现象
很多 NotionNext 用户会遇到这样的问题：
- 在 Notion 中设置了精美的封面图和头像
- 但部署后网站始终显示默认图片
- 修改配置文件也不生效
- 缓存清除后依然无效
二、核心原理：数据流向
要解决问题，首先理解数据是如何从 Notion 流向网站的：
关键数据结构
1. 封面图存储位置
2. 头像图标存储位置
三、所有坑点汇总
坑点 1：混淆 collection 和 rawMetadata
问题：Notion 中有两个层面的封面/图标设置：
- 数据库级别（collection）：设置整个数据库的封面
- 页面级别（rawMetadata）：设置当前页面的封面
NotionNext 读取的是页面级别的设置！
解决方案：
- 在 Notion 页面右上角点击 ⚙️
- 选择 "Add cover" / "Add icon"
- 确保是在页面上设置，而不是在数据库上设置
坑点 2：代码读取路径错误
原始错误代码：
正确代码：
坑点 3：前端组件硬编码图片路径
即使后端正确获取了 Notion 的图片，前端组件可能还是显示默认图片：
Hero.js 中的错误：
正确写法：
InfoCard.js 中的错误：
正确写法：
坑点 4：Notion 图片链接失效
问题：Notion 的图片链接有过期时间
解决方案：
- 使用 Notion 官方图床（自动处理）
- 或者使用外部图床（GitHub、CDN 等）
- 确保图片链接是公开可访问的
四、完整修复方案
步骤 1：修改 SiteDataApi.js
文件路径：
lib/db/SiteDataApi.js- 作者:Zflyee
- 链接:http://zflyee.com/article/NotionNextCoverBug
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
