내용 (Content)

설치

시작하려면 공식 guide 또는 요약으로 다음과 같이 할 수 있습니다.

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

그런 다음 @nuxt/content 모듈을 nuxt.config.ts 에 추가합니다.

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

구성

Markdown 콘텐츠 파일에서 Tailwind CSS 클래스를 사용할 때 Tailwind가 필요한 유틸리티 클래스를 감지하고 생성할 수 있는지 확인해야 합니다. 기본적으로 Tailwind의 자동 콘텐츠 감지는 markdown 파일에 작성된 클래스를 선택하지 못할 수도 있습니다.

이 문제를 해결하려면 CSS 파일에 @sourcedirect를 사용하여 콘텐츠 디렉토리를 명시적으로 포함합니다.

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

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

이렇게 하면 다음과 같은 이점이 있습니다.

• Tailwind는 콘텐츠 디렉토리에있는 모든 Markdown 파일을 스캔합니다.
• 마크다운에 사용되는 모든 유틸리티 클래스(text-primary 같은)는 최종 CSS에 포함됩니다.
• MDC 컴포넌트 또는 콘텐츠 내 사용자 정의 Vue 컴포넌트의 동적 클래스가 제대로 작동합니다.

구성 요소

@nuxt/content를 사용하여 문서를 작성할 수 있습니다. 이를 돕기 위해 페이지에서 사용할 수 있는 몇 가지 구성 요소를 만들었습니다.

• 전체 텍스트 검색 명령 팔레트 ContentSearch , Algolia DocSearch 대신 사용
• a navigationContentNavigation 구성요소가 있는 탐색 트리
• a sticky Table of Contents with the ContentToc 구성 요소가 있는 스티커 카탈로그
• a prev/다음 탐색 ContentSurround 구성 요소

타이포그래피

Nuxt UI는 모든 산문 컴포넌트의 자체 구현을 제공하므로 @nuxt/content로 렌더링된 markdown은 나머지 컴포넌트와 동일한 테마를 선택합니다.

Utils @ 우틸스

Nuxt UI는 헬퍼를 제공하여 @nuxt/content가 반환한 데이터를 구성 요소가 예상하는 형식으로 재구성합니다.

mapContentNavigation @

이 유틸리티는 queryCollectionNavigation에서 탐색을 매핑하고 다양한 구성 요소에서 사용할 수있는 객체 배열로 재귀적으로 변환합니다.

mapContentNavigation(navigation, options?)

• navigation : 탐색 트리(ContentNavigationItem 배열).
• options (선택 사항):
  • labelAttribute``labelAttribute (문자열) 레이블로 사용할 필드 (title 기본값)
  • deep``deep (숫자 또는 정의되지 않음) 포함된 탐색 수준 제어(undefined 기본적으로 모든 수준 포함)

**예:**예: ** 아래 breadcrumb 예제에서 볼 수 있듯이 탐색 데이터를 올바른 형식으로 변환하는 데 일반적으로 사용됩니다.

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