content
使用 content/ 目錄為您的應用程式建立基於檔案的 CMS。
Nuxt Content 會讀取您專案中的 content/ 目錄，並解析 .md、.yml、.csv 和 .json 檔案，以為您的應用程式建立基於檔案的 CMS。
- 使用內建元件渲染您的內容。
- 使用類似 MongoDB 的 API 查詢您的內容。
- 在 Markdown 檔案中使用 MDC 語法搭配您的 Vue 元件。
- 自動產生您的導航。
啟用 Nuxt Content
在您的專案中安裝 @nuxt/content 模組，並透過一個指令將其新增至您的 nuxt.config.ts
終端機
npx nuxi module add content
建立內容
將您的 markdown 檔案放置在 content/ 目錄中
content/index.md
# Hello Content
模組會自動載入並解析它們。
渲染內容
若要渲染內容頁面，請使用 catch-all 路由，並搭配 <ContentRenderer> 元件
pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('content').path(route.path).first()
})
</script>
<template>
<div>
<header><!-- ... --></header>
<ContentRenderer v-if="page" :value="page" />
<footer><!-- ... --></footer>
</div>
</template>
文件
前往 https://content.nuxt.com 了解更多關於 Content 模組功能的資訊，例如如何建立查詢以及在 Markdown 檔案中使用 MDC 語法搭配 Vue 元件。