使用 Content v2 设置 Nuxt v3（Markdown 页面）

使用 Nuxt v3 创建博客

安装插件

如果您尚未创建 nuxt 项目（它将安装必要的包和配置）：

npx nuxi init [name] -t content
cd [name]
npm install

如果已经安装郭了nuxt，则直接在项目中安装"@nuxt/content":

npm install --save-dev @nuxt/content

配置

编辑nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
    highlight: {
      theme: 'github-light',
      preload: ['python', 'kotlin', 'java', 'javascript', 'json', 'bash']
    }
  }
})

创建 Markdown 内容

创建 content/about.md,内容为markdown文本就行，例如：

# About Us
Tell me a story

创建content/post/hello-again.md ```

title: 'Hello Again' description: '' date: 2022-01-02

Why are you here again?

## 页面

编辑`app.vue`

```

创建pages/index.vue

<script setup>
const query = { 
  path: '/posts', 
  only: ['title', 'description', 'date'],
  sort: { date: -1} 
}
</script>
<template>
  <div>
    <h1>Navigate</h1>
    <NuxtLink to="/about">About</NuxtLink>
    <h1>Posts</h1>
    <ContentList :query="query" >
      <template v-slot="{ list }">
        <div v-for="article in list" :key="article._path">
          <h3><NuxtLink :to="article._path">{{ article.title }}</NuxtLink></h3>
          <p>[{{ new Date(article.date) }}] {{ article.description }}</p>
        </div>
      </template>
      <template #not-found>
        <p>No post found.</p>
      </template>
    </ContentList>
  </div>
</div>

创建pages/[...slug].vue

<template>
  <main>
    <ContentDoc />
  </main>
</template>

至此已经完成了。