Nuxt 内容
在构建登录页面、文档、博客甚至变更日志时，您需要管理内容。您可以通过为每个内容创建一个新页面、从 CMS 获取内容、存储在您自己的数据库中，等等，或者使用 @nuxt/content 模块来使用 Git 管理您的内容。
安装
要开始使用，您可以按照 官方指南 操作，或者简单来说
pnpm i @nuxt/content
然后将模块添加到您的 nuxt.config.ts 文件中
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: [
'@nuxt/content',
'@nuxt/ui'
]
})
@nuxt/ui 之前注册 @nuxt/content，否则 Tailwind CSS 类将不会在您的 .md 和 .yml 文件中解析。现在 @nuxt/content 模块已安装，该层将自动配置语法 highlight 主题（使用 material-theme）并预加载一些语言，因此您无需这样做。
组件
您可能正在使用 @nuxt/content 来构建文档。为了帮助您完成此任务，我们构建了一些您可以在页面中使用的组件
- 使用 ContentSearch 组件开箱即用地获得完整的文本搜索命令面板。无需再设置 Algolia DocSearch 了。
- 使用 ContentToc 组件获得粘性目录。
- 使用 ContentSurround 组件获得上一个/下一个导航。
排版
为了充分利用 @nuxt/content，我们使用 @tailwindcss/typography 插件来为您的内容设置样式。插件的默认设置已被覆盖，以使用来自您 应用程序配置 的 primary 和 gray 颜色，以及许多其他自定义选项，因此它与 Nuxt UI 的设计系统相匹配。
您可以将 <ContentSlot /> 或 <ContentRenderer /> 包裹在 PageBody 组件及其 prose 类中，以自动将 prose prose-primary dark:prose-invert max-w-none 类应用于您的内容，并使其看起来很棒。
为了帮助您编写内容，我们还添加了一些组件，以便使用 MDC 语法 在您的 .md 文件中使用它们，例如 Callout、Card、CodeGroup、Tabs 等等。
实用程序
一些实用程序将被 **自动导入**，以在 @nuxt/content 和 @nuxt/ui-pro 之间架起桥梁
mapContentNavigation
此实用程序将映射来自 fetchContentNavigation 的导航（通常在您的 app.vue 文件中获取），并将其递归地转换为组件（例如 NavigationTree）所期望的对象数组。
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), { default: () => [] })
</script>
<template>
<UHeader>
<template #panel>
<UNavigationTree :links="mapContentNavigation(navigation)" />
</template>
</UHeader>
</template>
findPageHeadline
此实用程序将允许您根据页面的 _dir 在 PageHeader 中绑定 headline。
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
const headline = computed(() => findPageHeadline(page.value))
</script>
<template>
<UPage>
<UPageHeader v-bind="page" :headline="headline" />
</UPage>
</template>
findPageBreadcrumb
此实用程序将根据导航递归地查找页面的面包屑，以便您可以在 PageHeader 的 #headline 插槽中使用它。
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
provide('navigation', navigation)
</script>
<script setup lang="ts">
import type { NavItem } from '@nuxt/content'
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation.value, page.value)))
</script>
<template>
<UPage>
<UPageHeader v-bind="page">
<template #headline>
<UBreadcrumb :links="breadcrumb" />
</template>
</UPageHeader>
</UPage>
</template>
您应该拥有使用 @nuxt/ui-pro 构建应用程序所需的所有信息，现在您可以探索所有可用的组件 🚀