268 lines
4.8 KiB
Markdown
268 lines
4.8 KiB
Markdown
# 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 订阅
|
||
|
||
## <20> 部署指南
|
||
|
||
### 静态部署 (推荐)
|
||
|
||
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
|
||
```
|
||
|
||
## <20>🛠 技术栈
|
||
|
||
- [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
|