内容专业版

Nuxt UI Pro 通过精美的组件和样式增强了 Nuxt Content。
Nuxt UI Pro v3 仅与 Nuxt Content v3 兼容。如果您正在使用 Nuxt Content v2，则必须使用 Nuxt UI Pro v1。

安装

要开始使用，您可以遵循官方指南或简而言之

pnpm add @nuxt/content

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui-pro',
    '@nuxt/content'
  ],
  css: ['~/assets/css/main.css']
})
您需要在 modules 数组中，在 @nuxt/ui-pro 之后注册 @nuxt/content，否则 prose 组件将不可用。
如果您的内容包含 Tailwind CSS 类，请务必在您的 CSS 文件中使用 @source 指令。

组件

您可能正在使用 @nuxt/content 来构建文档。为了帮助您，我们构建了一些您可以在页面中使用的组件

排版

为了充分利用 @nuxt/content，我们在 v3 中改造了我们的排版系统。与 v1 中使用 @tailwindcss/typography 插件不同，我们现在直接在 Nuxt UI Pro 中提供所有 prose 组件的自定义实现。这使我们能够精确控制样式，同时确保与我们的设计系统完美地视觉协调。

了解更多关于新的排版系统和所有可用的组件。

工具函数

提供了一些工具函数，以便在 @nuxt/content 和 @nuxt/ui-pro 之间架起桥梁

findPageHeadline 已废弃

此工具函数允许您根据页面 .navigation 在 PageHeader 中绑定一个 headline。

pages/[...slug].vue
<script setup lang="ts">
import { findPageHeadline } from '@nuxt/ui-pro/utils/content'

const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())

const headline = computed(() => findPageHeadline(page.value))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page" :headline="headline" />
  </UPage>
</template>
需要更新findPageHeadline 现在由 Nuxt Content 提供。请务必相应地更新导入和用法。
  <script setup lang="ts">
- import { findPageHeadline } from '@nuxt/ui-pro/utils/content'
+ import { findPageHeadline } from '@nuxt/content/utils'

  const route = useRoute()

  const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())

  const headline = computed(() => findPageHeadline(page.value))
  </script>

  <template>
    <UPage>
      <UPageHeader v-bind="page" :headline="headline" />
    </UPage>
  </template>

findPageBreadcrumb 已废弃

此工具函数将根据导航递归地查找页面的面包屑，以便您可以在 PageHeader 的 #headline 插槽中使用它。

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

provide('navigation', navigation)
</script>
pages/[...slug].vue
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>
需要更新findPageBreadcrumb 现在由 Nuxt Content 提供。请务必相应地更新导入和用法。
  <script setup lang="ts">
  import type { ContentNavigationItem } from '@nuxt/content'
- import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+ import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+ import { findPageBreadcrumb } from '@nuxt/content/utils'

  const route = useRoute()

  const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

- const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
+ const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link))
  </script>

  <template>
    <UPage>
      <UPageHeader v-bind="page">
        <template #headline>
          <UBreadcrumb :items="breadcrumb" />
        </template>
      </UPageHeader>
    </UPage>
  </template>

mapContentNavigation

此工具函数将映射来自 queryCollectionNavigation 的导航，并将其递归地转换为一个可供各种组件使用的对象数组。

mapContentNavigation(navigation, options?)

  • navigation: 导航树（ContentNavigationItem 数组）。
  • options (可选)
    • labelAttribute: (字符串) 用作标签的字段（默认为 title）
    • deep: (数字或 undefined) 控制包含多少层导航（默认为 undefined：包含所有层级）

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

app.vue
<script setup lang="ts">
import { mapContentNavigation } from '@nuxt/ui-pro/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>

国际化 (i18n)

了解如何使用多方向支持（从左到右/从右到左）来国际化您的 Nuxt 应用程序。

排版

Nuxt UI Pro 提供了精美的排版组件和实用工具来美化您的内容。