Inhoud

Installatie

Om te beginnen kunt u de officiële guide of samenvattend volgen:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

Voeg vervolgens de @nuxt/content-module toe aan uw nuxt.config.ts:

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

Configuration

Wanneer u Tailwind CSS-klassen gebruikt in uw markdown-inhoudsbestanden, moet u ervoor zorgen dat Tailwind de benodigde hulpprogramma-klassen kan detecteren en genereren. Standaard haalt de automatische inhoudsdetectie van Tailwind mogelijk geen klassen op die zijn geschreven in markdown-bestanden.

Om dit op te lossen, gebruikt u de @source directive in uw CSS-bestand om uw inhoudsmap expliciet op te nemen:

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

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

Dit zorgt ervoor dat:

• Tailwind scant alle markdown-bestanden in uw inhoudsmap
• Alle hulpprogramma klassen die worden gebruikt in uw markdown (zoals text-primary) worden opgenomen in de uiteindelijke CSS
• Dynamische klassen in MDC-componenten of aangepaste Vue-componenten binnen uw inhoud werken correct

Componenten

Mogelijk gebruikt u @nuxt/content om een documentatie te bouwen. Om u daarbij te helpen, hebben we enkele componenten gebouwd die u in uw pagina 's kunt gebruiken:

• a ingebouwd full-text zoekcommandopalet met ContentSearch, ter vervanging van de behoefte aan Algolia DocSearch
• a navigatiestructuur met de ContentNavigation component
• a sticky Inhoudsopgave met de ContentToc component
• a vorige / volgende navigatie met de ContentSurround component

Typografie

Nuxt UI biedt zijn eigen implementaties van alle prozacomponenten, dus markdown gerenderd door @nuxt/content pikt hetzelfde thema op als de rest van uw componenten.

Utils

Nuxt UI verzendt helpers om de door @nuxt/content geretourneerde gegevens om te vormen naar het formaat dat de componenten verwachten.

mapContentNavigation

Dit util brengt de navigatie van queryCollectionNavigation in kaart en transformeert deze recursief in een reeks objecten die door verschillende componenten kunnen worden gebruikt.

mapContentNavigation(navigation, options?)

• navigation: De navigatiestructuur (array van ContentNavigationItem).
• options (optioneel):
• labelAttribute: (string) Welk veld te gebruiken als label (standaard title)
• deep: (aantal of ongedefinieerd) Bepaalt hoeveel navigatieniveaus zijn inbegrepen (undefined standaard, omvat alle niveaus)

**Voorbeeld: ** Zoals weergegeven in het onderstaande breadcrumb-voorbeeld, wordt het vaak gebruikt om de navigatiegegevens in het juiste formaat om te zetten.

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