使用 Next.js 完善文章内容，添加标题和格式化日期
2023年05月02日 - 约 545 字

添加文章页面的标题

在 pages/posts/[id].js 文件中，让我们使用文章数据添加 title 标签。您需要在文件顶部添加 next/head 的 import ，并通过更新 Post 组件添加 title 标签：

import Head from 'next/head';

export default function Post({ postData }) {
  return (
    <Layout>
      {/* Add this <Head> tag */}
      <Head>
        <title>{postData.title}</title>
      </Head>

      {/* Keep the existing code here */}
    </Layout>
  );
}

格式化日期

要格式化日期，我们将使用 date-fns 库。首先，安装它：

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

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

npm install date-fns

接下来，创建一个叫做 components/date.js 的文件，并添加以下日期组件：

import { parseISO, format } from 'date-fns';

export default function Date({ dateString }) {
  const date = parseISO(dateString);
  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}

注意：您可以在 date-fns 网站上查看不同的格式()字符串选项。

现在，打开 pages/posts/[id].js ，添加一个 Date 组件的导入，在 {postData.date} 上使用它：

// Add this import
import Date from '../../components/date';

export default function Post({ postData }) {
  return (
    <Layout>
      {/* Keep the existing code here */}

      {/* Replace {postData.date} with this */}
      <Date dateString={postData.date} />

      {/* Keep the existing code here */}
    </Layout>
  );
}

如果您访问 http://localhost:3000/posts/pre-rendering ，则现在应该看到日期已写为 January 1, 2023 。

添加CSS

最后，让我们使用我们之前添加的 styles/utils.module.css 文件添加一些CSS。打开 pages/posts/[id].js ，然后添加CSS文件的导入，并将 Post 组件替换为以下代码：

import utilStyles from '../../styles/utils.module.css';

export default function Post({ postData }) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  );
}

如果您访问 http://localhost:3000/posts/pre-rendering ，则页面现在应该看起来更好：

干得好！接下来我们将完善索引页面，然后就完成啦！

使用 Next.js 完善文章内容，添加标题和格式化日期2023年05月02日 - 约 545 字

添加文章页面的标题

格式化日期

使用 Next.js 完善文章内容，添加标题和格式化日期
2023年05月02日 - 约 545 字