基于 NextJS 15 + React 19 + Tailwind CSS 3 构建的个人主页与博客系统。
- 四套主题 — OhMySpace 深色/浅色 + Metro 极简深色/浅色，浮动面板切换，
localStorage持久化 - 背景图片 — 随机图床 + 本地缓存，支持自定义 API 源
- 实时时钟 — 零漂移
setTimeout秒级对齐 - IP 地理位置 — 主备多 API 容错，展示 IP/地区/ISP/ASN
- 网易云音乐播放器 — 双曲切换、LRC 歌词同步滚动、渐变色进度条
- 浮动音乐播放器 — 全局可拖拽悬浮球，首页隐藏
- 雨滴背景 — 35 枚 CSS 动画雨滴
- 玻璃拟态 UI —
backdrop-filter: blur(24px)+ 多层阴影 + 渐变边框（OhMySpace 主题） - 极简直角 UI — 纯色无阴影、直角卡片（Metro 主题）
- 博客系统 — Markdown 文件驱动，标签分类，全文搜索
- 点击涟漪效果 — Canvas 水波纹
- 风动草地 — 底部草动画
- 站点统计 — 文章数、访问量、建站天数
- 页面过渡动画 — framer-motion 入场
- 响应式布局 — 适配桌面端与移动端
- 多平台部署 — Docker / Cloudflare / Vercel / 静态平台
| 类别 | 库 / 框架 |
|---|---|
| 框架 | NextJS 15 (App Router) |
| UI 组件 | React 19、Tailwind CSS 3 |
| 动画 | framer-motion |
| 图标 | inline SVG |
| 字体 | 系统字体栈（SF Pro / Segoe UI / Roboto） |
| 部署 | standalone / export / Vercel / Cloudflare / Docker |
所有 UI 组件均为自定义实现，无第三方 UI 库依赖。零 @vercel/* 依赖。
npm install
npm run dev # 开发服务器 → http://localhost:3000
npm run build # 构建 → .next/
npm run start # 启动产物
npm run editor # 独立 GUI 编辑器 → http://localhost:4000npm run editor打开 http://localhost:4000，指定项目文件夹路径后，可在可视化界面中新建、编辑、删除文章，以及修改站点配置。
在 content/posts/ 下创建 .md 文件：
---
title: '文章标题'
description: '文章简介'
date: 2026-07-25
tags:
- 标签1
- 标签2
draft: false
---
正文内容 **Markdown** 格式。编辑 config/site.json（或通过 GUI 编辑器）：
{
"songIds": ["3381858432", "3396990498"],
"authorName": "你的名字",
"authorTitle": "全栈开发者",
"authorBio": "热爱开源与技术分享。",
"avatarUrl": "",
"links": [
{ "label": "GitHub", "url": "https://github.com" },
{ "label": "邮件", "url": "mailto:hello@example.com" }
],
"bgApi": "https://t.alcy.cc/fj"
}ohmyspace/
├── app/
│ ├── layout.tsx # 根布局 + MusicProvider + 全局效果
│ ├── page.tsx # 首页（服务端组件）
│ ├── globals.css # Tailwind + CSS 变量 + 主题系统
│ └── blog/
│ ├── page.tsx # 博客列表（含搜索框）
│ └── [slug]/
│ └── page.tsx # 博客详情
├── components/
│ ├── BackgroundImage.tsx # 随机背景图 + 控制按钮
│ ├── Header.tsx # 导航栏（路由高亮）
│ ├── ThemeToggle.tsx # 主题切换按钮
│ ├── ThemeSelector.tsx # 浮动主题面板选择器
│ ├── ThemeBlock.tsx # 明暗切换视觉块
│ ├── ClockCard.tsx # 实时时钟
│ ├── RainBackground.tsx # CSS 雨滴动画
│ ├── IpCard.tsx # IP 地理位置
│ ├── CustomPlayer.tsx # 音乐播放器
│ ├── FloatingPlayer.tsx # 全局浮动播放器
│ ├── MusicInit.tsx # 音乐数据初始化
│ ├── ClickEffect.tsx # 点击涟漪
│ ├── WindyGrass.tsx # 风动草地
│ ├── PageTransition.tsx # 页面入场动画
│ ├── SearchBar.tsx # 文章搜索
│ ├── Footer.tsx # 页脚技术栈标记
│ └── SiteDashboard.tsx # 站点统计
├── content/posts/ # 博客 Markdown
├── config/
│ └── site.json # 站点配置（歌单、作者、链接、背景 API）
├── lib/
│ ├── MusicContext.tsx # 音乐状态共享
│ ├── posts.ts # 博客文件读取
│ ├── theme.ts # 多主题管理 hook
│ └── background.ts # 背景图状态管理
├── tools/editor/
│ ├── server.mjs # 独立 GUI 编辑器服务器
│ └── index.html # 编辑器前端
├── public/
├── next.config.ts # standalone/export 多平台配置
├── Dockerfile # 自托管部署
└── AGENTS.md # AI 辅助开发说明
docker build -t ohmyspace .
docker run -p 3000:3000 ohmyspace零配置，直接导入 Git 仓库即可。
推荐方式，零服务端依赖，全球 CDN 加速。
- 推送代码到 GitHub
- 登录 Cloudflare Dashboard → Workers & Pages → 创建 → Pages → 连接 Git
- 选择 OhMySpace 仓库，配置如下：
| 配置项 | 值 |
|---|---|
| 框架预设 | Next.js（或选择 None） |
| 构建命令 | NEXT_PUBLIC_STATIC_EXPORT=true npm run build |
| 输出目录 | out |
| 根目录 | / |
- 点击 保存并部署，Cloudflare 会自动构建并部署
- 后续每次推送
main/master分支自动触发重部署
# 安装 Wrangler
npm install -g wrangler
# 登录（浏览器授权）
wrangler login
# 构建静态导出
NEXT_PUBLIC_STATIC_EXPORT=true npm run build
# 部署 out/ 目录到 Cloudflare Pages
wrangler pages deploy out --project-name=ohmyspace首次部署会创建项目并输出预览 URL，可在 Cloudflare Dashboard 中绑定自定义域名。
- 静态导出：所有页面在构建时预渲染，博客文章需在构建前写入
content/posts/ - 音乐数据：歌曲信息在构建时从网易云 API 拉取，构建后不会更新
- 主题 / 背景设置：用户偏好存储在浏览器
localStorage，不受部署影响 - 环境变量：无需设置任何环境变量即可部署
NEXT_OUTPUT_STANDALONE=true npm run build
node .next/standalone/server.js