使用 Next.js 读取 matter 文章信息
2023年04月01日 - 约 330 字

设置 getStaticProps

我们需要获取必要的数据来渲染给定 id 的文章。

为此，再次打开 libposts.js 并在底部添加以下 getPostData 函数。它将根据id返回文章数据：

export 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);

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

然后，打开页面 posts[id].js 并将此行：

import { getAllPostIds } from '....libposts';

替换为以下代码：

import { getAllPostIds, getPostData } from '....libposts';

export async function getStaticProps({ params }) {
  const postData = getPostData(params.id);
  return {
    props {
      postData,
    },
  };
}

文章页面正在使用 getPostData 函数在 getStaticProps 中获取文章数据并将其作为 props 返回。

更新 Post 组件

现在，让我们更新 Post 组件以使用 postData 。在页面 posts[id].js 中，用以下代码替换导出的 Post 组件：

export default function Post({ postData }) {
  return (
    Layout
      {postData.title}
      br 
      {postData.id}
      br 
      {postData.date}
    Layout
  );
}

完成了！尝试访问这些页面：

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

现在，您应该能够看到每个页面的博客数据.

太好了！我们已成功生成动态路由。

我们仍然没有显示博客 Markdown 内容，下一篇文章主要给大家讲显示博客 Markdown 内容。

使用 Next.js 读取 matter 文章信息2023年04月01日 - 约 330 字

设置 getStaticProps

更新 Post 组件

使用 Next.js 读取 matter 文章信息
2023年04月01日 - 约 330 字