RhenCloud's Blog

一个基于 Nuxt 3 + Vue 3 + Tailwind CSS 构建的现代化技术博客平台。

✨ 特性

• 🚀 高性能 - 基于 Nuxt 4，支持 SSR/SSG
• 🎨 现代化设计 - Tailwind CSS + 深色模式支持
• 📝 内容管理 - 使用 Nuxt Content 管理 Markdown 文章
• 🔍 搜索功能 - 集成 Fuse.js 实现模糊搜索
• 📱 响应式设计 - 完美适配各种设备
• 🌐 SEO 优化 - 完整的 meta 标签、sitemap、RSS 支持
• 💬 评论系统 - 集成 Twikoo 评论服务
• 🎯 分类/标签 - 灵活的文章分类与标签系统
• 📊 统计分析 - 支持 Umami 分析
• 🎭 主题切换 - 自动亮/暗色主题切换

📂 项目结构

.
├── app/                          # 应用根目录
│   ├── assets/                   # 静态资源
│   │   ├── css/                  # 样式文件
│   │   └── images/               # 图片资源
│   ├── components/               # Vue 组件
│   │   ├── archive/              # 归档相关组件
│   │   ├── posts/                 # 博客相关组件
│   │   ├── category/             # 分类相关组件
│   │   ├── content/              # 内容组件
│   │   └── main/                 # 主要组件
│   ├── config/                   # 配置文件
│   ├── data/                     # 数据文件
│   ├── layouts/                  # 布局组件
│   ├── pages/                    # 页面路由
│   │   ├── archive/              # 归档页面
│   │   ├── posts/                # 博客列表页面
│   │   ├── categories/           # 分类页面
│   │   ├── tags/                 # 标签页面
│   │   └── about.vue             # 关于页面
│   ├── plugins/                  # 插件
│   ├── types/                    # TypeScript 类型定义
│   ├── utils/                    # 工具函数
│   ├── app.config.ts             # 应用配置
│   ├── app.vue                   # 根组件
│   └── router.options.ts         # 路由配置
├── content/                      # 文章内容
│   ├── about.md                  # 关于页内容
│   └── posts/                    # 博客文章目录
├── public/                       # 公共资源
├── server/                       # 服务端代码
│   └── api/                      # API 路由
├── nuxt.config.ts                # Nuxt 配置
├── tailwind.config.js            # Tailwind 配置
├── tsconfig.json                 # TypeScript 配置
├── content.config.ts             # Content 配置
└── package.json                  # 依赖管理

🛠 技术栈

核心框架

• Nuxt 4.2.2 - Vue 3 框架
• Vue 3.5.26 - 前端框架
• TypeScript 5.9.3 - 类型安全

样式与 UI

• Tailwind CSS 4.1.18 - 原子化 CSS 框架
• @tailwindcss/typography - 排版样式
• @tailwindcss/forms - 表单样式
• @nuxt/ui - UI 组件库

内容与 SEO

• @nuxt/content 3.8.2 - 内容管理
• @nuxtjs/sitemap 7.5.0 - Sitemap 生成
• nuxt-og-image 5.1.13 - OG 图片生成
• fuse.js - 模糊搜索

图标与字体

• @nuxt/icon 2.1.1 - 图标库
• @nuxt/fonts 0.12.1 - 字体管理
• @iconify-json/ - Iconify 图标集

其他功能

• @nuxt/image 2.0.0 - 图片优化
• @nuxtjs/color-mode 4.0.0 - 暗黑模式
• @vueuse/nuxt 14.1.0 - Vue Hooks 库
• @formkit/auto-animate 0.9.0 - 自动动画
• twikoo 1.6.44 - 评论系统
• feed 5.1.0 - RSS 生成

🚀 快速开始

前置要求

• Node.js 24.12.0 或更高版本
• Bun（推荐）或 npm

安装依赖

# 使用 Bun（推荐）
bun install

# 或使用 npm
npm install

开发模式

bun dev
# 访问 http://localhost:3000

生产构建

# 构建应用
bun run build

# 预览构建结果
bun run preview

生成静态网站

bun run generate

📝 配置指南

站点配置

编辑 app/config/index.ts 自定义网站配置：

const siteConfig = {
  siteMeta: {
    title: "你的博客标题",
    description: "你的博客描述",
    author: "你的名字",
    url: "https://你的域名",
    keywords: ["关键词 1", "关键词 2"],
    email: "你的邮箱",
    lang: "zh-CN",
    favicon: "/favicon.svg",
  },
  // ... 其他配置
};

评论系统

在 app/config/index.ts 配置 Twikoo：

comment: {
  twikoo: {
    enable: true,
    envId: "你的 Twikoo 环境 ID",
  },
}

📄 文章格式

在 content/blogs/ 目录下创建 Markdown 文件：

---
title: "文章标题"
description: "文章描述"
date: "2026-01-01"
image: "/blogs-img/example.jpg"
alt: "图片描述"
tags: ["标签 1", "标签 2"]
categories: ["分类 1"]
published: true
---

文章内容。..

Front Matter 字段说明

字段	类型	说明
title	string	文章标题
description	string	文章描述
date	string	发布日期 (YYYY-MM-DD)
image	string	文章封面图
alt	string	图片描述
tags	array	文章标签
categories	array	文章分类
published	boolean	是否发布

🎨 自定义样式

项目使用 Tailwind CSS，全局样式在 app/assets/css/main.css 中定义。

修改 tailwind.config.js 可自定义：

• 颜色方案
• 排版
• 间距
• 响应式断点
• 等等

📊 SEO 优化

项目内置完整的 SEO 优化：

• ✅ Meta 标签（title, description, keywords）
• ✅ hreflang 标签（多语言）
• ✅ Canonical 标签
• ✅ Sitemap 自动生成
• ✅ RSS 订阅源

🔧 常用命令

# 开发
bun dev              # 启动开发服务器
bun run build        # 构建生产版本
bun run preview      # 预览生产版本
bun run generate     # 生成静态网站

# 代码质量
bun run lint         # 检查代码
bun run lint:fix     # 修复代码问题
bun run format       # 检查代码格式
bun run format:fix   # 格式化代码

📱 浏览器支持

• Chrome（最新版）
• Firefox（最新版）
• Safari（最新版）
• Edge（最新版）

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License - 详见 LICENSE

👤 作者

RhenCloud

• GitHub: @RhenCloud
• Email: i@rhen.cloud
• Website: https://rhen.cloud
• Telegram: @RhenCloud
• Bilibili: RhenCloud
• X: @RhenCloud75

🔗 相关链接

• 博客地址：https://blog.rhen.cloud
• Nuxt 文档：https://nuxt.com
• Tailwind CSS: https://tailwindcss.com
• Nuxt Content: https://content.nuxt.com
• Twikoo 评论：https://twikoo.js.org

📝 更新日志

2026-01-01

• ✨ 初始化项目
• ✅ 完整的 SEO 优化
• ✅ 搜索功能
• ✅ 深色模式支持
• ✅ 评论系统集成
• ✅ Sitemap 和 RSS 支持

---