Movk Nuxt Docs

Markdown 组件

View source

使用 Nuxt UI Prose 组件（Accordion、Badge、Callout 等）丰富 Markdown 内容。

Prose 组件是标准 HTML 排版标签的替代品，在 Markdown 中提供自定义 UI。

Movk Nuxt Docs 和 Nuxt UI 提供设计精美的 Prose 组件，支持 MDC 语法。

本页仅列举适合文档的 Prose 组件。所有 Nuxt UI 组件均可在 Markdown 中使用。完整组件列表请查看 Nuxt UI 文档。

`Accordion`

使用 accordion 和 accordion-item 组件在您的内容中嵌入一个 Accordion。

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

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 组件，将它们分组在一起以获得网格布局。

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` 和 `FieldGroup`

field 是一个在内容中显示的属性或参数。您可以通过 field-group 将它们分组在列表中。

analytics

boolean

Default to false - Enables analytics for your project (coming soon).

blob

boolean

Default to false - Enables blob storage to store static assets, such as images, videos and more.

cache

boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database

boolean

Default to false - Enables SQL database to store your application's data.

::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 属性来定义哪个标题将用于步骤。

Start a fresh new project

Terminal

npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template

Run your dev server

Terminal

pnpm run dev

::steps{level="4"}
  #### 启动一个全新项目
  
  ```bash [Terminal]
  npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
  ```
  
  #### 启动您的开发服务器
  
  ```bash [Terminal]
  pnpm run dev
  ```
::

代码块

使用语法高亮、文件名显示和代码分组展示代码。

图片与嵌入

学习如何使用标准 Markdown 语法和 Nuxt 特性在您的文档中无缝添加和展示图片、视频等嵌入式媒体内容。