Pages Router：完善文章頁面 | Next.js

為文章頁面添加 `title`

在 pages/posts/[id].js 中，我們將使用文章數據來添加 title 標籤。你需要在文件頂部添加 next/head 的導入，並通過更新 Post 組件來添加 title 標籤：

// 添加此導入
import Head from 'next/head';
 
export default function Post({ postData }) {
  return (
    <Layout>
      {/* 添加此 <Head> 標籤 */}
      <Head>
        <title>{postData.title}</title>
      </Head>
 
      {/* 保留此處的現有代碼 */}
    </Layout>
  );
}

格式化日期

為了格式化日期，我們將使用 date-fns 庫。首先，安裝它：

npm install date-fns

接下來，創建一個名為 components/date.js 的文件，並添加以下 Date 組件：

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 網站上查看不同的 format() 字符串選項。

現在，打開 pages/posts/[id].js，在文件頂部添加 Date 組件的導入，並用它替換 {postData.date}：

// 添加此導入
import Date from '../../components/date';
 
export default function Post({ postData }) {
  return (
    <Layout>
      {/* 保留此處的現有代碼 */}
 
      {/* 用以下代碼替換 {postData.date} */}
      <Date dateString={postData.date} />
 
      {/* 保留此處的現有代碼 */}
    </Layout>
  );
}

如果你訪問 http://localhost:3000/posts/pre-rendering，現在應該會看到日期顯示為 "January 1, 2020"。

添加 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，現在頁面應該看起來更美觀了：

做得很好！接下來我們將完善首頁，然後就大功告成了！

完善文章頁面

為文章頁面添加 title

格式化日期

添加 CSS

On this page

為文章頁面添加 `title`