content

使用 content/ 目錄為您的應用程式建立基於檔案的 CMS。

Nuxt Content讀取專案中的 content/ 目錄並解析 .md、.yml、.csv 和 .json 檔案，為您的應用程式建立基於檔案的 CMS。

  • 使用內建元件渲染您的內容。
  • 使用類似 MongoDB 的 API 查詢您的內容。
  • 使用 MDC 語法在 Markdown 檔案中使用您的 Vue 元件。
  • 自動生成您的導航。
在 Nuxt Content 文件中瞭解更多資訊。

啟用 Nuxt Content

透過一條命令將 @nuxt/content 模組安裝到您的專案中，並將其新增到您的 nuxt.config.ts

終端
npx nuxt module add content

建立內容

將您的 markdown 檔案放置在 content/ 目錄中

content/index.md
# Hello Content

該模組會自動載入和解析它們。

渲染內容

要渲染內容頁面，請使用<ContentRenderer>元件新增一個捕獲所有路由

app/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瞭解更多關於內容模組的功能，例如如何構建查詢以及如何在 Markdown 檔案中使用 MDC 語法使用 Vue 元件。