更新日誌

安裝

請安裝時間軸 (timeline) 元件，這會將 @fumadocs/changelog 加入您的相依套件：

npx @fumadocs/cli@latest add changelog

使用方式

請在您的首頁版面配置下建立一個頁面。先取得一頁的條目，再以 ChangelogTimeline 算繪，並透過 ChangelogPagination 連結至其他頁面：

app/(home)/changelog/[[...page]]/page.tsx

import { notFound } from 'next/navigation';
import { githubReleases } from '@fumadocs/changelog/github';
import { ChangelogPagination, ChangelogTimeline } from '@/components/changelog';

export const revalidate = 3600;

export default async function Page(props: PageProps<'/changelog/[[...page]]'>) {
  const { page: segments = [] } = await props.params;
  const page = Number(segments[0] ?? 1);
  const { entries, nextPage } = await githubReleases({
    owner: 'fuma-nama',
    repo: 'fumadocs',
    token: process.env.GITHUB_TOKEN,
    page,
  });
  if (entries.length === 0) notFound();

  return (
    <div className="mx-auto flex w-full max-w-[900px] flex-col gap-10 px-4 py-12">
      <ChangelogTimeline entries={entries} />
      <ChangelogPagination
        newer={page > 1 ? `/changelog/${page - 1}` : undefined}
        older={nextPage ? `/changelog/${nextPage}` : undefined}
      />
    </div>
  );
}

來源

GitHub Releases

githubReleases() 會回傳儲存庫已發布版本中的一頁，若還有較舊的版本，則會附上 nextPage。

版本號會從發布名稱 (例如 fumadocs-ui@16.17.0) 或其標籤中讀取。
預先發布版本的項目會帶有 prerelease 屬性。
GitHub 將未經驗證的請求限制為每小時 60 次。請傳入 token 並快取該頁面，例如 export const revalidate = 3600。
GitHub 只會列出前 1000 個發布版本，使用 token 時則為 10000 個。超出範圍的頁面不會有任何項目。

屬性

型別

自訂項目

項目是純物件，您可以從任何來源建立：

屬性

型別

例如從一組 MDX 檔案建立。傳入 body 即可自行算繪內容：

app/(home)/changelog/page.tsx

import { changelogSource } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
import { ChangelogTimeline, type ChangelogTimelineEntry } from '@/components/changelog';

export default function Page() {
  const entries: ChangelogTimelineEntry[] = changelogSource.getPages().map((page) => {
    const MDX = page.data.body;

    return {
      id: page.url,
      title: page.data.title,
      date: new Date(page.data.date),
      body: <MDX components={getMDXComponents()} />,
    };
  });

  return (
    <div className="mx-auto w-full max-w-[900px] px-4 py-12">
      <ChangelogTimeline entries={entries} />
    </div>
  );
}

安裝複製錨點連結

使用方式複製錨點連結

來源複製錨點連結

GitHub Releases複製錨點連結

自訂項目複製錨點連結

本頁目錄

安裝

使用方式

來源

GitHub Releases

自訂項目