内容

安装

要开始使用，您可以遵循官方指南或简要概述

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

然后，在您的 nuxt.config.ts 中添加 @nuxt/content 模块

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})

配置

在您的 markdown 内容文件中使用 Tailwind CSS 类时，您需要确保 Tailwind 能够检测并生成必要的实用程序类。默认情况下，Tailwind 的自动内容检测可能无法识别 markdown 文件中编写的类。

要解决此问题，请使用@source 指令在您的 CSS 文件中明确包含您的内容目录

@import "tailwindcss";
@import "@nuxt/ui";

@source "../../../content/**/*";

这确保了

• Tailwind 扫描您内容目录中的所有 markdown 文件
• 您的 markdown 中使用的任何实用程序类（例如 text-primary）都包含在最终的 CSS 中
• MDC 组件或内容中自定义 Vue 组件中的动态类正常工作

组件

您可能正在使用 @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：包含所有级别）

示例： 如下面的面包屑示例所示，它通常用于将导航数据转换为正确的格式。

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