基础

Markdown 组件

借助 Nuxt UI 使用 Markdown 组件组织内容。

Prose 组件可以替代 HTML 排版标签。使用 Markdown 时，它们提供了一种简单的 UI 自定义方式。

Docus 和 Nuxt UI 提供了一组样式完善、外观精美的 prose 组件，帮助你使用 MDC 语法编写文档。

本页只突出展示最适合编写文档的 prose 组件。不过，你可以在 Markdown 中使用任意 Nuxt UI 组件。完整可用组件列表请查看 Nuxt UI 文档。

`Accordion`

使用 accordion 和 accordion-item 组件在内容中显示 Accordion。

  ::accordion

  :::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
  Docus is a fully integrated documentation solution built with Nuxt UI. It's a theme based on the UI documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
  :::

  :::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
  The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
  :::

  :::accordion-item{label="What is Nuxt UI?" icon="i-lucide-circle-help"}
  [Nuxt UI](https://ui.nuxt.com/) is a collection of premium Vue components, composables and utils.
  :::
  ::

::: ::

`Badge`

在 badge 组件的默认 slot 中使用 Markdown，可以在内容中显示 Badge。

v3.0.0

::badge
**v3.0.0**
::

`Callout`

在 callout 组件的默认 slot 中使用 Markdown，可以为内容添加醒目的上下文信息。

使用 icon 和 color props 可以自定义它。你也可以传入 <NuxtLink> 组件的任意属性。

你还可以使用 note、tip、warning 和 caution 这些快捷组件，它们带有预定义图标和颜色。

这里有一些额外信息。

这里有一个有用建议。

请谨慎执行此操作，它可能会产生意外结果。

此操作无法撤销。

  ::note
  Here's some additional information.
  ::

  ::tip
  Here's a helpful suggestion.
  ::

  ::warning
  Be careful with this action as it might have unexpected results.
  ::

  ::caution
  This action cannot be undone.
  ::

::: ::

`Card` and `CardGroup`

在 card 组件的默认 slot 中使用 Markdown，可以突出展示内容。

使用 title、icon 和 color props 可以自定义它。你也可以传入 <NuxtLink> 的任意属性。

使用 card-group 包裹多个 card 组件，可以把它们分组成网格布局。

Dashboard

一个多列布局的仪表盘。

SaaS

一个包含着陆页、定价页、文档和博客的模板。

Docs

使用 @nuxt/content 的文档。

Landing

一个可作为起点的着陆页。

  :::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。

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

`Field` and `FieldGroup`

field 用于在内容中展示 prop 或参数。你可以用 field-group 将它们分组成列表。

analytics

boolean

默认为 false - 为项目启用 analytics（即将推出）。

blob

boolean

默认为 false - 启用 blob storage，用于存储图片、视频等静态资源。

cache

boolean

默认为 false - 启用 cache storage，使用 Nitro 的 cachedEventHandler 和 cachedFunction 缓存服务端路由响应或函数。

database

boolean

默认为 false - 启用 SQL 数据库来存储应用数据。

  ::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。

: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.
::

::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 prop 定义哪些层级的标题会被用作步骤。

创建一个全新项目

Terminal

    npm create nuxt@latest -- -t github:nuxt-content/docus
    ```

    #### 运行 docus CLI 启动开发服务器

    ```bash [Terminal]
    docus dev
    ```
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="代码"}
  ````mdc
  ::steps{level="4"}
    #### Start a fresh new project
    
    ```bash [Terminal]
    npm create nuxt@latest -- -t github:nuxt-content/docus
    ```
    
    #### Run docus CLI to run your dev server
    
    ```bash [Terminal]
    docus dev
    ```
  ::

::: ::

代码块

在文档中展示行内代码和代码块。

图片和嵌入

添加图片、视频和其他 HTML 元素