基础要点
Markdown 组件
使用 Markdown 组件借助 Nuxt UI 来结构化您的内容。
Prose 组件是 HTML 排版标签的替代品。它们提供了一种在使用 Markdown 时自定义 UI 的简单方式。
TockDocs 和 Nuxt UI 提供了一套样式美观的 prose 组件，帮助您使用 MDC 语法编写文档。
Accordion（手风琴）
使用 accordion 和 accordion-item 组件在内容中显示手风琴。
TockDocs 是一个基于 Nuxt UI 构建的全集成文档解决方案。它是一个基于 UI 文档模板的主题，提供即用型视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
开始 TockDocs 项目所需的只是一个
content/ 文件夹。您可以查看起步模板以快速入门。Nuxt UI 是一系列优质 Vue 组件、组合式函数和工具的集合。
::accordion
:::accordion-item{label="什么是 TockDocs，它的主要功能是什么？" icon="i-lucide-circle-help"}
TockDocs 是一个基于 Nuxt UI 构建的全集成文档解决方案。它是一个基于 UI 文档模板的主题，提供即用型视觉效果。用户可以专注于使用 Markdown 和 MDC 语法编写内容。
:::
:::accordion-item{label="如何开始使用 TockDocs？" icon="i-lucide-circle-help"}
开始 TockDocs 项目所需的只是一个 `content/` 文件夹。您可以查看起步模板以快速入门。
:::
:::accordion-item{label="什么是 Nuxt UI？" icon="i-lucide-circle-help"}
[Nuxt UI](https://ui.nuxt.com/) 是一系列优质 Vue 组件、组合式函数和工具的集合。
:::
::
Badge（徽章）
在 badge 组件的默认插槽中使用 Markdown，在内容中显示徽章。
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-group 组件包裹您的 card 组件，将它们以网格布局分组。
:::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 组件包裹您的内容，在内容中显示可折叠区域。
| 属性 | 默认值 | 类型 |
|---|---|---|
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{name="i-simple-icons-nuxtdotjs"}
Kbd（键盘按键）
使用 kbd 组件在内容中显示键盘按键。
:kbd{value="meta"} :kbd{value="K"}
Tabs（标签页）
使用 tabs 和 tabs-item 组件在内容中显示标签页。
::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:taowang1993/tockdocs
启动 Nuxt 开发服务器
Terminal
npm run dev
::steps{level="4"}
#### 创建一个全新的项目
```bash [Terminal]
npm create nuxt@latest -- -t github:taowang1993/tockdocs
```
#### 启动 Nuxt 开发服务器
```bash [Terminal]
npm run dev
```
::