# Nuxt Content 博客系统

这是一个使用 Nuxt 3 和 Nuxt Content 构建的现代化个人博客系统，支持 Markdown 内容管理，具有清新的设计风格和丰富的功能特性。

## ✨ 功能特点

### 📝 内容管理
- 基于 Markdown 的内容创作
- 支持文章封面图
- 文章标签系统
- 自动生成文章目录
- 代码块语法高亮
- 代码块一键复制功能
- 按日期自动排序文章

### 🎨 界面设计
- 响应式布局，适配多种设备
- 清新现代的设计风格
- 平滑过渡动画效果
- 暗色模式支持（开发中）

### 🚀 核心页面
- 个性化首页展示
- 文章列表页
- 友情链接页
- 关于我页面

### 🛠 技术特性
- 基于 Nuxt 3 的快速渲染
- TailwindCSS 的原子化 CSS
- 支持 Vue 组件在 Markdown 中使用
- TypeScript 支持

## 🚀 快速开始

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

访问 http://localhost:3000 查看博客。

### 构建生产版本

```bash
pnpm build
```

## 📝 创建文章

在 `content` 目录下创建新的 `.md` 文件。文件需要包含以下格式的头部信息：

```md
---
title: 文章标题
description: 文章描述
date: YYYY-MM-DD
tags: ['标签1', '标签2']
cover: '封面图片URL'  # 可选
---

# 文章内容
```

## 📁 项目结构

```
├── content/        # Markdown 文章
│   └── posts/     # 博客文章
├── components/     # Vue 组件
├── layouts/       # 页面布局
├── pages/         # 页面路由
│   ├── index.vue  # 首页
│   ├── articles.vue  # 文章列表
│   ├── friends.vue   # 友链页面
│   └── about.vue     # 关于页面
├── public/        # 静态资源
└── assets/        # 样式和资源文件
```

## 🔧 自定义配置

### 修改个人信息
1. 替换 `public/avatar.jpg` 更换头像
2. 编辑 `pages/about.vue` 更新个人介绍
3. 在 `pages/friends.vue` 中修改友链信息

### 自定义主题
- 在 `tailwind.config.js` 中修改主题配置
- 编辑 `layouts/default.vue` 调整全局样式

## 🔮 即将推出的功能

- [ ] 文章评论系统
- [ ] 全文搜索功能
- [ ] 文章目录导航
- [ ] 暗色模式
- [ ] SEO 优化
- [ ] RSS 订阅

## � 部署指南

### 静态部署 (推荐)

1. 构建静态文件：

```bash
# 生成静态文件
pnpm generate
```

生成的静态文件将位于 `.output/public` 目录中。

2. 将生成的文件部署到任意静态托管服务：

- GitHub Pages
- Netlify
- Vercel
- 自有服务器

#### Nginx配置示例

```nginx
server {
    listen 80;
    server_name yourdomain.com;
    root /path/to/your/blog/.output/public;
    index index.html;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 缓存静态资源
    location /assets {
        expires 7d;
        add_header Cache-Control "public, no-transform";
    }
}
```

### Node.js 服务器部署

1. 构建项目：

```bash
pnpm build
```

2. 在服务器上启动：

```bash
# 使用 PM2 启动（推荐）
pm2 start .output/server/index.mjs --name "blog"

# 或直接启动
node .output/server/index.mjs
```

#### PM2 配置示例 (ecosystem.config.js)

```javascript
module.exports = {
  apps: [{
    name: 'blog',
    script: '.output/server/index.mjs',
    instances: 'max',
    exec_mode: 'cluster',
    env: {
      PORT: 3000,
      NODE_ENV: 'production'
    }
  }]
}
```

### Docker 部署

1. 创建 Dockerfile：

```dockerfile
FROM node:18-alpine

WORKDIR /app

# 安装 pnpm
RUN npm install -g pnpm

# 复制项目文件
COPY . .

# 安装依赖并构建
RUN pnpm install
RUN pnpm build

# 暴露端口
EXPOSE 3000

# 启动服务
CMD ["node", ".output/server/index.mjs"]
```

2. 构建并运行容器：

```bash
# 构建镜像
docker build -t nuxt-blog .

# 运行容器
docker run -d -p 3000:3000 nuxt-blog
```

### Docker Compose 部署

创建 `docker-compose.yml`：

```yaml
version: '3'

services:
  blog:
    build: .
    ports:
      - "3000:3000"
    restart: always
    environment:
      - NODE_ENV=production
```

启动服务：

```bash
docker-compose up -d
```

## �🛠 技术栈

- [Nuxt 3](https://nuxt.com/)
- [Nuxt Content](https://content.nuxt.com/)
- [TailwindCSS](https://tailwindcss.com/)
- [Vue 3](https://vuejs.org/)
- [TypeScript](https://www.typescriptlang.org/)

## 📝 许可证

MIT

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本项目
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的修改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request