更新日誌

安裝

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

npx @fumadocs/cli@latest add changelog

使用方式

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

import { unstable_notFound } from 'waku/router/server';
import { githubReleases } from '@fumadocs/changelog/github';
import { ChangelogPagination, ChangelogTimeline } from '@/components/changelog';

export default async function Page({ page: param = '1' }: { page?: string }) {
  const page = Number(param);
  const { entries, nextPage } = await githubReleases({
    owner: 'fuma-nama',
    repo: 'fumadocs',
    token: process.env.GITHUB_TOKEN,
    page,
  });
  if (entries.length === 0) unstable_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>
  );
}

export const getConfig = async () => ({ render: 'dynamic' }) as const;

來源

GitHub Releases

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

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

屬性

型別

自訂項目

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

屬性

型別

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

src/pages/(home)/changelog/index.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>
  );
}

export const getConfig = async () => ({ render: 'static' }) as const;

安裝複製錨點連結

使用方式複製錨點連結

來源複製錨點連結

GitHub Releases複製錨點連結

自訂項目複製錨點連結

本頁目錄

安裝

使用方式

來源

GitHub Releases

自訂項目