内容
Nuxt UI与Nuxt Content集成，提供美观的排版和一致的组件样式。
安装
要开始使用，您可以按照官方guide或摘要：
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 directive来显式包含内容目录：
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构建文档。为了帮助您，我们构建了一些您可以在页面中使用的组件：
- a内置全文搜索命令调色板与ContentSearch，取代了对Algolia DocSearch的需要
- a包含ContentNavigation组件的导航树
- a带有ContentToc组件的粘性目录
- a使用ContentSurround组件的上一页/下一页导航
排版
Nuxt UI提供了自己的所有prose组件的实现，因此@nuxt/content渲染的markdown与其他组件采用相同的主题。
Utils
Nuxt UI提供了帮助程序，可以将@nuxt/content返回的数据整形为组件期望的格式。
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 route = useRoute()
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
const breadcrumb = computed(() => mapContentNavigation(
findPageBreadcrumb(navigation.value, page.value?.path, { indexAsChild: true }),
{ deep: 0 }
).map(({ icon, ...link }) => link))
</script>
<template>
<UPage>
<UPageHeader v-bind="page">
<template #headline>
<UBreadcrumb :items="breadcrumb" />
</template>
</UPageHeader>
</UPage>
</template>