@ 农作- labs/ nuxt- 主题

Vue 和 Nuxt 用户界面层和主题预设软件包 @farming-labs/docs。 。 。 .

它使文件外壳,页面内容,目录,面包屑,搜索,AI聊天,API 引用切换器和主题控件。 内容加载和硝基处理器 @farming-labs/nuxt。 。 。 .

安装

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

CLI可以脚手架 完整的Nuxt整合:

npx @farming-labs/docs@latest init

配置主题

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

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

添加匹配的共享 CSS nuxt.config.ts数字 :

export default defineNuxtConfig({
  css: ["@farming-labs/theme/default/css"],
});

打开文件UI

<script setup lang="ts">
import { DocsContent, DocsLayout } from "@farming-labs/nuxt-theme";
import config from "~/docs.config";

const { data } = await useFetch("/api/docs", {
  query: { pathname: useRoute().path },
});
</script>

<template>
  <DocsLayout :tree="data.tree" :config="config">
    <DocsContent :data="data" :config="config" />
  </DocsLayout>
</template>

主要出口

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

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

学多点

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

许可证

麻省理工学院

可选 AI 装入

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