DevNow x Notion 詳情 - astro,前端,博客 LaughingZhu 博客

前言

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());