nuxt如何通过 content目录新增md文件来新增html

在 Nuxt Content 模块中，你可以通过 content/ 目录 新增 .md 文件，Nuxt 会自动生成对应的 HTML 页面。以下是详细步骤：

---

1. 安装 Nuxt Content 模块

如果你还没有安装 @nuxt/content，请先安装：

npm install @nuxt/content

然后，在 nuxt.config.ts 中启用：

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

---

2. 在 content/ 目录中新增 Markdown 文件

Nuxt Content 会自动读取 content/ 目录中的 .md 文件，并生成对应的 HTML 页面。

示例：创建 content/blog/my-first-post.md

---
title: "My First Post"
description: "This is an example of a blog post using Nuxt Content"
date: "2025-03-04"
---

# Welcome to My First Post

This is a sample post in Nuxt Content.

- Supports **Markdown**
- Automatically generates **HTML pages**
- Provides **SEO-friendly URLs**

---

3. 创建动态页面来显示 Markdown 内容

在 pages/blog/[slug].vue（Nuxt 3 使用 .vue，Nuxt 2 用 .js） 中，添加以下代码：

<script setup>
import { useRoute } from 'vue-router';
import { useAsyncData } from '#app';
import { queryContent } from '#content';

const route = useRoute();
const { data: post } = await useAsyncData(`content-${route.params.slug}`, () =>
  queryContent('blog', route.params.slug).findOne()
);
</script>

<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
    <nuxt-content :document="post" />
  </div>
</template>

---

4. 访问生成的 HTML 页面

如果你创建了 content/blog/my-first-post.md，那么可以在浏览器访问：

http://localhost:3000/blog/my-first-post

Nuxt 会自动解析 Markdown，并生成 HTML。

---

5. (可选) 添加自动生成的博客首页

在 pages/blog/index.vue，列出所有 Markdown 文章：

<script setup>
import { useAsyncData } from '#app';
import { queryContent } from '#content';

const { data: posts } = await useAsyncData('blog-list', () =>
  queryContent('blog').find()
);
</script>

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="post in posts" :key="post._path">
        <nuxt-link :to="post._path">{{ post.title }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>

这将列出所有 Markdown 文章，并生成链接到对应的页面。

---

6. Nuxt Content 自动生成 HTML

Nuxt 会自动：
✅ 解析 Markdown 并转换为 HTML
✅ 支持 SEO 友好的 URL（如 /blog/my-first-post）
✅ 支持动态路由，无需手动创建 HTML 文件

如果你部署到 Nuxt Static Hosting，它也会自动生成静态 HTML。

---

总结

1️⃣ 新增 .md 文件 在 content/ 目录（如 content/blog/my-first-post.md）。
2️⃣ 创建 [slug].vue 动态路由 解析 Markdown 文件并显示 HTML。
3️⃣ 访问 /blog/my-first-post，Nuxt 自动转换 Markdown 并渲染 HTML。
4️⃣ 可选：创建 /blog/ 主页，列出所有 Markdown 文章。

这样，你就能在 Nuxt 3 中通过 Markdown 动态生成 HTML 页面，实现类似博客、文档站点等功能！ 🚀