Fumadocs 12

有什么新变化？

Fumadocs v12 主要旨在改进 UI，优先考虑内容和阅读体验。

新 UI

在观察像 https://turbo.build 这样的大型文档站点后，我发现导航栏占据了屏幕太多空间，而它只包含指向 Blog、Showcase、GitHub 等页面的链接。 这些链接并不一定与文档相关，将它们放置在屏幕顶部并不会带来更好的阅读体验。

现在，所有这些链接都已移动到侧边栏，从而提供文档的干净、简约视图。

我也注意到，随着内容增长，文档开始看起来有些杂乱。为了改善这一点，侧边栏现在默认包含边框和背景。 这有助于读者更容易区分导航元素和内容。

侧边栏始终放置在屏幕左侧，在大视口上占用更大的空间。

我相信新 UI 仍有改进空间。欢迎报告 UI 问题，或留下反馈！

更好的多页面树

我们在 Fumadocs 的早期版本中就支持了多个页面树。但是，它缺少适当的说明和配置指南。 过去，你需要实现一个导航元素来在页面树之间切换，并将文件夹标记为根文件夹。

现在，你可以直接使用 <RootToggle /> 组件，并且文档对其有更好的说明。

页面树后处理器

现在，你可以使用 Source API 轻松地将属性附加到页面树。

import { loader } from 'fumadocs-core/source';

export const utils = loader({
  pageTree: {
    attachFile(node) {
      // modify the node
      return node;
    },
  },
});

改进的 i18n 支持

现在，语言切换已添加到 Docs Layout 中。

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <DocsLayout i18n>{children}</DocsLayout>;
}

请注意，<LanguageSelect /> 组件现在已被 <LanguageToggle /> 替换，请确保移除对旧组件的引用。

破坏性变更

UI

从 Root Provider 中移除已弃用的选项 enableThemeProvider。请改用 theme.enabled。

Core

从 Sidebar 组件中移除已弃用的选项 minWidth。请改用 blockScrollingWidth。

修复

UI

• 修复 twoslash 代码块的问题
• 为标题应用排版样式
• 支持主题标签的翻译

OpenAPI

• 修复无法检测可空类型的问题

Core

• Remark Headings：支持标题中的代码语法

Create Fumadocs App

• 添加 layout.config.tsx 文件，用于共享布局选项