内容
Nuxt UI 与 Nuxt Content 集成，提供精美的排版和统一的组件样式。
安装
要开始使用，您可以遵循官方 指南 或查看以下摘要
pnpm add @nuxt/content
yarn add @nuxt/content
npm install @nuxt/content
bun add @nuxt/content
然后，在您的 nuxt.config.ts 中添加 @nuxt/content 模块
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/ui',
'@nuxt/content'
],
css: ['~/assets/css/main.css']
})
您需要在
modules 数组中的 @nuxt/ui 之后注册 @nuxt/content，否则 Prose 组件将无法使用。配置
在 Markdown 内容文件中使用 Tailwind CSS 类时，需要确保 Tailwind 能够检测并生成必要的工具类。默认情况下，Tailwind 的自动内容检测可能无法识别 Markdown 文件中编写的类。
要解决此问题，请在 CSS 文件中使用 @source 指令 来显式包含您的内容目录
app/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@source "../../../content/**/*";
这可以确保：
- Tailwind 会扫描您内容目录中的所有 Markdown 文件
- Markdown 中使用的任何工具类（如
text-primary）都会被包含在最终的 CSS 中 - MDC 组件或内容中自定义 Vue 组件内的动态类可以正常工作
您还可以使用 glob 模式来更精确地指定要扫描的文件
@source "../../../content/docs/**/*.md"- 仅扫描 docs 文件夹中的 markdown@source "../../../content/**/*.{md,yml}"- 同时包含 markdown 和 YAML 文件
组件
您可能正在使用 @nuxt/content 构建文档。为了帮助您，我们构建了一些可在页面中使用的组件：
- 带有 ContentSearch 的内置全文搜索命令面板，无需再使用 Algolia DocSearch
- 使用 ContentNavigation 组件构建的导航树
- 使用 ContentToc 组件构建的粘性目录（Table of Contents）
- 使用 ContentSurround 组件实现上一篇/下一篇导航
排版
Nuxt UI 提供了其自定义的 Prose 组件实现，以便与 @nuxt/content 无缝集成。这种方法确保了样式的一致性、对排版的完全控制，以及与 Nuxt UI 设计系统的完美契合，使您的内容开箱即用，始终保持协调统一。
工具 (Utils)
mapContentNavigation
此工具将映射来自 queryCollectionNavigation 的导航，并将其递归转换为可供各种组件使用的对象数组。
mapContentNavigation(navigation, options?)
navigation：导航树（ContentNavigationItem 数组）。options(可选)labelAttribute：（字符串）用作标签的字段（默认为title）deep：（数字或未定义）控制包含导航的层级深度（默认为undefined：包含所有层级）
示例： 如下面的面包屑示例所示，它通常用于将导航数据转换为正确的格式。
app.vue
<script setup lang="ts">
import { mapContentNavigation } from '@nuxt/ui/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link), { deep: 0 })
</script>
<template>
<UPage>
<UPageHeader v-bind="page">
<template #headline>
<UBreadcrumb :items="breadcrumb" />
</template>
</UPageHeader>
</UPage>
</template>