渲染 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>
);
}尝试再次访问这些页面：
您现在应该能看到博客内容：
我们快完成了！接下来让我们优化每个页面。