DevNow x Notion

前言

Notion 应该是目前用户量比较大的一个在线笔记软件，它的文档系统也非常完善，支持多种文档格式，如 Markdown、富文本、表格、公式等。

早期我也用过一段时间，后来有点不习惯，就换到了 Obsidian ，但是身边人用的还是很多的，随着 Astro 5.0 的发布，在内容集成上也提供了更多的方向，这期就来聊聊 DevNow 对 Notion 的支持。

1.Notion 设置

1.1 创建 Notion 集成

1.1.1 什么是内部集成？

内部集成允许 Notion 工作区成员通过 Notion REST API 与工作区交互。每个内部集成都与单个特定工作区绑定，并且只有工作区内的成员可以使用该集成。将内部集成添加到工作区后，成员必须手动授予集成访问他们希望其使用的特定页面或数据库的权限。

在 集成管理 中添加新的机集成，用来获取 token 。

成功创建后入下图，我们可以在 功能 模块中管理集成的权限，这里我们主要是读取内容，然后可以获取到 内部集成密钥 即 PUBLIC_NOTION_TOKEN。

1.2 创建 Notion 数据源

目前我们集成只能同步 Database 中的内容，所以我们需要先创建一个 Database。

顶部选中的字符串是 PUBLIC_NOTION_DATABASE_ID ，我们需要将其复制下来，后面会用到。

如图，我们创建一个工作站，然后创建一个 Database 数据源，用来管理我们需要在 DevNow 中展示的文章，为了统一文章的结构，我们在 Database 中添加以下属性：

• title: 文本
• desc: 文本
• publishDate: 创建时间
• image: 图片
• category: 单选
• tags: 文本, 如果有多个，请通过 , 分割
• author: 文本

:::tip[提示]
关于 category 字段，建议大家参考 src/data/category.ts 中的分类，将其添加到 Notion 对应的详细那个中，如下：

这样方便大家在 DevNow 中查看文章时，能够快速找到对应的分类。如果有新增，请同时更新，否则会报错。

:::

1.3 关联集成

我们在对应的工作站中关联相关的集成，这样我们就可以在 DevNow 中通过 Loader 获取相关的内容了。

如图，将我们之前添加的集成关联进来。

1.4 创建新文章

如图，我们需要完善所有的属性:

到这里我们 Notion 相关的配置就完事了。

2. 环境变量配置

如果是通过 Vercel 部署的，可以对应的项目中添加环境变量：

• PUBLIC_NOTION_DATABASE_ID
• PUBLIC_NOTION_TOKEN

对应的值就是我们之前创建的 Database 的 ID 和 token。

如果是私有项目部署的话，可以在 .env 文件中添加相关内容。

3. DevNow 配置

在 DevNow 中，我们需要配置相关的 loader 来获取我们的内容，由于数据的不同，我们在数据层也要做一下兼容，我们统一将数据格式化成 src/content/config.ts 中的 SCHEMA 格式。

3.1 配置相关的 loader

Notion 的相关 loader 我们通过库 notion-astro-loader 库来实现。
如要接入，请将一下注释打开即可。

...
// import { notionLoader } from 'notion-astro-loader';

...
// export const NotionDocs = defineCollection({
//  loader: notionLoader({
//    auth: import.meta.env.NOTION_TOKEN,
//    database_id: import.meta.env.NOTION_DATABASE_ID
//  })
//});

export const collections = {
  doc: Docs,
//  notion: NotionDocs
};

3.2 数据源格式化

相关文件已经在 DevNow 中添加，如果需要计入 Notion 数据源，同上把注释打开即可。

// import { richTextToPlainText } from 'notion-astro-loader';
// import { formatDate } from './utils';

// export const getNotionDocs = (await getCollection('notion')).map((item) => {
//   return {
//     id: item.id,
//     body: item.rendered?.html ?? '',
//     data: {
//       title: richTextToPlainText(item.data.properties.title.rich_text),
//       desc: richTextToPlainText(item.data.properties.desc.rich_text),
//       category: item.data.properties.category.select?.name || '',
//       author: richTextToPlainText(item.data.properties.author.rich_text),
//       tags: item.data.properties.tags.rich_text[0].plain_text.split(','),
//       image: item.data.properties.image.url,
//       publishDate: item.data.properties.publishDate.created_time,
//       pin: false
//     },
//     rendered: item.rendered,
//     filePath: item.id,
//     collection: item.collection,
//   };
// });

export const latestPosts = [
  ...(await getCollection('doc', ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  }))
  // 如果需要接入 Notion 数据源，需要将下面的注释去掉
  // ...getNotionDocs
].sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf());

3.3 遗留问题

由于数据的问题，目前暂时无法实现 Notion 数据源 readTime 计算，所以 Notion 相关文章，暂时不展示。

已经兼容了 Notion 的 headings 和 其他的相关数据。

结果展示

列表页：

详情页：

总结

到这基本就完事了，可以通过这个方式，将 Notion 作为 DevNow 的数据源，来管理我们的文章。
这样可以更方便我们的数据管理，也可以更好的与 Notion 进行集成，让我们的文章更加的丰富。