使用 Fumadocs 制作博客 | Fumadocs 中文文档

Fumadocs 是一个文档框架，但它也是在 Next.js 中管理内容的强大工具。您可以使用 Fumadocs 在单个 Next.js 应用中构建博客网站以及文档。

概述

本指南帮助您使用 Fumadocs 和 Fumadocs MDX 构建博客网站。

我们将使用 Fumadocs MDX 来管理内容，并使用 Tailwind CSS 和 Fumadocs UI 实现自己的 UI。

配置内容

定义一个 blogPosts 集合。

source.config.ts

import { defineCollections, frontmatterSchema } from 'fumadocs-mdx/config';
import { z } from 'zod';

export const blogPosts = defineCollections({
  type: 'doc',
  dir: 'content/blog',
  // add required frontmatter properties
  schema: frontmatterSchema.extend({
    author: z.string(),
    date: z.string().date().or(z.date()),
  }),
});

在 source.ts 中解析输出集合：

lib/source.ts

import { createMDXSource } from 'fumadocs-mdx';
import { loader } from 'fumadocs-core/source';
import { blogPosts } from '@/.source';

export const blog = loader({
  baseUrl: '/blog',
  source: createMDXSource(blogPosts),
});

您现在可以从 blog 访问内容。

实现 UI

为博客文章创建一个索引页面。

默认情况下，应该有一个 (home) 路由组，其中包含 <HomeLayout />。让我们将博客页面放在其下，这样我们的博客网站就能获得漂亮的导航栏。

app/(home)/blog/page.tsx

import Link from 'next/link';
import { blog } from '@/lib/source';

export default function Home() {
  const posts = blog.getPages();

  return (
    <main className="grow container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-8">最新博客文章</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <Link
            key={post.url}
            href={post.url}
            className="block bg-fd-secondary rounded-lg shadow-md overflow-hidden p-6"
          >
            <h2 className="text-xl font-semibold mb-2">{post.data.title}</h2>
            <p className="mb-4">{post.data.description}</p>
          </Link>
        ))}
      </div>
    </main>
  );
}

Good to Know

像 text-fd-muted-foreground 这样的颜色来自 Fumadocs UI 的设计系统，您也可以使用自己的颜色，或使用 Shadcn UI。

并为博客文章创建一个页面。

请注意，博客文章不会有像 /slug1/slug2 这样的嵌套 slugs。我们不需要为博客文章使用捕获所有路由。

app/(home)/blog/[slug]/page.tsx

import { notFound } from 'next/navigation';
import Link from 'next/link';
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
import defaultMdxComponents from 'fumadocs-ui/mdx';
import { blog } from '@/lib/source';

export default async function Page(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const page = blog.getPage([params.slug]);

  if (!page) notFound();
  const Mdx = page.data.body;

  return (
    <>
      <div className="container rounded-xl border py-12 md:px-8">
        <h1 className="mb-2 text-3xl font-bold">{page.data.title}</h1>
        <p className="mb-4 text-fd-muted-foreground">{page.data.description}</p>
        <Link href="/blog">返回</Link>
      </div>
      <article className="container flex flex-col px-4 py-8">
        <div className="prose min-w-0">
          <InlineTOC items={page.data.toc} />
          <Mdx components={defaultMdxComponents} />
        </div>
        <div className="flex flex-col gap-4 text-sm">
          <div>
            <p className="mb-1 text-fd-muted-foreground">作者</p>
            <p className="font-medium">{page.data.author}</p>
          </div>
          <div>
            <p className="mb-1 text-sm text-fd-muted-foreground">日期</p>
            <p className="font-medium">
              {new Date(page.data.date).toDateString()}
            </p>
          </div>
        </div>
      </article>
    </>
  );
}

export function generateStaticParams(): { slug: string }[] {
  return blog.getPages().map((page) => ({
    slug: page.slugs[0],
  }));
}

并配置元数据：

app/(home)/blog/[slug]/page.tsx

import { notFound } from 'next/navigation';
import { blog } from '@/lib/source';

export async function generateMetadata(props: {
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;
  const page = blog.getPage([params.slug]);

  if (!page) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
  };
}

编写文章

UI 现在已完成，您可以在 content/blog 目录下编写一些博客文章，例如：

content/blog/hello.mdx

---
title: Hello World
author: Fuma Nama
date: 2024-12-15
---

## Hello World

这是一个示例！

使用 next dev 启动开发服务器后，您应该能在 /blog 路由下看到博客文章。