contenu

@@ph000@@installation

Pour commencer, vous pouvez suivre le guide ou en résumé:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

Ensuite, ajoutez le module @nuxt/content dans votre nuxt.config.ts:

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

Configuration

Lorsque vous utilisez les classes CSS Tailwind dans vos fichiers de contenu de markdown, vous devez vous assurer que Tailwind peut détecter et générer les classes utilitaires nécessaires. Par défaut, la détection automatique de contenu de Tailwind peut ne pas détecter les classes écrites dans les fichiers de markdown.

Pour résoudre ce problème, utilisez la directive [@source dans votre fichier CSS pour inclure explicitement votre répertoire de contenu:

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

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

Cela garantit que:

• Tailwind analyse tous les fichiers de markdown dans votre répertoire de contenu
• Toutes les classes utilitaires utilisées dans votre markdown (comme text-primary) sont incluses dans le CSS final Les classes dynamiques dans les composants MDC ou les composants Vue personnalisés dans votre contenu fonctionnent correctement.

Composants

Vous utilisez peut-être @nuxt/content pour créer une documentation. Pour vous aider, nous avons créé quelques composants que vous pouvez utiliser dans vos pages:

• une palette de commandes de recherche en texte intégré avec ContentSearch, remplaçant le besoin d'Algolia DocSearch
• un arbre de navigation avec le composant ContentNavigation
• une table des matières collante avec le composant ContentToc
• une navigation précédente/suivante avec le composant ContentSurround

Typographie

Nuxt UI fournit ses propres implémentations de tous les composants en prose, de sorte que le markdown rendu par @nuxt/content reprend le même thème que le reste de vos composants.

@777@utilitaires

L'interface utilisateur Nuxt fournit des assistants pour remodeler les données renvoyées par @nuxt/content dans le format attendu par ses composants.

@@ph079 @

Cet outil va cartographier la navigation depuis queryCollectionNavigation et la transformer récursivement en un tableau d'objets pouvant être utilisé par divers composants.

@@@ 082 @

• navigation: Arbre de navigation (tableau de ContentNavigationItem).
• options(optionnel):
  • labelAttribute:(chaîne de caractères) Quel champ utiliser comme étiquette (title par défaut)
  • deep:(nombre ou non défini) Contrôle le nombre de niveaux de navigation inclus (undefined par défaut, inclut tous les niveaux)

Exemple: Comme le montre l'exemple de fil d'Ariane ci-dessous, il est couramment utilisé pour transformer les données de navigation dans le format correct.

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