title: 我的第一篇文章 date: 2025-01-01

你好，Nuxt！

这是我的第一篇文章。

然后在前端页面通过 `queryContent()` 读取：
```vue
<template>
  <ul>
    <li v-for="post in data?.posts" :key="post._path">
      <NuxtLink :to="post._path">{{ post.title }}</NuxtLink>
    </li>
  </ul>
</template>

<script setup>
const { data } = await useAsyncData('blog', () => 
  queryContent('/blog').find()
)
</script>

2. @nuxt/image —— 自动优化图片

安装后，使用 <NuxtImg> 组件替代原生 <img>，即可实现按需缩放、格式转换、懒加载等：

<NuxtImg src="/hero.jpg" format="webp" quality="80" loading="lazy" />

Nuxt 会在构建时生成多种尺寸的优化版本，大幅提升页面加载速度。

3. @sidebase/nuxt-auth —— 快速集成身份认证

通过 npx nuxi module add sidebase/nuxt-auth 安装，简单配置即可添加 GitHub、Google 等社交登录，或邮箱密码认证。所有登录状态、会话管理都是自动处理的。

4. nuxt-graphql-client —— 对接 GraphQL API

让你的 Nuxt 项目直接消费 GraphQL 接口，并提供类型安全的查询组合式函数。

搜索更多模块

访问 https://nuxt.com/modules ，按热度、类型筛选，找到你需要的功能模块。

实战项目：全栈博客应用骨架

结合以上知识，我们可以快速搭建一个博客演示项目。

目录结构

my-nuxt-app/
├── content/
│   └── blog/
│       └── hello.md
├── pages/
│   ├── index.vue       # 首页: 展示文章列表
│   └── blog/
│       └── [slug].vue  # 文章详情动态页
├── server/
│   └── api/
│       └── posts.ts     # 自定义API（可选，与content结合）
└── app.vue

实现首页文章列表

pages/index.vue：

<template>
  <div>
    <h1>我的博客</h1>
    <ul>
      <li v-for="post of data?.pages" :key="post._path">
        <NuxtLink :to="post._path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const { data } = await useAsyncData('home-posts', () =>
  queryContent('/blog').find()
)
</script>

实现文章详情页

pages/blog/[...slug].vue：

<template>
  <article>
    <h1>{{ data?.page?.title }}</h1>
    <ContentRenderer :value="data?.page" />
  </article>
</template>

<script setup lang="ts">
const route = useRoute()
const { data } = await useAsyncData(`post-${route.path}`, () =>
  queryContent(route.path).findOne()
)
</script>