页面路由 (Pages Router): 渲染 Markdown

要渲染 markdown 内容，我们将使用 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');
 
  // 使用 gray-matter 解析文章元数据部分
  const matterResult = matter(fileContents);
 
  // 使用 remark 将 markdown 转换为 HTML 字符串
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
 
  // 将数据与 id 和 contentHtml 合并
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };
}

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

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

export async function getStaticProps({ params }) {
  // 像这样添加 "await" 关键字：
  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>
  );
}

尝试再次访问这些页面：

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

我们快完成了！接下来让我们优化每个页面。