動態路由

1

2

3

4

5

6

7

8

9

優化文章頁

為文章頁新增 Title

在 pages/posts/[id].js 中，新增 title 標籤來使用文章資料。 你會需要在此檔案的最上方引入 next/head，且在 Post 組件內新增 title 標籤：

  // Add this import
  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 函式庫。首先，來安裝它：

  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} 使用它：

  // 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, 2020”：

新增 CSS

最後，我們使用之前用過的 styles/utils.module.css 來新增 CSS 樣式。打開 pages/posts/[id].js 檔案，然後新增 CSS 檔案的引入，並用以下的程式碼把 Post 組件內容替換：

  // Add this import at the top of the file
  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 查看，現在看起來更好了：

頁面示意圖

做得好！在下一階段，我們會優化我們的 index 頁面並且完成這一部分！

本篇文章由YONG-LIN-LIANG

YONG-LIN-LIANG

貢獻翻譯。瞭解如何參與貢獻