Notionpresso 快速入门指南

2.1. 安装和设置

安装 Notionpresso

安装 Notionpresso 和用于提取 Notion 数据的 CLI 工具 @notionpresso/cli。

npm install -g @notionpresso/cli
npm install @notionpresso/react

Next.js 项目设置

如果还没有 Next.js 项目，请创建一个新的项目。Next.js 支持静态网站生成和服务器端渲染，以提供最佳性能。

npx create-next-app my-notion-blog
cd my-notion-blog

Notion API 密钥生成

访问 Notion 开发者门户 (https://developers.notion.com/)。
创建一个新的集成 (integration)。
安全地保存生成的 API 密钥。

2.2. 提取 Notion 数据 (@notionpresso/cli)

使用 @notionpresso/cli CLI 提取 Notion 数据，并将其准备为网站使用。

数据提取命令用法

使用 Notion 页面 URL 和 API 密钥提取数据。

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY

@notionpresso/cli 文件夹结构和选项

@notionpresso/cli 默认情况下是根据 Next.js 项目结构设置的。提取的数据将按以下结构保存：

my-notion-blog/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── images/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...

@notionpresso/cli 的主要选项：

--dir: 指定 JSON 文件保存的目录。默认值为 ./notion-data。
--image-dir: 指定图像文件保存的目录。默认值为 ./public/images。

例如，如果您想更改保存位置，可以使用以下命令：

npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images

如果不指定选项，将使用默认值，这符合 Next.js 项目结构的最佳实践。

2.3. 在 React 中渲染 Notion 数据

使用 React 组件渲染提取的 Notion 数据。在本步骤中，我们将讨论基本页面结构和组件用法。

基本渲染示例代码

这是一个使用 React 组件渲染 Notion 数据的简单示例。

import { Notion } from "@notionpresso/react";
import pageData from "./notion-data/your-page-id.json";

function NotionPage() {
  return (
    <Notion data={pageData}>
      <Notion.Cover src={pageData.cover} />
      <Notion.Body>
        <Notion.Title title={pageData.title} />
        <Notion.Blocks blocks={pageData.blocks} />
      </Notion.Body>
    </Notion>
  );
}

export default NotionPage;

说明

<Notion> 组件用于接收 Notion 数据并构建页面。
<Cover>, <Title>, <Blocks> 等 Notion 的基本元素可以直接在网页上呈现。

2.4. 使用 Next.js 集成创建第一个页面

使用 Next.js 创建动态网页，并利用静态网站生成 (SSG) 来优化性能。

Next.js 页面创建和动态路由设置

为每个帖子创建动态路由页面，并使用 getStaticPaths 和 getStaticProps 来设置静态网站生成。

// pages/[slug].js
import { Notion } from "@notionpresso/react";
import posts from "../posts";

export async function getStaticPaths() {
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = posts.find((p) => p.slug === params.slug);
  return { props: { post } };
}

export default function PostPage({ post }) {
  return (
    <Notion>
      <Notion.Blocks blocks={post.content.blocks} />
    </Notion>
  );
}

说明

getStaticPaths 用于预先创建帖子路径。
getStaticProps 用于接收每个帖子的数据并渲染。

2.5. 创建博客

在本节中，我们将设置博客的整体结构，并解释如何管理和显示每个帖子。

posts/index.js 设置

博客帖子数据将在中央管理。我们将帖子元数据和内容整理为数组。

// posts/index.js
import post1Content from "../notion-data/post1.json";
import post2Content from "../notion-data/post2.json";

const posts = [
  {
    slug: "post1",
    title: "第一个博客帖子",
    date: "2023-10-01",
    description: "第一个博客帖子的描述",
    content: post1Content,
  },
  {
    slug: "post2",
    title: "第二个博客帖子",
    date: "2023-10-05",
    description: "第二个博客帖子的描述",
    content: post2Content,
  },
];

export default posts;

数据使用：博客主页

使用 posts 数组在主页上渲染帖子列表。

// pages/index.js
import Link from "next/link";
import posts from "../posts";

export default function Home() {
  return (
    <div>
      <h1>博客帖子列表</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
            <p>{post.description}</p>
            <small>{post.date}</small>
          </li>
        ))}
      </ul>
    </div>
  );
}

单独帖子页面创建

每个帖子页面将通过动态路由自动创建。Notion 中的文章将直接反映在网站上，使博客更新变得非常简单。