在Astro Firefly主题中接入Notion

相关项目#

我在源项目基础上接入了 Notion 数据库，没有夹带私货，欢迎使用！对你有用的的话点个 Star 吧。

这个是源项目，主题做的真的很不错，有能力的可以支持一下

改造后功能一览#

• ✅ Notion 数据库文章批量转 Markdown 同步至本地，封面、正文图片可本地化下载
• ✅ 友链数据从 Notion 同步，页面支持访客在线提交友链（自备后端 API）
• ✅ 新增瞬间动态模块，图文动态依托 Notion 数据库统一管理
• ✅ 两种文章同步模式：全量覆盖 / 仅新增同步

前期准备#

项目环境配置#

1
NOTION_TOKEN=你的Notion密钥
2

3
NOTION_CONTENTS_DATABASE_ID=文章库ID
4

5
NOTION_LINKS_DATABASE_ID=友链库ID
6

7
NOTION_MOMENTS_DATABASE_ID=瞬间库ID
8

9
# 是否下载封面到本地 false/true
10
ENABLE_PROCESS_COVER_IMAGE=true
11

12
# 是否下载正文图片到本地 false/true
13
ENABLE_PROCESS_CONTENT_IMAGES=true

命令同步数据#

1
# 全量同步，覆盖本地所有文章
2
pnpm sync-contents:all
3
# 只同步新增文章，不覆盖旧内容
4
pnpm sync-contents:new

1
pnpm sync-links

1
export const friendsPageConfig: FriendsPageConfig = {
2
  // 是否启用友链提交表单
3
  showSubmitForm: true,
4

14 collapsed lines
5
  // 页面标题，如果留空则使用 i18n 中的翻译
6
  title: "",
7

8
  // 页面描述文本，如果留空则使用 i18n 中的翻译
9
  description: "",
10

11
  // 是否显示底部自定义内容（friends.mdx 中的内容）
12
  showCustomContent: true,
13

14
  // 是否显示评论区，需要先在commentConfig.ts启用评论系统
15
  showComment: true,
16

17
  // 是否开启随机排序配置，如果开启，就会忽略权重，构建时进行一次随机排序
18
  randomizeSort: false,
19
};

1
pnpm sync-moments

注意事项#

1. 开启图片本地化后，所有 Notion 图片自动下载至项目本地；
2. 项目基于原版 Firefly 二次开发，主题原版迭代较快，部分功能可能存在差异，异常参考Firefly 官方文档；
3. 项目保持静态站点特性，友链提交依赖第三方 API，密钥不要前端暴露；
4. sync-contents:all为覆盖式同步，操作前建议备份本地文章。

结语#

依托 Notion+Firefly 改造方案，不用触碰源码即可在 Notion 可视化写博客、管理友链与日常动态，把 Notion 当做免费 CMS 后台，兼顾静态博客性能与便捷的内容管理。配置报错优先排查 Notion 集成权限、数据库字段名称匹配问题。