DevNow x Notion

news2024/12/25 10:51:17

前言

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

对应的值就是我们之前创建的 DatabaseIDtoken

如果是私有项目部署的话,可以在 .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 相关文章,暂时不展示。

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

结果展示

列表页:

详情页:

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2265242.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenAI 12天发布会:AI革命的里程碑@附35页PDF文件下载

在人工智能的浪潮中,OpenAI的12天发布会无疑是2024年科技界的一场盛宴。从12月5日开始,OpenAI连续12天每天发布一个新应用或功能,标志着AI技术的又一次飞跃。本文将梳理这些激动人心的发布,带你一探究竟。 OpenAI发布会概览 Ope…

Mybatis分页插件的使用问题记录

项目中配置的分页插件依赖为 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.7</version></dependency>之前的项目代码编写分页的方式为&#xff0c;通过传入的条件…

《软件设计的哲学》阅读摘要之设计原则

《软件设计的哲学》&#xff08;A Philosophy of Software Design&#xff09;是一本在软件架构与设计领域颇具影响力的书籍&#xff0c;作者 John Ousterhout 在书中分享了诸多深刻且实用的软件设计理念。书中列举的这些设计原则&#xff0c;汇聚了作者丰富的实战经验与深邃的…

远程控制macOS一直卡在100%,能连接上了却只显示了壁纸?

前言 前段时间有个朋友过来咨询关于Windows使用第三方远程软件&#xff08;向日葵、Todesk等&#xff09;远程连接控制macOS系统&#xff0c;但出现了一些奇奇怪怪的问题。 比如在连接的时候&#xff0c;一直卡在100%连接&#xff0c;对方的电脑却已经显示已经被控制的状态。…

Pytorch | 利用FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集FGSM介绍FGSM代码实现FGSM算法实现攻击效果 代码汇总fgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexNet对CIFAR10进行分类 Pytorch | 从零构建Vgg…

mapbox基础,加载mapbox官方地图

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;mapbox 从入门到精通 文章目录 一、&#x1f340;前言1.1 ☘️mapboxgl.Map 地图对象…

保护模式基本概念

CPU 架构 RISC&#xff08;Reduced Instruction Set Computer&#xff09; 中文即"精简指令集计算机”。RISC构架的指令格式和长度通常是固定的&#xff08;如ARM是32位的指令&#xff09;、且指令和寻址方式少而简单、大多数指令在一个周期内就可以执行完毕 CISC&…

【Unity3D】Particle粒子特效或3D物体显示在UGUI上的方案

目录 一、RawImage Camera RenderTexture方式 &#xff08;1&#xff09;扩展知识&#xff1a;实现射线检测RawImage内的3D物体 &#xff08;2&#xff09;扩展知识&#xff1a;实现粒子特效显示RawImage上 二、UI摄像机 Canvas(Screen Space - Camera模式)方式 &#…

编程新选择:深入了解仓颉语言的优雅与高效

初识仓颉编程语言 仓颉编程语言&#xff08;Cangjie Programming Language&#xff09;是一种现代化的、面向未来的通用编程语言&#xff0c;其设计理念是为了降低编程的门槛&#xff0c;同时提供高度灵活性和表达力的开发体验。这种语言以其简洁优雅的语法和直观的设计理念受…

vue3项目history路由模式部署上线405、刷新404问题(包括部分页面刷新404问题)

一、找不到js模块 解决方法&#xff1a;配置Nginx配置文件&#xff1a; // root /your/program/path/dist root /www/wwwroot/my_manage_backend_v1/dist;二、刷新页面导致404问题(Not found) 经过一系列配置后发现进入页面一切正常&#xff0c;包括路由前进和回退&#xff0…

谷歌开发者工具 - 控制台篇

Chrome DevTools - Console控制台篇 一、官网二、主要用途三、控制台篇1.JavaScript/浏览器消息记录&#xff08;1&#xff09;演示效果 / 两种记录状态&#xff08;2&#xff09;显示导致调用的堆栈轨迹 2.过滤消息&#xff08;1&#xff09;按日志级别过滤&#xff08;2&…

003-aop-切点表达式

spring-aop-切点表达式 spring-aop-pom依赖

【蓝桥杯——物联网设计与开发】基础模块8 - RTC

目录 一、RTC &#xff08;1&#xff09;资源介绍 &#x1f505;简介 &#x1f505;时钟与分频&#xff08;十分重要‼️&#xff09; &#xff08;2&#xff09;STM32CubeMX 软件配置 &#xff08;3&#xff09;代码编写 &#xff08;4&#xff09;实验现象 二、RTC接口…

Web3.0安全开发实践:探索比特币DeFi生态中的PSBT

近年来&#xff0c;部分签名比特币交易&#xff08;PSBT&#xff09;在比特币生态系统中获得了显著关注。随着如Ordinal和基于铭文的资产等创新的兴起&#xff0c;安全的多方签名和复杂交易的需求不断增加&#xff0c;这使得PSBT成为应对比特币生态不断发展中不可或缺的工具。 …

MaxKB基于大语言模型和 RAG的开源知识库问答系统的快速部署教程

1 部署要求 1.1 服务器配置 部署服务器要求&#xff1a; 操作系统&#xff1a;Ubuntu 22.04 / CentOS 7.6 64 位系统CPU/内存&#xff1a;4C/8GB 以上磁盘空间&#xff1a;100GB 1.2 端口要求 在线部署MaxKB需要开通的访问端口说明如下&#xff1a; 端口作用说明22SSH安装…

【VMware虚拟机】安装win10系统教程双机可ping通

目录 1、下载1.1、点击链接下载媒体创建工具&#xff1a;1.2、下载后得到MediaCreationTool_22H2.exe&#xff1a;1.3、获取ISO镜像 2、安装3、显示4、配置网络4.1、配置4.2、排查4.2.1、关闭防火墙4.2.2、增加路由 1、下载 Windows10微软官网下载链接: https://www.microsoft…

AI一键制作圣诞帽头像丨附详细教程

我用AI换上圣诞帽头像啦~&#x1f385; 不管是搞笑表情、宠物头像还是你的自拍&#xff01;&#xff01;都能一键添加圣诞帽元素&#xff0c;毫无违和感&#xff01;&#x1f389; 详细教程在P3、P4&#xff0c;手残党也能轻松搞定&#xff01; 宝子们需要打“need”&#xff0…

活动图的理解和实践

在软件开发和系统设计中&#xff0c;理解系统的工作流程和并发行为是至关重要的。活动图作为一种重要的建模工具&#xff0c;为我们提供了一种直观且有效的方法来描述这些复杂的过程。本文将详细探讨活动图的理解与实践&#xff0c;包括其基本概念、用途、构建方法以及实际应用…

电磁兼容(EMC):一文解读磁芯复合材料——塑磁

目录 01 塑磁的定义 02 塑磁的常见规格型号 03 塑磁材料的优点 04 塑磁的应用 塑磁,也称为注塑磁,是一种将磁性粉末注入到塑料基体中制成的复合磁体材料。以下是塑磁的定义、应用和材料特性的总结: 01 塑磁的定义 塑磁是以塑料为基体,通过特殊工艺在其中加入磁性粒子(…

C语言-结构体内存大小

#include <stdio.h> #include <string.h> struct S1 { char a;//1 int b;//4 char c;//1 }; //分析 默认对齐数 成员对齐数 对齐数(前两个最小值) 最大对齐数 // 8 1 …