内容
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/content 注册在 @nuxt/ui 之后，否则散文组件将不可用。配置
当在 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 组件的粘性目录
- 一个带有 ContentSurround 组件的上一个/下一个导航
排版
Nuxt UI 提供其所有散文组件的自定义实现，以与 @nuxt/content 无缝集成。这种方法确保了一致的样式、对排版的完全控制以及与 Nuxt UI 设计系统的完美对齐，因此您的内容开箱即用，始终看起来和感觉都保持一致。
工具
mapContentNavigation
此工具将映射 queryCollectionNavigation 中的导航，并将其递归转换为一个对象数组，可供各种组件使用。
mapContentNavigation(navigation, options?)
navigation：导航树（ContentNavigationItem 数组）。options（可选）labelAttribute：（字符串）用作标签的字段（默认为title）deep：（数字或 undefined）控制包含多少层导航（默认为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>