内容PRO

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/content 注册在 @nuxt/ui-pro 之后，否则散文组件将不可用。
如果您的内容包含 Tailwind CSS 类，请确保在 CSS 文件中使用 @source 指令。

组件

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

排版

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

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

工具函数

一些工具函数将被自动导入，以连接 @nuxt/content 和 @nuxt/ui-pro

findPageHeadline

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

pages/[...slug].vue
<script setup lang="ts">
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 slot 中使用它。

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>

mapContentNavigation

这个工具函数将映射 queryCollectionNavigation 中的导航并将其递归转换为可供各种组件使用的对象数组。如上面的面包屑示例所示，它常用于将导航数据转换为正确的格式

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

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>

国际化 (i18n)

了解如何通过多方向支持 (LTR/RTL) 国际化您的 Nuxt 应用。

排版

Nuxt UI Pro 提供了美观的排版组件和工具，用于设置您的内容样式。