P哥的技术博客

这是一个基于 Next.js 14 和 Tailwind CSS 构建的个人技术博客网站，具有深色科技感主题设计。

技术栈

• 框架: Next.js 14 + React
• 样式: Tailwind CSS（深色主题）
• 内容: MDX（Markdown + JSX）
• 后台: Decap CMS（Git-based CMS）
• 评论: Giscus（GitHub 评论）
• 部署: Vercel

功能特性

• 响应式设计，支持移动端和桌面端
• 科技感深色主题（黑/深蓝/紫色调）
• 代码高亮显示
• 标签分类系统
• 评论系统集成
• 后台管理系统

设计风格

• 背景：#0a0a0f（深黑蓝）
• 主色：#6366f1（紫色渐变）
• 强调：#06b6d4（青色）
• 文字：#e2e8f0（浅灰）

本地开发

1. 安装依赖：

npm install

2. 启动开发服务器：

npm run dev

3. 访问 http://localhost:3000 查看网站

项目结构

blog/
├── app/                 # Next.js 14 App Router 页面
├── components/         # React 组件
├── content/            # 博客文章 (MDX)
├── public/             # 静态资源
├── styles/             # 全局样式
├── admin/              # Decap CMS 配置
├── package.json        # 项目依赖
├── tailwind.config.js  # Tailwind CSS 配置
└── README.md           # 项目说明

内容管理

本博客使用 Decap CMS 进行内容管理。要访问后台管理界面，请访问 /admin 路径。

部署

推荐使用 Vercel 进行部署。只需连接你的 Git 仓库，Vercel 会自动构建和部署网站。

自定义配置

Giscus 评论系统

要在你的仓库中启用 Giscus，请按照以下步骤操作：

1. 在 GitHub 上安装 Giscus 应用到你的仓库
2. 获取所需的配置信息
3. 修改 app/blog/[slug]/page.tsx 文件中的 Giscus 配置

Decap CMS

CMS 配置位于 admin/config.yml，你可以根据需要调整内容类型和字段。

许可证

MIT