概念是编写和管理文档的绝佳工具。我喜欢用概念写作，因为它提供了一个集中的观点，可以使我的所有想法都以最小的干扰来降低我的想法。因为我喜欢简单的，有条理的概念，所以我决定将我的new website建模从概念界面中。我还想将概念用作内容管理系统，因此我可以直接在“概念”中写下博客文章，在准备就绪时单击按钮发布它，并立即出现在网站上。我喜欢我能够通过概念实现的无缝集成，并想向您展示我的做法！

堆栈

首先，我想告诉您一些我用来创建Wilsonstaley.dev的堆栈。该站点是一个React应用程序，并用Vite进行了脚手架和构建。我使用Tailwind进行造型主要是因为我不太熟悉它，并且想在一个新项目上进行测试（我必须在以后的帖子中分享我的想法）。

我正在Netlify上托管该网站，所有博客文章数据都是客户端渲染的。因此，当您登陆主页时，会打电话来检索概念中的所有博客文章并填充页面。虽然使用NextJs之类的东西在静态构建所有博客页面上可能会更具性能，但这确实避免了概念图像的问题，在短时间后链接到期。但是，我正在使用SWR获得一些缓存和预加载的好处。

，当然，要使这种工作，您需要一个概念帐户！让我们谈谈我如何在概念中构建数据

概念数据库

要存储我所有的博客文章，我在概念中创建了一个数据库。您可以通过单击“新页面”并选择“数据库”来做到这一点。在概念中，数据库是一组相关数据的集合，该数据被组织成行和列。将其视为电子表格，但具有更大的灵活性和功能。

就我而言，我设置了一个数据库，每行都对应于博客文章。我给了它属性，包括“标题”，“描述”，“标签”，“日期”，“发布”和“ slug”。

这些属性是非常不言自明的。

“已发布”复选框是我可以在网站上公开可见的一种简单方法。我可以写这篇文章，看看它的外观，当我做好准备时，我要做的就是单击复选框以使其上线。这是客户端渲染的另一个好处 - 每个访问者将从我的概念数据库中看到最新的记录。

“ slug”属性也很有用。我正在使用它来确定用户看到每个帖子的网址。例如，标题为“ Git Workflows 101”的帖子将在URL Wilsonstaley.dev/posts/git-workflows-101中访问。

检索数据

现在，我们将通过创建具有单个端点的简单API来完成我们的“后端”。这将是一个终点，我们可以在其中检索博客文章列表或单个帖子的数据。

为了创建此lambda功能，我使用了一个Netlify function。这是一个服务NetLify提供的报价，可让您与网站结合使用无服务器功能。我还使用Intion的SDK轻松查询我设置的数据库。

首先，让我们看一个示例，说明查询数据库中的博客文章列表：

import { Client } from "@notionhq/client";
...
const env = process.env.NETLIFY_ENV || "dev";
const notion = new Client({ auth: process.env.NOTION_API_KEY });
const databaseId = process.env.NOTION_DATABASE_ID;

const queryOptions = {
  database_id: databaseId,
  sorts: [
    {
      property: "Date",
      direction: "descending",
    },
  ],
};

//If in production, filter to only published posts
if (env === "production") {
  queryOptions.filter = {
    property: "Published",
    checkbox: {
      equals: true,
    },
  };
}

const posts = await notion.databases.query(queryOptions);
return {
  statusCode: 200,
  body: JSON.stringify(posts),
};

在此示例中，我正在查询概念数据库，并要求按日期对结果进行排序。我还在过滤结果，仅在我处于生产环境中，才返回已发布的帖子。为了使其工作，您必须确保拥有created a Notion integration and shared the database with your integration。

现在，让我们看看用于检索特定博客文章数据的代码可能是什么样的：

import { Client } from "@notionhq/client";
import { NotionToMarkdown } from "notion-to-md";
...
const notion = new Client({ auth: process.env.NOTION_API_KEY });
const { id: postId } = event.queryStringParameters;

if (postId) {
  const response = await notion.pages.retrieve({ page_id: postId });
  const n2m = new NotionToMarkdown({ notionClient: notion });
  const mdblocks = await n2m.pageToMarkdown(postId);
  const mdString = n2m.toMarkdownString(mdblocks);

  const responseData = {
    bannerImg: response.cover.external.url,
    markdown: mdString,
    title: response.properties.Title.title[0].plain_text
  };

  return {
    statusCode: 200,
    body: JSON.stringify(responseData),
  };
}

在这里，我正在检索特定页面的数据，并使用notion-to-md软件包为此博客文章生成标记。然后，我将其包装成一个自定义响应，可以在我的网站上用于单个博客文章页面。

部署网站时，可作为自定义端点可用。就我而言，我创建了一个端点/.netlify/functions/posts。点击此端点将返回所有博客文章的数据。添加查询param /.netlify/functions/posts?id=1d12aaeb324为您提供该单个帖子的数据，包括降价。

渲染博客页面

现在我们已经使用了后端设置来从概念中检索数据，让我们看一下如何以可读格式渲染该数据。

<Layout/>
  <img
    src={bannerImg}
    alt=""
    className="block w-full h-48 md:h-56 lg:h-64 xl:h-80 object-cover object-center"
  />     
  <article className="max-w-screen-sm m-auto px-4 pt-4 pb-10">
    <h1 className="my-6 text-4xl font-bold">{title}</h1>
    <ReactMarkdown components={markdownMapping}>
      {markdown}
    </ReactMarkdown>
  </article>
</Layout>

在此示例中，我有一个可以与任何博客文章一起使用的页面。该页面包括横幅映像，标题和<ReactMarkdown />组件，该组件将使我在后端生成的所有降价并将其转换为有效的HTML。 Markdown组件上的组件属性使我可以指定用于每个Markdown元素的自定义组件。因此，如果我要在Markdown中有一个链接，我可以将其映射到我自己的自定义链接组件。如果您想了解有关其工作原理的更多信息，则可以查看react-markdown库。

，我们使用概念设置了一个非常简单但功能强大的内容管理系统。我喜欢获得此设置以及我可以发布新内容的速度是多么容易。我希望本教程对您有所帮助，并让您了解如何在下一个项目中使用概念！