content

content/ 디렉터리를 사용하여 응용 프로그램에 대한 파일 기반 CMS를 만듭니다.

 

Nuxt Content 는 프로젝트의 content/ 디렉토리를 읽고 , .md, .yml, .csv 및 .json 파일을 사용하여 애플리케이션용 파일 기반 CMS를 만다.

• 내장된 구성요소를 사용하여 콘텐츠를 렌더링한다.
• MongoDB와 유사한 API를 사용하여 콘텐츠를 쿼리한다.
• MDC 구문을 사용하여 Markdown 파일의 Vue 구성 요소를 사용한다.
• 네비게이션을 자동으로 생성한다.

Nuxt 콘텐츠 활성화

프로젝트에 @nuxt/content 모듈을 설치하고 다음 명령을 사용하여 nuxt.config.ts 에 추가한다.

# 터미널

npx nuxi module add content

 

 

 

 

 

 

콘텐츠 만들기

마크다운 파일을 content/ 디렉토리에 넣는다.

<!-- content/index.md -->

# Hello Content

모듈은 이를 자동 로드하고 구문 분석한다.

 

콘텐츠 렌더링

콘텐츠 페이지를 렌더링하려면 <ContentDoc> 컴포넌트를 사용하여 catch-all 라우트(예: [...slug].vue) 를 추가한다.

<!--
pages/[...slug].vue
-->

<template>
  <main>
    <!-- ContentDoc returns content for `$route.path` by default or you can pass a `path` prop -->
    <ContentDoc />
  </main>
</template>

쿼리 작성 방법과 같은 콘텐츠 모듈 기능에 대해 자세히 알아보려면 https://content.nuxt.com 에서 살펴보자. MDC 구문을 사용하여 Markdown 파일의 Vue 구성 요소를 사용할 수 있다.