初始化：创建基于 Nuxt Content 的博客项目

.gitignore

@@ -0,0 +1,37 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# System files
+.DS_Store
+Thumbs.db
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Editor directories and files
+.idea
+.vscode/*
+!.vscode/extensions.json
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,67 @@
+# Nuxt Content 博客
+
+这是一个使用 Nuxt 3 和 Nuxt Content 构建的博客系统。
+
+## 功能特点
+
+- 📝 基于 Markdown 的内容管理
+- 🎨 使用 TailwindCSS 构建的响应式设计
+- 🚀 基于 Nuxt 3 的快速渲染
+- 📋 自动生成文章列表
+- 📅 支持文章元数据（标题、描述、日期等）
+
+## 快速开始
+
+### 安装依赖
+
+```bash
+pnpm install
+```
+
+### 启动开发服务器
+
+```bash
+pnpm dev
+```
+
+访问 http://localhost:3000 查看博客。
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+## 添加新文章
+
+在 `content` 目录下创建新的 `.md` 文件。文件需要包含以下格式的头部信息：
+
+```md
+---
+title: 文章标题
+description: 文章描述
+date: YYYY-MM-DD
+---
+
+# 文章内容
+```
+
+## 项目结构
+
+```
+├── content/        # Markdown 文章
+├── components/     # Vue 组件
+├── layouts/        # 页面布局
+├── pages/         # 页面路由
+└── public/        # 静态资源
+```
+
+## 技术栈
+
+- [Nuxt 3](https://nuxt.com/)
+- [Nuxt Content](https://content.nuxt.com/)
+- [TailwindCSS](https://tailwindcss.com/)
+
+## 许可证
+
+MIT

content/welcome.md

@@ -0,0 +1,32 @@
+---
+title: 欢迎来到我的博客
+description: 这是我的第一篇博客文章
+date: 2025-07-22
+---
+
+# 欢迎来到我的博客
+
+这是使用 Nuxt Content 构建的博客系统。你可以使用 Markdown 来编写文章，支持各种格式化功能。
+
+## Markdown 功能展示
+
+### 列表
+- 项目 1
+- 项目 2
+- 项目 3
+
+### 代码块
+```js
+const greeting = "Hello, World!";
+console.log(greeting);
+```
+
+### 引用
+> 这是一个引用文本的示例。
+
+## 下一步
+
+1. 添加更多文章
+2. 自定义样式
+3. 添加标签系统
+4. 实现搜索功能

layouts/default.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="min-h-screen bg-gray-100">
+    <header class="bg-white shadow">
+      <nav class="container mx-auto px-4 py-6">
+        <NuxtLink to="/" class="text-2xl font-bold text-gray-800">我的博客</NuxtLink>
+      </nav>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+      <slot />
+    </main>
+    <footer class="bg-white shadow mt-8">
+      <div class="container mx-auto px-4 py-6 text-center text-gray-600">
+        © 2025 我的博客. 保留所有权利.
+      </div>
+    </footer>
+  </div>
+</template>

nuxt.config.ts

@@ -0,0 +1,17 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
+  content: {
+    // https://content.nuxtjs.org/api/configuration
+    highlight: {
+      theme: 'github-dark'
+    },
+    markdown: {
+      toc: {
+        depth: 3,
+        searchDepth: 3
+      }
+    }
+  }
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-blog",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxt/content": "^2.12.0",
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/tailwindcss": "^6.11.4",
+    "nuxt": "^3.10.0"
+  }
+}

pages/[...slug].vue

@@ -0,0 +1,11 @@
+<template>
+  <article class="prose lg:prose-xl mx-auto">
+    <ContentDoc />
+  </article>
+</template>
+
+<style>
+.prose {
+  max-width: 65ch;
+  margin: 0 auto;
+}

pages/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1 class="text-4xl font-bold mb-8">最新文章</h1>
+    <div class="grid gap-6">
+      <ContentList path="/" v-slot="{ list }">
+        <div v-for="article in list" :key="article._path" class="bg-white shadow rounded-lg p-6">
+          <NuxtLink :to="article._path">
+            <h2 class="text-2xl font-bold mb-2">{{ article.title }}</h2>
+            <p class="text-gray-600">{{ article.description }}</p>
+            <div class="mt-4 text-sm text-gray-500">
+              {{ new Date(article.date).toLocaleDateString() }}
+            </div>
+          </NuxtLink>
+        </div>
+      </ContentList>
+    </div>
+  </div>
+</template>