Sanity

概覽

Fumadocs 提供官方整合，可簡化 Sanity CMS 的設定流程。

您可以在 GitHub 上查看我們的 Sanity 範例。

設定

本指南假設您已依照 Sanity 官方文件完成設定。

資料型別

請執行以下指令來初始化內容型別。

npx @fumadocs/cli add sanity/base

您也可以執行 npx @fumadocs/cli add，瀏覽並安裝其他 Sanity 預設組合。

註冊已安裝的類型：

import { docsType, blockContent, callout, card, cards } from '@/lib/sanity/base';

export const schemaTypes = [blockContent, callout, card, cards, docsType];

內容載入器

安裝此整合：

npm i @fumadocs/sanity

使用 Sanity 用戶端建立來源：

lib/source.ts

import { dynamicLoader } from 'fumadocs-core/source';
import { createSanitySource } from '@fumadocs/sanity';
// Sanity 用戶端
import { client } from '@/sanity/lib/client';
// 產生的型別
import type { Docs } from '@/sanity/types';

const source = dynamicLoader(
  createSanitySource<Docs>({
    client,
    docType: 'docs',
  }),
  {
    baseUrl: '/docs',
  },
);

export async function getSource() {
  return source.get();
}

接著使用 getSource() 函式算繪頁面：

src/pages/docs/[...slugs].tsx

import type { PageProps } from 'waku/router';
import { unstable_notFound } from 'waku/router/server';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
import { getSource } from '@/lib/source';
import { CustomPortableText } from '@/components/sanity';

export default async function Page({ slugs }: PageProps<'/docs/[...slugs]'>) {
  const source = await getSource();
  const page = source.getPage(slugs);
  if (!page) unstable_notFound();

  const { renderToc, body } = await page.data.load();

  return (
    <DocsPage toc={renderToc({ render: (block) => <CustomPortableText value={block} /> })}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <CustomPortableText value={body!} />
      </DocsBody>
    </DocsPage>
  );
}

export async function getConfig() {
  const source = await getSource();
  return {
    render: 'static',
    staticPaths: source.generateParams().map((item) => item.slug),
  } as const;
}

完成

在 Studio 編輯器中建立 docs 類型的文件後，這些文件就會出現在 docs 路由中。

概覽複製錨點連結

設定複製錨點連結

資料型別複製錨點連結

內容載入器複製錨點連結

完成複製錨點連結

本頁目錄

概覽

設定

資料型別

內容載入器

完成