使用 Next.js 读取 Markdown 内容数据
2023年04月02日 - 约 433 字

渲染 Markdown

为了渲染 Markdown 内容，我们将使用 remark 库。首先，让我们安装它：

注意：这一步其实我们在项目一开始就已经做了，这里就不需要再安装 remark 库了，可以跳过安装 remark 这一步。

第一篇文章《如何使用 Next.js 构建高效的博客网站》里我们在 package.json 文件里添加的内容，就已经有 remark 了。

npm install remark remark-html

然后，打开 lib/posts.js ，并在文件顶部添加以下导入：

import { remark } from 'remark';
import html from 'remark-html';

并在同一文件中更新 getPostData() 函数以使用 remark ：

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.md`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

重要提示：我们在 getPostData 中添加了 async 关键字，因为我们需要使用 await 来调用 remark 。 async/await 允许您异步获取数据。

这意味着我们需要更新 pages/posts/[id].js 中的 getStaticProps ，在调用 getPostData 时使用 await ：

export async function getStaticProps({ params }) {
  // Add the "await" keyword like this:
  const postData = await getPostData(params.id);

  return {
    props: {
      postData,
    },
  };
}

最后，在 pages/posts/[id].js 中更新 Post 组件，以使用 dangerouslySetInnerHTML 呈现 contentHtml 里的内容：

export default function Post({ postData }) {
  return (
    <Layout>
      {postData.title}
      <br />
      {postData.id}
      <br />
      {postData.date}
      <br />
      <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
    </Layout>
  );
}

尝试再次访问这些页面：

http://localhost:3000/posts/first http://localhost:3000/posts/about

您现在应该看到博客内容了：

我们快完成了！下一篇文章我们将优化每个页面。

使用 Next.js 读取 Markdown 内容数据2023年04月02日 - 约 433 字

渲染 Markdown

使用 Next.js 读取 Markdown 内容数据
2023年04月02日 - 约 433 字