contentas

@@pH000@@instalación

Para empezar, puede seguir el oficial guide o en resumen:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

A continuación, agregue el módulo @nuxt/content en su nuxt.config.ts:

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

Configuración

Al utilizar las clases CSS de Tailwind en sus archivos de contenido de marcado, debe asegurarse de que Tailwind pueda detectar y generar las clases de utilidad necesarias. De forma predeterminada, la detección automática de contenido de Tailwind puede no recoger las clases escritas en archivos de marcado.

Para solucionar este problema, utilice la directiva[@source en su archivo CSS para incluir explícitamente su directorio de contenido:

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

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

Esto garantiza que:

• Tailwind escanea todos los archivos de marcado en su directorio de contenido
• Cualquier clase de utilidad utilizada en su remarcado (como text-primary) se incluye en el CSS final
• Las clases dinámicas en componentes MDC o componentes personalizados de Vue dentro de su contenido funcionan correctamente

@@501@@Componentes

Puede que estés usando @nuxt/content para crear una documentación.Para ayudarte con eso, hemos creado algunos componentes que puedes usar en tus páginas:

• una paleta de comandos de búsqueda de texto completo integrada con ContentSearch, reemplazando la necesidad de Algolia DocSearch
• un árbol de navegación con el componente ContentNavigation
• una tabla de contenido adhesiva con el componente ContentToc
• una navegación anterior/siguiente con el componente ContentSurround

Tipografía

Nuxt UI proporciona sus propias implementaciones de todos los componentes de la prosa, por lo que el markdown renderizado por @nuxt/content recoge el mismo tema que el resto de sus componentes.

@777@777@777

La interfaz de usuario de Nuxt envía ayudantes para remodelar los datos devueltos por @nuxt/content en el formato que sus componentes esperan.

@@pH080 @

Esta herramienta mapeará la navegación desde queryCollectionNavigation y la transformará recursivamente en una matriz de objetos que pueden ser utilizados por varios componentes.

@@2008 @

• navigation: El árbol de navegación (matriz de ContentNavigationItem).
• options(opcional):
  • labelAttribute:(cadena) Qué campo usar como etiqueta (title por defecto)
  • deep:(número o indefinido) Controla cuántos niveles de navegación se incluyen (undefined por defecto, incluye todos los niveles)

Ejemplo: Como se muestra en el ejemplo de migaja de pan a continuación, se utiliza comúnmente para transformar los datos de navegación en el formato correcto.

<script setup lang="ts">
import { mapContentNavigation } from '@nuxt/ui/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'

const route = useRoute()

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

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

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