@农作-实验室/svelte-主题

Svelte 5 UI 层和主题预设软件包 @farming-labs/docs 在斯维尔特基特.

它使文档 shell, 页面内容, 侧边栏, 目录, 搜索, AI 对话框, 页面 动作和主题控件。 内容加载和路由处理者居住 @farming-labs/svelte。 。 。 .

安装

npm install @farming-labs/docs @farming-labs/svelte @farming-labs/svelte-theme @farming-labs/theme

CLI可以脚手架 完整的SvelteKit集成:

npx @farming-labs/docs@latest init

配置主题

// src/lib/docs.config.ts
import { defineDocs } from "@farming-labs/docs";
import { fumadocs } from "@farming-labs/svelte-theme";

export default defineDocs({
  entry: "docs",
  contentDir: "docs",
  theme: fumadocs(),
  nav: { title: "Docs", url: "/docs" },
});

导入匹配的共享 CSS src/app.css数字 :

@import "@farming-labs/theme/default/css";

打开文件UI

<script>
  import { DocsLayout } from "@farming-labs/svelte-theme";
  import config from "$lib/docs.config";

  let { data, children } = $props();
</script>

<DocsLayout tree={data.tree} {config}>
  {@render children()}
</DocsLayout>

使用 DocsContent 从页面组件中的同一软件包中。 这个 data 传给这些 组件来自 @farming-labs/svelte/server。 。 。 .

主要出口

• DocsLayout, (中文(简体) ), DocsContent, (中文(简体) ), DocsSidebar,以及 DocsPage
• TableOfContents, (中文(简体) ), Breadcrumb, (中文(简体) ), MobileNav,以及 ThemeToggle
• SearchDialog, (中文(简体) ), AskAIDialog,以及 FloatingAIChat
• Callout 和主题预设工厂

预设子路径为 fumadocs, (中文(简体) ), pixel-border, (中文(简体) ), darksharp, (中文(简体) ), colorful, (中文(简体) ), greentree, (中文(简体) ), hardline, (中文(简体) ), concrete, (中文(简体) ), command-grid,以及 ledger编辑 fumadocs 预设用途 @farming-labs/theme/default/css; 其他预设使用匹配 @farming-labs/theme/<preset>/css 进入点.

学多点

• 文档
• 主题
• SvelteKit 实例
• GitHub 仓库

许可证

麻省理工学院

可选 AI 装入

浮动的AI触发器与页面一起加载. 第一次激活时它的聊天执行负载 关闭后继续挂起 所以重开对话 面板,模式,弹出式, 完整模式和自定义触发器保留其现有的标记和配置.