iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Modern Web

從零開始打造炫砲個人部落格,使用 Next.js、ContentLayer、i18next 等現代技術系列 第 6

首頁功能實作,加入 Contentlayer 文章列表 - Modern Next.js Blog 系列 #06

讓我們使用上一篇安裝的 Contentlayer,實作首頁文章列表功能,呈現所有 Markdown 文章。

結果截圖如下:

Index Page Result

這篇修改的程式碼如下:
https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day05-markdown-contentlayer...day06-index-page-bare-bone

我的個人網站裡也有此系列的好讀版,程式碼更易讀、也支援深色模式和側邊目錄,歡迎前往閱讀!


排序文章,使用 date-fns

上一篇我們在 contentlayer.config.ts 設定了放文章的路徑,Contentlayer 會去讀取 content/posts/**/*.md,也就是 content/posts/ 裡面的所有 .md 檔案,變成 allPosts 陣列給我們。

但 Contentlayer 不保證文章的排序,而我希望首頁文章列表能從新到舊排列,因此我們需要自己排序文章陣列。

我們將使用 date-fns 來根據文章的 date 屬性排序。

安裝 date-fns

pnpm add date-fns

修改 contentLayerAdapter.js

引入 date-fns 的 compareDesc function,來排序 allPosts,並 export 成 allPostsNewToOld 常數,供稍後首頁文章列表使用:

import { allPosts, Post } from 'contentlayer/generated';
import {
  defineDocumentType,
  defineNestedType,
  makeSource,
} from 'contentlayer/source-files';
import { compareDesc } from 'date-fns'; # Add this

export { allPosts, defineDocumentType, defineNestedType, makeSource, Post };

# Add the following
export const allPostsNewToOld =
  allPosts?.sort((a, b) => {
    return compareDesc(new Date(a.date), new Date(b.date));
  }) || [];

在首頁加入文章列表

修改 /src/pages/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';
import Image from 'next/image';

import { allPostsNewToOld, Post } from '@/lib/contentLayerAdapter';
import styles from '@/styles/Home.module.css';

export function getStaticProps() {
  const posts = allPostsNewToOld;
  return { props: { posts } };
}

type Props = {
  posts: Post[];
};

const Home: NextPage<Props> = ({ posts }) => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
          {posts.map((post) => (
            <a key={post.slug} href={post.path} className={styles.card}>
              <h2>{post.title}</h2>
              <p>{post.description}</p>
            </a>
          ))}
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;

成果

完成了!使用 pnpm dev 並瀏覽首頁,你應該就會看到首頁顯示出了兩篇文章,截圖如下:

Index Page Result

小結&下一篇

恭喜你成功引入 Contentlayer 處理完的 Markdown 文章,顯示在首頁文章列表!

這篇修改的程式碼如下:
https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day05-markdown-contentlayer...day06-index-page-bare-bone

但如果你點擊這兩篇文章,會看到 404 錯誤畫面,這是因為我們還沒實作文章內頁。

下一篇文章就讓我們來實作文章內頁,顯示完整文章內容!


上一篇
Markdown 簡介 & 安裝 ContentLayer - Modern Next.js Blog 系列 #05
下一篇
文章內頁功能實作,渲染 Markdown 文章內容 - Modern Next.js Blog 系列 #07
系列文
從零開始打造炫砲個人部落格,使用 Next.js、ContentLayer、i18next 等現代技術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言