# Movk Nuxt Docs ::u-page-hero --- ui: container: lg:py-20 class: dark:bg-gradient-to-b from-neutral-900 to-neutral-950 orientation: horizontal --- :::motion{.mx-auto :transition='{"duration":0.6,"delay":0.1}'} ::::prose-pre --- code: | export default defineNuxtConfig({ extends: ['@movk/nuxt-docs'], css: ['~/assets/css/main.css'], llms: { domain: 'https://docs.mhaibaraai.cn', title: 'Movk Nuxt Docs', description: '一款由 Nuxt UI 和 Nuxt Content 强力驱动的 Nuxt 优雅文档主题。', } }) filename: nuxt.config.ts --- ```ts [nuxt.config.ts] export default defineNuxtConfig({ extends: ['@movk/nuxt-docs'], css: ['~/assets/css/main.css'], llms: { domain: 'https://docs.mhaibaraai.cn', title: 'Movk Nuxt Docs', description: '一款由 Nuxt UI 和 Nuxt Content 强力驱动的 Nuxt 优雅文档主题。', } }) ``` :::: ::: #top :::hero-background ::: #title :::motion 打造精美 [文档]{.text-primary}. ::: #description :::motion{:transition='{"duration":0.6,"delay":0.3}'} 一款由 Nuxt UI 和 Nuxt Content 强力驱动的 Nuxt 优雅文档主题，内置内容管理、SEO、暗黑模式、全文搜索等功能，助您轻松构建美观、专业的文档网站。 ::: #links :::motion --- transition: duration: 0.6 delay: 0.5 class: flex flex-wrap gap-x-6 gap-y-3 --- ::::u-button --- size: xl to: https://docs.mhaibaraai.cn/docs/getting-started trailing-icon: i-lucide-arrow-right --- 快速入门 :::: ::::u-button --- color: neutral icon: i-simple-icons-github size: xl target: _blank to: https://github.com/mhaibaraai/movk-nuxt-docs variant: outline --- 使用模板 :::: ::: :: ::u-page-section --- class: dark:bg-neutral-950 --- #title 由 Nuxt UI 强力驱动 #links :::u-button --- color: neutral size: lg target: _blank to: https://ui.nuxt.com/docs/getting-started/installation/nuxt trailingIcon: i-lucide-arrow-right variant: subtle --- 探索 Nuxt UI ::: #features :::u-page-feature --- icon: i-lucide-palette --- #title 100+ UI 组件 #description 内置 Nuxt UI 完整的组件库。从徽章到模态框，一切开箱即用，风格统一，简单易用。 ::: :::u-page-feature --- icon: i-lucide-type --- #title 精美排版 #description 预置的文本组件拥有完美的视觉和谐感。无需 `@tailwindcss/typography`，即可精确控制每个元素。 ::: :::u-page-feature --- icon: i-lucide-layers --- #title 丰富的文本组件 #description 折叠菜单、卡片、标注、选项卡、步骤、代码块等丰富的文本组件，均由 Nuxt UI 提供，专为交互式文档设计。 ::: :::u-page-feature --- icon: i-lucide-search --- #title 内置搜索 #description 基于 `ContentSearch` 组件实现全文搜索。无需 Algolia，即可获得快速、相关的结果，并支持键盘快捷键（⌘K）。 ::: :::u-page-feature --- icon: i-lucide-navigation --- #title 智能导航 #description 使用 `ContentNavigation` 和 `ContentToc` 组件自动生成导航。支持固定目录和上下文翻页链接。 ::: :::u-page-feature --- icon: i-lucide-moon --- #title 暗黑模式 #description 自动主题切换，过渡平滑。尊重系统偏好设置，并能记住用户选择。 ::: :: ::u-page-section --- class: dark:bg-neutral-950 --- #title 由 Nuxt Content 赋能 #links :::u-button --- color: neutral size: lg target: _blank to: https://content.nuxt.com/docs/getting-started/installation trailingIcon: i-lucide-arrow-right variant: subtle --- 探索 Nuxt Content ::: #features :::u-page-feature --- icon: i-simple-icons-markdown --- #title MDC 语法 #description 在 Markdown 中无缝嵌入 Vue 组件，轻松集成交互式元素。 ::: :::u-page-feature --- icon: i-lucide-file-text --- #title 基于文件的路由 #description 通过文件和目录组织内容，您的文档结构将自动映射为导航。 ::: :::u-page-feature --- icon: i-lucide-code --- #title 语法高亮 #description 美观的代码块，支持语言检测、行号和一键复制功能，覆盖 100 多种语言。 ::: :::u-page-feature --- icon: i-lucide-database --- #title 内容数据库 #description 使用类似 MongoDB 的 API 查询您的内容，以编程方式进行筛选、排序和搜索。 ::: :::u-page-feature --- icon: i-lucide-file-code --- #title Front-Matter 支持 #description 为内容文件添加元数据，灵活定义 SEO 标签、导航属性和自定义字段。 ::: :::u-page-feature --- icon: i-lucide-git-branch --- #title 版本控制 #description 内容与代码一同存储在您的 Git 仓库中，方便进行分支、审查和部署。 ::: :: # 简介 这是一个开箱即用的文档模板，基于 [Nuxt UI](https://ui.nuxt.com){rel="nofollow"} 构建，旨在帮助您在几分钟内创建出美观且响应迅速的 Nuxt 应用。 ## 什么是 Movk Nuxt Docs? Movk Nuxt Docs 是一个基于 [UI 文档模板](https://docs-template.nuxt.dev/){rel="nofollow"} 的主题。它不仅提供了精美的视觉风格，更让您能够专注于内容创作，充分利用 [Nuxt Content](https://content.nuxt.com){rel="nofollow"} 提供的 Markdown 和 [MDC 语法](https://content.nuxt.com/docs/files/markdown#mdc-syntax){rel="nofollow"}。 我们在所有 Nuxt 模块文档中均采用了此主题，包括： ::card-group :::card --- icon: i-lucide-notebook target: _blank title: mhaibaraai.cn to: https://mhaibaraai.cn --- 一个专注于技术分享与知识沉淀的个人网站 ::: :: ## 主要特性 此主题集成了一系列旨在优化文档管理体验的强大功能： - **基于** [**Nuxt 4**](https://nuxt.com){rel="nofollow"}：充分利用最新的 Nuxt 框架，实现卓越性能。 - **采用** [**Nuxt UI**](https://ui.nuxt.com){rel="nofollow"}：集成全面的 UI 组件库，开箱即用。 - **[**Nuxt Content**](https://content.nuxt.com){rel="nofollow"} 驱动的 MDC 语法**：支持 Markdown 与 Vue 组件的无缝集成，实现动态内容。 - **组件文档**：内置多个组件，可自动生成组件的 `Props`、`Slots`、`Emits` 文档，并创建交互式示例。 - **自动生成侧边栏导航**：根据您的内容结构，智能生成侧边栏导航。 - **全文搜索**：内置强大的全文搜索功能，便于快速发现内容。 - **优化排版**：提供精心调校的排版，增强内容的可读性。 - **暗黑模式**：支持暗黑模式，以适应不同用户的偏好。 - **丰富功能**：探索此主题，发掘其全部潜力。 # 安装 ## 快速入门 您可以通过以下命令快速启动一个全新的项目： ```bash [Terminal] npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/templates/default my-docs ``` 项目启动后，您可以在 {rel="nofollow"} 访问本地预览。 ### 作为 Layer 使用 在现有 Nuxt 项目中使用 Movk Nuxt Docs 作为 layer： ```bash [Terminal] # 安装依赖 pnpm add @movk/nuxt-docs better-sqlite3 ``` 在 CSS 中导入 Tailwind CSS 和 Nuxt UI ```css [app/assets/css/main.css] @import 'tailwindcss'; @import '@nuxt/ui'; ``` 在 `nuxt.config.ts` 中配置： ```ts [nuxt.config.ts] export default defineNuxtConfig({ extends: ['@movk/nuxt-docs'], css: ['~/assets/css/main.css'], llms: { domain: 'https://docs.mhaibaraai.cn', title: 'Movk Nuxt Docs', description: '一款优雅的 Nuxt 文档主题' } }) ``` # 项目结构 ## 整体结构 Movk Nuxt Docs 是一个 **Nuxt 层 (Layer)**，它为您的标准 Nuxt 应用赋予了强大的文档功能，同时保留了 Nuxt 项目的完整灵活性。 当您使用 `npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/templates/default my-docs` 创建一个新的 Movk Nuxt Docs 项目时，会生成以下结构： ```bash my-docs/ ├── app/ │ ├── assets/css/main.css # 全局样式 │ └── composables/ # 自定义 Composables ├── content/ # Markdown 内容 │ ├── index.md # 首页 │ └── docs/ # 文档页面 ├── public/ # 静态资源 ├── scripts/ # 脚本 ├── nuxt.config.ts # Nuxt 配置 ├── tsconfig.json # TypeScript 配置 ├── package.json # 依赖与脚本 ├── pnpm-workspace.yaml # pnpm 工作区配置 └── README.md # 项目说明 ``` ### 内容目录 `content/` 您可以在此目录中使用 Markdown 编写文档页面。Movk Nuxt Docs 会根据您的文件结构自动生成路由。 ```bash content/ ├── index.md └── docs/ ├── 1.index.md └── 2.installation.md ``` ### 公共资源目录 `public/` `public/` 目录下的文件将直接在根路径提供服务，且不会被构建过程处理。您可以将图片、图标和其他静态资源存放在这里。 ### 依赖管理 `package.json` 此文件定义了项目的所有依赖项和脚本。一个典型的 Movk Nuxt Docs 项目的 `package.json` 文件非常精简： ```json [package.json] { "name": "movk-nuxt-docs-template", "packageManager": "pnpm@10.18.3", "scripts": { "build": "nuxt build", "dev": "nuxt dev" }, "dependencies": { "@movk/nuxt-docs": "latest", "better-sqlite3": "^12.4.1", "nuxt": "^4.1.3" } } ``` ### 样式文件 `app/assets/css/main.css` ```css [app/assets/css/main.css] @import 'tailwindcss'; @import '@nuxt/ui'; @theme static { --font-sans: 'Public Sans', sans-serif; --container-8xl: 90rem; } :root { --ui-container: var(--container-8xl); } ``` ### Nuxt 配置文件 `nuxt.config.ts` ```typescript [nuxt.config.ts] export default defineNuxtConfig({ extends: ['@movk/nuxt-docs'], css: ['~/assets/css/main.css'], compatibilityDate: 'latest' }) ``` ### 应用配置文件 `app.config.ts` *此文件对于启动 Movk Nuxt Docs 应用并非必需。* ::warning 若要覆盖应用配置，您需要同时创建一个 `nuxt.config.ts` 文件。 :: 您可以在此文件中配置 Movk Nuxt Docs，以匹配您的品牌、处理 SEO、以及自定义链接和社交媒体信息。 # 配置 Movk Nuxt Docs 允许您通过 Nuxt 提供的 [`app.config.ts`](https://nuxt.com/docs/guide/directory-structure/app-config){rel="nofollow"} 文件来配置您的文档。 ::warning 若要覆盖应用配置，您需要同时创建一个 `nuxt.config.ts` 文件。否则，您的更改将不会生效。 :: ## SEO ### 全局配置 在 `app.config.ts` 文件中为您的整个文档定义默认的 `SEO` 元数据。 您还可以从 `nuxt.config.ts` 文件配置 `site.name`，其默认值基于您 `package.json` 中的 `name` 字段。 ::code-group ```ts [app.config.ts] export default defineAppConfig({ seo: { // 默认为 `%s - ${site.name}` titleTemplate: '', // 默认为 package.json 的 name 字段 title: '', // 默认为 package.json 的 description 字段 description: '', }, }) ``` ```ts [nuxt.config.ts] export default defineNuxtConfig({ site: { name: 'Movk Nuxt Docs', }, }) ``` :: ### 按页面配置 `content/` 目录中的每个 Markdown 文件都以一个 Front-Matter 块 (`---`) 开头。您可以通过 `seo` 键为每个页面单独定义 `SEO` 元数据： ```md [content/concepts/configuration.md] --- seo: title: '配置' description: '通过 Nuxt 应用配置文件自定义您的 Movk Nuxt Docs 文档。' --- ``` ::tip{to="https://content.nuxt.com/docs/collections/types#page-type"} 有关 Front-Matter 的更多信息，请参阅 Nuxt Content 指南。 :: ## 头部 (Header) ```ts [app.config.ts] export default defineAppConfig({ header: { title: '', // 标题 to: '/', // 标题链接 search: true, // 显示搜索栏 colorMode: true, // 显示颜色模式切换器 links: ButtonProps[], // 头部链接按钮 }, }) ``` ## 页脚 (Footer) ```ts [app.config.ts] export default defineAppConfig({ footer: { // 版权信息 credits: `Copyright © 2024 - ${new Date().getFullYear()} YiXuan - MIT License`, // 页脚社交媒体图标链接 socials: [ { icon: 'i-lucide-brain', to: 'https://docs.mhaibaraai.cn/llms.txt', target: '_blank', label: 'Open LLMs', }, ], }, }) ``` ## 目录 (TOC) 您可以自定义每个页面右侧的内容目录（Table of Contents）。 ```ts [app.config.ts] export default defineAppConfig({ toc: { // 自定义目录标题 title: '本页内容', // 在目录底部添加一个区域 bottom: { title: '社区', links: [{ icon: 'i-lucide-book-open', label: 'Nuxt UI 文档', to: 'https://ui.nuxt.com/getting-started/installation/nuxt', target: '_blank', }], }, }, }) ``` ## GitHub 集成 Movk Nuxt Docs 使用 [git-url-parse](https://github.com/IonicaBizau/git-url-parse){rel="nofollow"} 来获取您仓库的 `url` 和 `branch`，以便添加以下功能： - 头部和页脚的 GitHub 图标 - 每个页面页脚的“在 GitHub 上编辑此页”和“报告问题”链接 您可以通过在 `app.config.ts` 文件中添加以下配置，来自定义文档应用的 `url`、`branch` 和 `rootDir`： ```ts [app.config.ts] export default defineAppConfig({ github: { branch: 'main', rootDir: 'docs', }, }) ``` 如果您不希望使用 GitHub 集成，可以将 `github` 键设置为 `false` 来禁用它。 ```ts [app.config.ts] export default defineAppConfig({ github: false, }) ``` ## `useHeader` 通过 `composables/useHeader` 可组合项，您可以访问并自定义 Movk Nuxt Docs 头部的配置。 ::code-collapse ```ts [composables/useHeader.ts] export function useHeader() { const route = useRoute() const desktopLinks = computed(() => [{ label: '文档', to: '/docs/getting-started', active: route.path.startsWith('/docs/'), }, { label: '发布版本', to: '/releases', }]) const mobileLinks = computed(() => [{ label: '快速开始', icon: 'i-lucide-square-play', to: '/docs/getting-started', active: route.path.startsWith('/docs/getting-started'), }, { label: '基础', icon: 'i-lucide-book-open', to: '/docs/essentials', active: route.path.startsWith('/docs/essentials'), }, { label: 'Composables', icon: 'i-lucide-square-function', to: '/docs/composables', active: route.path.startsWith('/docs/composables'), }, { label: '发布版本', icon: 'i-lucide-newspaper', to: '/releases', }, { label: 'GitHub', to: 'https://github.com/mhaibaraai/movk-nuxt-docs', icon: 'i-simple-icons-github', target: '_blank', }]) return { desktopLinks, mobileLinks, } } ``` :: ## `useCategory` 通过 `composables/useCategory` 可组合项，您可以为 `docs` 目录下的页面定义分类。 ```ts [composables/useCategory.ts] export function useCategory() { const categories = { 'getting-started': [ { id: 'core-concepts', title: '核心概念', icon: 'i-lucide-settings' } ], 'components': [ { id: 'components', title: 'Components', icon: 'i-lucide-layout-dashboard' }, { id: 'example', title: 'Example', icon: 'i-lucide-box' } ] } return { categories } } ``` # 自定义 要覆盖一个组件，只需在您的 `components/` 目录下创建一个同名的 Vue 文件即可。 ## 头部 (Header) 您可以通过覆盖 `components/header` 目录下的以下组件，来自定义头部的不同部分： - `Header` - `HeaderLogo` - `HeaderBody` - `HeaderBottom` ## 页脚 (Footer) 您可以通过覆盖 `components/footer` 目录下的 `Footer` 组件来自定义页脚。 ## 页面 (Page) 您还可以自定义文档页面的头部和侧边栏。 ### `PageHeaderLinks` 在文档页面头部的右侧，Movk Nuxt Docs 默认会显示一个下拉菜单，其中包含与当前页面 Markdown 源文件相关的快捷操作。这些操作允许读者： - **复制**原始 `.md` 文件的直接链接到剪贴板。 - 在新的浏览器标签页中**查看** Markdown 源文件。 - 在 ChatGPT 或 Claude 中**打开**页面内容，并预设一个提示来分析该 Markdown 文件。 这些功能对于贡献者、读者或 AI 辅助工作流非常有用。不过，您也可以通过创建自己的 `components/PageHeaderLinks.vue` 组件来覆盖此行为。 ### `AdsCarbon` 要自定义文档页面右侧边栏的底部区域，您可以创建 `components/AdsCarbon.vue` 组件。 # LLM 集成 Movk Nuxt Docs 默认集成了 `nuxt-llms` 模块，为您的内容生成适用于大型语言模型（LLM）的 AI 就绪文件。您的所有文档页面都将被处理，并自动生成和预渲染 `/llms.txt` 与 `/_llms-full.txt` 文件。 ::note{target="_blank" to="https://docs.mhaibaraai.cn/llms.txt"} 查看为 Movk Nuxt Docs 文档本身生成的 `/llms.txt` 文件。 :: ::note{to="https://docs.mhaibaraai.cn/_llms-full.txt"} 查看为 Movk Nuxt Docs 文档本身生成的 `/_llms-full.txt` 文件。 :: ## 默认配置 以下是用于生成 `/llms.txt` 文件的默认配置： - `domain` → 根据您的部署平台自动计算（或使用 `NUXT_SITE_URL` 环境变量）。 - `title` → 从您项目的 `package.json` 文件中提取。 - `description` → 从您项目的 `package.json` 文件中提取。 - `full.title` → 从您项目的 `package.json` 文件中提取。 - `full.description` → 从您项目的 `package.json` 文件中提取。 ## 自定义配置 您可以在 `nuxt.config.ts` 文件中覆盖 LLM 相关的数据： ```ts [nuxt.config.ts] export default defineNuxtConfig({ llms: { domain: 'https://your-site.com', title: 'Your Site Name', description: 'A brief description of your site', full: { title: 'Your Site Name', description: 'A brief description of your site', }, }, }) ``` ::tip{to="https://github.com/nuxt-content/nuxt-llms"} 有关该模块的更多信息，请查阅 `nuxt-llms` 的官方文档。 :: ::note{icon="i-lucide-info"} 任何支持 `llms.txt` 的 AI 工具都可以利用这些路由来更好地理解您的 Movk Nuxt Docs 文档。 - "使用来自 {rel="nofollow"} 的 Movk Nuxt Docs 文档" - "遵循来自 {rel="nofollow"} 的完整 Movk Nuxt Docs 指南" :: # Nuxt ## Vue 页面 Movk Nuxt Docs 提供了三个内置页面： - `pages/index.vue`：首页 - `pages/releases.vue`：发布日志页面 - `pages/docs/[...slug].vue`：文档页面 您可以通过在 `app/pages/` 目录下创建 Vue 文件来添加自定义页面。例如，创建一个简单的 `hello.vue` 页面： ```vue [app/pages/hello.vue] ``` ## 扩展页面 ::tip --- to: https://content.nuxt.com/docs/collections/inherit-schema-from-component --- 从 Vue 组件继承 Schema :: 您可以通过以下配置定义一个 `releases` 页面： ::code-tree{default-value="app/pages/releases.vue" expand-all="true"} ```ts [content.config.ts] import { defineCollection, defineContentConfig, z, property } from '@nuxt/content' import { asSeoCollection } from '@nuxtjs/seo/content' export default defineContentConfig({ collections: { releases: defineCollection(asSeoCollection({ type: 'page', source: 'releases.yml', schema: z.object({ releases: z.string(), hero: property(z.object({})).inherit('@nuxt/ui/components/PageHero.vue') }) })) } }) ``` ```vue [app/pages/releases.vue] ``` ```mdc [content/releases.yaml] title: 发布日志 description: 了解 Movk Nuxt Docs 的最新功能、改进和错误修复。 navigation: false hero: title: 发布日志 description: 了解 Movk Nuxt Docs 的最新功能、改进和错误修复。 releases: https://ungh.cc/repos/mhaibaraai/movk-nuxt-docs/releases links: - label: 在 GitHub 上标星 color: neutral variant: outline to: https://github.com/mhaibaraai/movk-nuxt-docs target: _blank icon: i-lucide-star ``` :: ## 布局 Movk Nuxt Docs 提供了两个内置布局： - `default` 布局：用于首页和自定义 Vue 页面 - `docs` 布局：用于文档页面 如果您想使用不同的布局，可以在 `app/layouts/` 目录下创建。 ```vue [app/layouts/custom.vue] ``` # Markdown 语法 ## 标题 使用标题来组织文档的主要部分，这有助于用户更好地导航和理解内容。 ::code-preview --- class: "[&>div]:*:my-0" --- ## 标题 #code ```mdc ## 标题 ``` :: ### 副标题 使用副标题进一步细分内容，创建更清晰的层次结构，提高可读性。 ::code-preview --- class: "[&>div]:*:my-0" --- ### 副标题 #code ```mdc ### 副标题 ``` :: ::tip 每个标题和副标题都会自动生成一个锚点，并显示在页面的目录中。 :: ## 文本格式化 Movk Nuxt Docs 支持大多数标准的 Markdown 文本格式化选项。 | 样式 | 语法 | 效果 | | --- | --------- | ------- | | 粗体 | `**粗体**` | **粗体** | | 斜体 | `*斜体*` | *斜体* | | 删除线 | `~~删除线~~` | ~~删除线~~ | 您可以组合使用这些格式，以实现更丰富的文本样式和视觉强调。 | 样式 | 语法 | 效果 | | ----- | ------------ | ---------- | | 粗斜体 | `***粗斜体***` | ***粗斜体*** | | 粗体删除线 | `~~**粗体**~~` | ~~**粗体**~~ | | 斜体删除线 | `~~*斜体*~~` | ~~*斜体*~~ | ## 链接 链接用于连接文档的不同部分或指向外部资源，对于用户导航和提供参考至关重要。要创建链接，请将链接文本包裹在方括号 `[]` 中，后跟圆括号 `()` 内的 URL。 ::code-preview --- class: "[&>div]:*:my-0" --- [Nuxt UI](https://ui.nuxt.com/getting-started/installation/nuxt){rel="nofollow"} #code ```mdc [Nuxt UI](https://ui.nuxt.com/getting-started/installation/nuxt) ``` :: ### 内部链接 要在文档内部创建链接，请使用相对于根目录的路径，例如 `/docs/getting-started/installation`。 ::code-preview --- class: "[&>div]:*:my-0" --- [安装](https://docs.mhaibaraai.cn/docs/getting-started/installation) #code ```mdc [安装](/docs/getting-started/installation) ``` :: ## 列表 列表以结构化、易于阅读的格式组织相关项目。Markdown 支持无序列表、有序列表和嵌套列表，以满足不同的内容需求。 ### 无序列表 对于没有特定顺序的项目，请使用无序列表。每个列表项以 `-` 符号开头。 ::code-preview --- class: "[&>div]:*:my-0" --- - 我是列表项目。 - 我是另一个列表项目。 - 我是最后一个列表项目。 #code ```mdc - 我是列表项目。 - 我是另一个列表项目。 - 我是最后一个列表项目。 ``` :: ### 有序列表 当项目顺序重要时使用有序列表，如流程中的步骤。每项以数字开头。 ::code-preview --- class: "[&>div]:*:my-0" --- 1. 我是列表项目。 2. 我是另一个列表项目。 3. 我是最后一个列表项目。 #code ```mdc 1. 我是列表项目。 2. 我是另一个列表项目。 3. 我是最后一个列表项目。 ``` :: ### 嵌套列表 为复杂结构创建具有子项目的分层列表。通过四个空格缩进子项目以进行嵌套。 ::code-preview --- class: "[&>div]:*:my-0" --- - 我是列表项目。 - 我是嵌套列表项目。 - 我是另一个嵌套列表项目。 - 我是另一个列表项目。 #code ```mdc - 我是列表项目。 - 我是嵌套列表项目。 - 我是另一个嵌套列表项目。 - 我是另一个列表项目。 ``` :: ## 表格 清晰地以行和列的形式呈现结构化数据。表格非常适合比较数据或列出属性。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" --- | Prop | Default | Type | | ------- | --------- | -------- | | `name` | | `string` | | `size` | `md` | `string` | | `color` | `neutral` | `string` | #code ```mdc | Prop | Default | Type | |---------|-----------|--------------------------| | `name` | | `string`{lang="ts-type"} | | `size` | `md` | `string`{lang="ts-type"} | | `color` | `neutral` | `string`{lang="ts-type"} | ``` :: ## 块引用 突出显示重要的引用、参考或强调的文本。块引用在视觉上区分引用的内容。 ### 单行 单行块引用最适合短小、有力的引用或适合在一行内的引用。要创建单行块引用，在段落前添加 `>`。非常适合短小且有力的引用。 ::code-preview --- class: "[&>div]:*:my-0" --- > Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。 #code ```mdc > Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。 ``` :: ### 多行 多行块引用适用于较长的引用或当您需要在单个引用中包含多个段落时。 ::code-preview --- class: "[&>div]:*:my-0" --- > Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。 > > 使用 Nuxt UI 创建美观、响应式和可访问的 Vue 应用程序。 #code ```mdc > Nuxt UI 是一个建立在 Reka UI 之上的 Vue 组件、可组合函数和工具的集合，面向结构和布局，被设计为应用程序的构建块。 > > 使用 Nuxt UI 创建美观、响应式和可访问的 Vue 应用程序。 ``` :: # 代码块 ## 基础用法 ### 内联代码 使用内联代码在文本段落中嵌入简短的代码片段，非常适合在句子中直接引用代码元素。 ::code-preview --- class: "[&>div]:*:my-0" --- `内联代码` #code ```mdc `内联代码` ``` :: ### 代码块 使用代码块来展示带有语法高亮的多行代码。代码块对于清晰地呈现代码示例至关重要。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" --- ```ts export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` #code ````mdc ```ts export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` ```` :: 在编写代码块时，您可以指定一个文件名显示在代码块的顶部。图标会根据文件扩展名或名称自动匹配。这有助于用户理解代码在项目中的位置和用途。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" --- ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` #code ````mdc ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxt/ui'] }) ``` ```` :: 每个代码块都内置了一个复制按钮，方便用户将代码复制到剪贴板。 ::tip{to="https://ui.nuxt.com/getting-started/icons/nuxt#theme"} 图标已默认定义，但您可以在 `app.config.ts` 中进行自定义： ```ts [app.config.ts] export default defineAppConfig({ ui: { prose: { codeIcon: { terminal: 'i-ph-terminal-window-duotone' } } } }) ``` :: ## 高级用法 ### 代码组 使用 `code-group` 组件在选项卡中对多个代码块进行分组，非常适合用于展示多种语言或包管理器的代码示例。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" --- :::code-group{.w-full} ```bash [pnpm] pnpm add @nuxt/ui ``` ```bash [yarn] yarn add @nuxt/ui ``` ```bash [npm] npm install @nuxt/ui ``` ```bash [bun] bun add @nuxt/ui ``` ::: #code ````mdc :::code-group ```bash [pnpm] pnpm add @nuxt/ui ``` ```bash [yarn] yarn add @nuxt/ui ``` ```bash [npm] npm install @nuxt/ui ``` ```bash [bun] bun add @nuxt/ui ``` :: ```` :: ### 代码树 使用 `code-tree` 在文件树视图中显示代码块。`code-tree` 非常适合展示项目结构和文件关系。 ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} :::code-tree{default-value="app/app.config.ts"} ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxt/ui'], css: ['~/assets/css/main.css'] }) ``` ```css [app/assets/css/main.css] @import "tailwindcss"; @import "@nuxt/ui"; ``` ```ts [app/app.config.ts] export default defineAppConfig({ ui: { colors: { primary: 'sky', colors: 'slate' } } }) ``` ```vue [app/app.vue] ``` ```json [package.json] { "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", "lint": "eslint .", "lint:fix": "eslint --fix ." }, "dependencies": { "@iconify-json/lucide": "^1.2.18", "@nuxt/ui": "4.0.0-alpha.1", "nuxt": "^4.1.0" }, "devDependencies": { "eslint": "^9.34.0", "typescript": "^5.9.3", "vue-tsc": "^3.0.6" } } ``` ```json [tsconfig.json] { "extends": "./.nuxt/tsconfig.json" } ``` ````md [README.md] # Nuxt 4 Minimal Starter Look at the [Nuxt 4 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. ## Setup Make sure to install the dependencies: ```bash # npm npm install # pnpm pnpm install # yarn yarn install # bun bun install ``` ## Development Server Start the development server on `http://localhost:3000`: ```bash # npm npm run dev # pnpm pnpm run dev # yarn yarn dev # bun bun run dev ``` ## Production Build the application for production: ```bash # npm npm run build # pnpm pnpm run build # yarn yarn build # bun bun run build ``` Locally preview production build: ```bash # npm npm run preview # pnpm pnpm run preview # yarn yarn preview # bun bun run preview ``` Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. ```` ::: :: ### `CodePreview` 使用 `code-preview` 显示代码输出与代码并排。`code-preview` 非常适合交互式示例和演示代码结果。 在 `default` 插槽中编写要预览的代码，在 `code` 插槽中编写实际代码。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" label: 预览 --- :::code-preview --- class: "[&>div]:*:my-0" --- `内联代码` #code ```mdc `内联代码` ``` ::: #code ````mdc ::code-preview `内联代码` #code ```mdc `内联代码` ``` :: ```` :: ### `CodeCollapse` 使用 `code-collapse` 对于长代码块以保持页面整洁。`code-collapse` 允许用户仅在需要时展开代码块，提高可读性。 ::code-preview --- class: "[&>div]:*:my-0 [&>div]:*:w-full" --- :::code-collapse{class="[&>div]:my-0"} ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @theme { --font-sans: 'Public Sans', sans-serif; --breakpoint-3xl: 1920px; --color-green-50: #EFFDF5; --color-green-100: #D9FBE8; --color-green-200: #B3F5D1; --color-green-300: #75EDAE; --color-green-400: #00DC82; --color-green-500: #00C16A; --color-green-600: #00A155; --color-green-700: #007F45; --color-green-800: #016538; --color-green-900: #0A5331; --color-green-950: #052E16; } ``` ::: #code ````mdc ::code-collapse ```css [main.css] @import "tailwindcss"; @import "@nuxt/ui"; @theme { --font-sans: 'Public Sans', sans-serif; --breakpoint-3xl: 1920px; --color-green-50: #EFFDF5; --color-green-100: #D9FBE8; --color-green-200: #B3F5D1; --color-green-300: #75EDAE; --color-green-400: #00DC82; --color-green-500: #00C16A; --color-green-600: #00A155; --color-green-700: #007F45; --color-green-800: #016538; --color-green-900: #0A5331; --color-green-950: #052E16; } ``` :: ```` :: # Markdown 组件 Prose 组件是标准 HTML 排版标签的替代品，它们提供了一种在使用 Markdown 时轻松自定义 UI 的方法。 **Movk Nuxt Docs 和 Nuxt UI** 提供了一套设计精美的 Prose 组件，帮助您使用 [MDC 语法](https://content.nuxt.com/docs/files/markdown#mdc-syntax){rel="nofollow"} 编写出色的文档。 ::prose-note{to="https://ui.nuxt.com/getting-started"} 本页仅重点介绍最适合编写文档的 Prose 组件。然而，您可以在 Markdown 中使用**任何 Nuxt UI 组件**。有关可用组件的完整列表，请参阅 Nuxt UI 官方文档。 :: ### `Accordion` 使用 `accordion` 和 `accordion-item` 组件在您的内容中嵌入一个 [Accordion](https://ui.nuxt.com/components/accordion){rel="nofollow"}。 ::tabs :::tabs-item{icon="i-lucide-eye" label="Preview"} ::::accordion :::::accordion-item --- icon: i-lucide-circle-help label: 什么是 Movk Nuxt Docs，它的主要特性是什么？ --- Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。 ::::: :::::accordion-item{icon="i-lucide-circle-help" label="如何开始使用 Movk Nuxt Docs？"} 要开始一个 Movk Nuxt Docs 项目，您只需要一个 `content/` 文件夹。您可以查看入门模板以快速开始。 ::::: :::::accordion-item{icon="i-lucide-circle-help" label="什么是 Nuxt UI？"} [Nuxt UI](https://ui.nuxt.com/){rel="nofollow"} 是一个包含高质量 Vue 组件、可组合项和工具的集合。 ::::: :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::accordion :::accordion-item{label="什么是 Movk Nuxt Docs，它的主要特性是什么？" icon="i-lucide-circle-help"} Movk Nuxt Docs 是一个使用 Nuxt UI 构建的完全集成的文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。 ::: :::accordion-item{label="如何开始使用 Movk Nuxt Docs？" icon="i-lucide-circle-help"} 要开始一个 Movk Nuxt Docs 项目，您只需要一个 `content/` 文件夹。您可以查看入门模板以快速开始。 ::: :::accordion-item{label="什么是 Nuxt UI？" icon="i-lucide-circle-help"} [Nuxt UI](https://ui.nuxt.com/) 是一个包含高质量 Vue 组件、可组合项和工具的集合。 ::: :: ``` ::: :: ### `Badge` 在 `badge` 组件的默认插槽中使用 Markdown，在您的内容中显示一个 [Badge](https://ui.nuxt.com/components/badge){rel="nofollow"}。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::badge **v3.0.0** :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::badge **v3.0.0** :: ``` ::: :: ### `Callout` 在 `callout` 组件的默认插槽中使用 Markdown，为您的内容添加引人注目的上下文信息。 使用 `icon` 和 `color` 属性来自定义其外观。您还可以传递 [``](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} 组件的任何属性。 此外，您可以使用具有预定义图标和颜色的 `note`、`tip`、`warning` 和 `caution` 快捷方式。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::div{.flex.flex-col.gap-4.w-full} :::::note{.w-full.my-0} 这是一些额外的信息。 ::::: :::::tip{.w-full.my-0} 这是一个有帮助的建议。 ::::: :::::warning{.w-full.my-0} 请小心此操作，因为它可能产生意外结果。 ::::: :::::caution{.w-full.my-0} 此操作无法撤销。 ::::: :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::note 这是一些额外信息。 :: ::tip 这是一个有帮助的建议。 :: ::warning 请小心此操作，因为它可能产生意外结果。 :: ::caution 此操作无法撤销。 :: ``` ::: :: ### `Card` 和 `CardGroup` 在 `card` 组件的默认插槽中使用 Markdown 来突出显示您的内容。 使用 `title`、`icon` 和 `color` 属性来自定义它。您还可以传递 [``](https://nuxt.com/docs/api/components/nuxt-link){rel="nofollow"} 中的任何属性。 使用 `card-group` 组件包装您的 `card` 组件，将它们分组在一起以获得网格布局。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::card-group{.w-full.my-0} :::::card --- icon: i-simple-icons-github target: _blank title: Dashboard to: https://github.com/nuxt-ui-templates/dashboard --- 一个多列布局的仪表板。 ::::: :::::card --- icon: i-simple-icons-github target: _blank title: SaaS to: https://github.com/nuxt-ui-templates/saas --- 具有登陆页面、定价、文档和博客的模板。 ::::: :::::card --- icon: i-simple-icons-github target: _blank title: Docs to: https://github.com/nuxt-ui-templates/docs --- 一个带有 `@nuxt/content` 的文档。 ::::: :::::card --- icon: i-simple-icons-github target: _blank title: Landing to: https://github.com/nuxt-ui-templates/landing --- 一个可用作起点的登陆页面。 ::::: :::: ::: :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ```mdc :::card-group ::card --- title: Dashboard icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/dashboard target: _blank --- A dashboard with multi-column layout. :: ::card --- title: SaaS icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/saas target: _blank --- A template with landing, pricing, docs and blog. :: ::card --- title: Docs icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/docs target: _blank --- A documentation with `@nuxt/content`. :: ::card --- title: Landing icon: i-simple-icons-github to: https://github.com/nuxt-ui-templates/landing target: _blank --- A landing page you can use as starting point. :: ::: ``` ::: :: ### `Collapsible` 使用 `collapsible` 组件包装您的内容以在内容中显示 [Collapsible](https://ui.nuxt.com/components/collapsible){rel="nofollow"}。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::collapsible | Prop | Default | Type | | ------- | --------- | -------- | | `name` | | `string` | | `size` | `md` | `string` | | `color` | `neutral` | `string` | :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::collapsible | Prop | Default | Type | |---------|-----------|--------------------------| | `name` | | `string`{lang="ts-type"} | | `size` | `md` | `string`{lang="ts-type"} | | `color` | `neutral` | `string`{lang="ts-type"} | :: ``` ::: :: ### `Field` 和 `FieldGroup` `field` 是一个在内容中显示的属性或参数。您可以通过 `field-group` 将它们分组在列表中。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::field-group{.my-0} :::::field{name="analytics" type="boolean"} Default to `false` - Enables analytics for your project (coming soon). ::::: :::::field{name="blob" type="boolean"} Default to `false` - Enables blob storage to store static assets, such as images, videos and more. ::::: :::::field{name="cache" type="boolean"} Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` ::::: :::::field{name="database" type="boolean"} Default to `false` - Enables SQL database to store your application's data. ::::: :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::field-group ::field{name="analytics" type="boolean"} Default to `false` - Enables analytics for your project (coming soon). :: ::field{name="blob" type="boolean"} Default to `false` - Enables blob storage to store static assets, such as images, videos and more. :: ::field{name="cache" type="boolean"} Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` :: ::field{name="database" type="boolean"} Default to `false` - Enables SQL database to store your application's data. :: :: ``` ::: :: ### `Icon` 使用 `icon` 组件在内容中显示 [Icon](https://ui.nuxt.com/components/icon){rel="nofollow"}。 ::code-preview :::icon{name="i-simple-icons-nuxtdotjs"} ::: #code ```mdc :icon{name="i-simple-icons-nuxtdotjs"} ``` :: ### `Kbd` 使用 `kbd` 组件在内容中显示 [Kbd](https://ui.nuxt.com/components/kbd){rel="nofollow"}。 ::code-preview #code ```mdc :kbd{value="meta"} :kbd{value="K"} ``` :: ### `Tabs` 使用 `tabs` 和 `tabs-item` 组件在内容中显示 [Tabs](https://ui.nuxt.com/components/tabs){rel="nofollow"}。 ::code-preview :::tabs{.w-full} ::::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :: ``` :::: ::::tabs-item{icon="i-lucide-eye" label="Preview"} :::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. ::::: :::: ::: #code ````mdc ::tabs{.w-full} :::tabs-item{icon="i-lucide-code" label="Code"} ```mdc ::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :::: ``` :::: :::tabs-item{icon="i-lucide-eye" label="Preview"} :::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. ::::: ::: :: ```` :: ### `Steps` 用 Steps 组件包装您的标题以显示步骤列表。 使用 `level` 属性来定义哪个标题将用于步骤。 ::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::steps{level="4"} #### Start a fresh new project ```bash [Terminal] npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template ``` #### Run your dev server ```bash [Terminal] pnpm run dev ``` :::: ::: :::tabs-item{icon="i-lucide-code" label="Code"} ````mdc ::steps{level="4"} #### 启动一个全新项目 ```bash [Terminal] npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template ``` #### 启动您的开发服务器 ```bash [Terminal] pnpm run dev ``` :: ```` ::: :: # 图片与嵌入 ## Markdown 使用标准的 Markdown 语法来显示图片或视频。 ### 图片 ::code-preview ![Nuxt 社交图片](https://nuxt.com/new-social.jpg) #code ```mdc ![Nuxt 社交图片](https://nuxt.com/new-social.jpg) ``` :: 或者使用本地图片： ::code-preview ![夕阳下云海中的雪山](https://docs.mhaibaraai.cn/mountains.webp) #code ```mdc ![夕阳下云海中的雪山](/mountains.webp) ``` :: ::note{to="https://image.nuxt.com/"} Movk Nuxt Docs 在底层会使用 `` 组件，而不是原生的 `` 标签。 :: ### 视频 ::prose-code-preview :video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"} #code ```mdc :video{autoplay controls loop src="https://res.cloudinary.com/dcrl8q2g3/video/upload/v1745404403/landing_od8epr.mp4"} ``` :: ### # ComponentProps ## 用法 在您的 Markdown 文档中使用以下语法： ```mdc [md] :component-props{slug="你的组件名称"} ``` ## API ### Props ::component-props :: # ComponentSlots ## 用法 在您的 Markdown 文档中使用以下语法： ```mdc [md] :component-slots{slug="你的组件名称"} ``` ## API ### Props ::component-props :: # ComponentEmits ## 用法 在您的 Markdown 文档中使用以下语法： ```mdc [md] :component-emits{slug="你的组件名称"} ``` ## API ### Props ::component-props :: # ComponentExample ## 用法 `ComponentExample` 用于在文档中嵌入可交互的组件示例。它会自动加载组件,并展示实时预览和源代码。 ::warning 使用 `ComponentExample` 前,需要在 `nuxt.config.ts` 中配置示例组件目录,以确保组件被全局注册: ```typescript import { createResolver } from '@nuxt/kit' const { resolve } = createResolver(import.meta.url) export default defineNuxtConfig({ modules: [ (_, nuxt) => { nuxt.hook('components:dirs', (dirs) => { dirs.unshift({ path: resolve('./app/components/content/examples'), pathPrefix: false, prefix: '', global: true }) }) } ] }) ``` 此配置将 `./app/components/content/examples` 目录下的所有组件注册为全局组件,使 `ComponentExample` 能够动态加载它们。 :: ### 基本用法 在您的 Markdown 文档中使用 `::component-example` 指令： ```mdc [md] :component-example{name="ButtonExample"} ``` ### 高级配置 ```mdc [md] ::component-example --- name: AccordionExample highlights: [10, 15, 20] collapse: true --- :: ``` ## API ### Props ::component-props :: ### Slots ::component-slots :: # Accordion ## 用法 使用 `:component-example` 指令可以轻松创建可交互的组件示例。该指令会自动生成组件预览、源代码展示，并支持代码高亮和折叠功能。 ::code-preview :::component-example --- collapse: true highlights: - 3 - 7 options: - name: type label: type items: - multiple - single default: single - name: trailingIcon label: trailingIcon default: i-lucide:arrow-down props: class: p-4 defaultValue: "1" name: AccordionExample --- ::: #code ```mdc :::component-example --- name: AccordionExample highlights: [3, 7] collapse: true options: - name: 'type' label: 'type' items: - 'multiple' - 'single' default: 'single' - name: 'trailingIcon' label: 'trailingIcon' default: 'i-lucide:arrow-down' props: class: 'p-4' defaultValue: '1' --- ::: ``` :: # API ## 用法 在您的 Markdown 文档中，使用以下语法来生成不同类型的 API 文档： ::code-preview :::div{.flex.flex-col.w-full} ### Props ::::component-props{slug="Api"} :::: ### Slots ::::component-slots{slug="Api"} :::: ### Emits ::::component-emits{slug="Api"} :::: ::: #code ```mdc ### Props :component-props{slug=Api} ### Slots :component-slots{slug=Api} ### Emits :component-emits{slug=Api} ``` ::