基础知识
Markdown 组件
借助 Nuxt UI，使用 Markdown 组件帮助你组织内容。
Prose 组件是 HTML 排版标签的替代品。当你使用 Markdown 时，它们提供了一种简单的方式来定制你的界面。
Docus 和 Nuxt UI 提供了一套经过样式美化、外观精美的 Prose 组件，帮助你使用 MDC 语法 编写文档。
Accordion（手风琴）
使用 accordion 和 accordion-item 组件在内容中显示一个 Accordion（手风琴）。
Docus 是基于 Nuxt UI 构建的完整文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
启动一个 Docus 项目，你只需要一个
content/ 文件夹。你可以查看快速启动模板以快速上手。Nuxt UI 是一套高质量的 Vue 组件、组合函数和工具集。
::accordion
:::accordion-item{label="什么是 Docus？它有哪些核心功能？" icon="i-lucide-circle-help"}
Docus 是基于 Nuxt UI 构建的完整文档解决方案。它是一个基于 UI 文档模板的主题，提供开箱即用的视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
:::
:::accordion-item{label="如何开始使用 Docus？" icon="i-lucide-circle-help"}
启动一个 Docus 项目，你只需要一个 `content/` 文件夹。你可以查看快速启动模板以快速上手。
:::
:::accordion-item{label="什么是 Nuxt UI？" icon="i-lucide-circle-help"}
[Nuxt UI](https://ui.nuxt.com/) 是一套高质量的 Vue 组件、组合函数和工具集。
:::
::
Badge（徽章）
在 badge 组件的默认插槽中使用 Markdown，以在内容中显示一个 Badge（徽章）。
v3.0.0
::badge
**v3.0.0**
::
Callout（提示框）
在 callout 组件的默认插槽中使用 Markdown，为内容添加醒目的上下文提示。
使用 icon 和 color 属性进行自定义。你也可以传递 <NuxtLink> 组件的任意属性。
此外，你还可以使用预设了图标和颜色的快捷方式：note、tip、warning 和 caution。
这里有一些额外信息供你参考。
这里有一条实用建议。
请谨慎执行此操作，因为它可能导致意外结果。
此操作无法撤销。
::note
这里有一些额外信息。
::
::tip
这里有一条实用建议。
::
::warning
请谨慎执行此操作，因为它可能导致意外结果。
::
::caution
此操作无法撤销。
::
Card（卡片）和 CardGroup（卡片组）
在 card 组件的默认插槽中使用 Markdown，以突出显示你的内容。
使用 title、icon 和 color 属性进行自定义。你也可以传递 <NuxtLink> 的任意属性。
将多个 card 组件包裹在 card-group 组件中，即可在网格布局中将它们分组展示。
::card-group
:::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
一个多列布局的仪表盘。
:::
:::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/saas
target: _blank
---
包含首页、定价、文档和博客的模板。
:::
:::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/docs
target: _blank
---
使用 `@nuxt/content` 构建的文档站点。
:::
:::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/landing
target: _blank
---
可作为起点的落地页模板。
:::
::
Collapsible（可折叠区域）
使用 collapsible 组件包裹你的内容，以在文档中显示一个 Collapsible（可折叠区域）。
| 属性 | 默认值 | 类型 |
|---|---|---|
name | string | |
size | md | string |
color | neutral | string |
::collapsible
| 属性 | 默认值 | 类型 |
| ------- | --------- | ------------------------ |
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::
Field（字段）和 FieldGroup（字段组）
field 用于在内容中展示某个属性或参数。你可以通过 field-group 将多个字段以列表形式分组。
analytics
boolean
默认为
false —— 为你的项目启用分析功能（即将推出）。blob
boolean
默认为
false —— 启用 Blob 存储，用于保存静态资源，如图片、视频等。cache
boolean
默认为
false —— 启用缓存存储，使用 Nitro 的 cachedEventHandler 和 cachedFunction 缓存服务器路由响应或函数。database
boolean
默认为
false —— 启用 SQL 数据库，用于存储应用程序数据。::field-group
:::field{name="analytics" type="boolean"}
默认为 `false` —— 为你的项目启用分析功能（即将推出）。
:::
:::field{name="blob" type="boolean"}
默认为 `false` —— 启用 Blob 存储，用于保存静态资源，如图片、视频等。
:::
:::field{name="cache" type="boolean"}
默认为 `false` —— 启用缓存存储，使用 Nitro 的 `cachedEventHandler` 和 `cachedFunction` 缓存服务器路由响应或函数。
:::
:::field{name="database" type="boolean"}
默认为 `false` —— 启用 SQL 数据库，用于存储应用程序数据。
:::
::
Icon（图标）
使用 icon 组件在内容中显示一个 Icon（图标）。
:icon{name="i-simple-icons-nuxtdotjs"}
Kbd（键盘按键）
使用 kbd 组件在内容中显示一个 Kbd（键盘按键）。
:kbd{value="meta"} :kbd{value="K"}
Tabs（标签页）
使用 tabs 和 tabs-item 组件在内容中显示 Tabs（标签页）。
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="代码"}
```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```
::::
::::tabs-item{icon="i-lucide-eye" label="预览"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
::::
:::
::
Steps（步骤）
使用 Steps 组件包裹你的标题，以展示一系列步骤。
使用 level 属性指定用于步骤的标题层级。
创建一个全新的项目
Terminal
npm create nuxt@latest -- -t github:nuxt-content/docus
运行 docus CLI 启动开发服务器
Terminal
docus dev
::steps{level="4"}
#### 创建一个全新的项目
```bash [Terminal]
npm create nuxt@latest -- -t github:nuxt-content/docus
```
#### 运行 docus CLI 启动开发服务器
```bash [Terminal]
docus dev
```
::