Inhalt

@@ph000@Installation

Um zu beginnen, können Sie dem offiziellen guide oder in Zusammenfassung folgen:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

Fügen Sie dann das @nuxt/content Modul in Ihr nuxt.config.ts hinzu:

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

Konfiguration

Wenn Sie Tailwind-CSS-Klassen in Ihren Markdown-Inhaltsdateien verwenden, müssen Sie sicherstellen, dass Tailwind die erforderlichen Hilfsklassen erkennen und generieren kann. Standardmäßig kann die automatische Inhaltserkennung von Tailwind in Markdown-Dateien geschriebene Klassen nicht aufnehmen.

Um dies zu beheben, verwenden Sie die @source directive in Ihrer CSS-Datei, um Ihr Inhaltsverzeichnis explizit aufzunehmen:

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

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

Dies stellt sicher, dass:

• Tailwind scannt alle Markdown-Dateien in Ihrem Inhaltsverzeichnis
• Alle in Ihrem Markdown verwendeten Hilfsklassen (wie text-primary) sind im endgültigen CSS enthalten
• Dynamische Klassen in MDC-Komponenten oder benutzerdefinierte Vue-Komponenten in Ihrem Inhalt funktionieren ordnungsgemäß

Komponenten

Sie könnten @nuxt/content verwenden, um eine Dokumentation zu erstellen. Um Ihnen dabei zu helfen, haben wir einige Komponenten erstellt, die Sie auf Ihren Seiten verwenden können:

• eine integrierte Volltext-Suchbefehlspalette mit [ContentSearch](](), ersetzt die Notwendigkeit für Algolia DocSearch
• ein Navigationsbaum mit der Komponente ContentNavigation
• ein klebriges Inhaltsverzeichnis mit der ContentToc Komponente
• a prev/next Navigation mit der ContentSurround Komponente

Typografie

Nuxt UI bietet seine eigenen Implementierungen aller Prosa-Komponenten, so dass Markdown, der von @nuxt/content gerendert wird, das gleiche Thema wie der Rest Ihrer Komponenten aufgreift.

Utils

Nuxt UI liefert Helfer aus, um die von @nuxt/content zurückgegebenen Daten in das Format zu bringen, das seine Komponenten erwarten.

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Dieses Util wird die Navigation von queryCollectionNavigation abbilden und rekursiv in ein Array von Objekten umwandeln, die von verschiedenen Komponenten verwendet werden können.

@@@@@@@@@@@@@@@@@@@082

• navigation: Der Navigationsbaum (Array von ContentNavigationItem). options(optional):
  • labelAttribute:(string) Welches Feld als Beschriftung verwenden (title standardmäßig)
  • deep:(Nummer oder undefiniert) Steuert, wie viele Navigationsebenen enthalten sind (undefined standardmäßig, enthält alle Ebenen)

Beispiel: Wie im Breadcrumb-Beispiel unten gezeigt, wird es häufig verwendet, um die Navigationsdaten in das richtige Format zu konvertieren.

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