最后更新: 2026年4月11日
一个温馨可爱的个人博客，以虚拟歌手洛天依为主题，适合记录生活感悟和技术学习心得。
Live站点: https://blog.xinchengp.cn
- Next.js 16.1.6 - App Router + Turbopack，静态导出模式
- React 19.2.x - 函数组件 + Hooks
- TypeScript 5.x - 严格模式，类型安全
- Tailwind CSS 4 - 原子化CSS，深色模式支持
- CSS Variables - 10种预设主题色系统
- Framer Motion - 动画和过渡效果
- next-themes - 主题切换
- marked / react-markdown - Markdown渲染
- gray-matter - Frontmatter解析
- highlight.js - 代码语法高亮
- recharts - 数据可视化图表
- @tsparticles/react - 粒子动画背景
- aplayer - 音乐播放器
- octokit - GitHub API集成
- simple-git - Git操作
- bcryptjs - 密码加密
- date-fns - 日期处理
- lucide-react / @heroicons/react - 图标库
- ESLint 9.x - 代码检查
- TypeScript 5.x - 类型检查
- tsx - TypeScript执行器
- sharp - 图片处理
- 互动看板娘 - 可爱的洛天依陪你逛博客
- 精选音乐 - 内置多首洛天依歌曲
- 主题配色 - 以天依蓝为主色调，清新自然
- 轻松写文 - 支持Markdown格式，简单易用
- 自动归档 - 文章按时间和分类整理
- 评论互动 - 基于GitHub的评论系统
- 阅读统计 - 自动计算阅读时间
- 隐藏文章 - 支持标记文章为隐藏状态
- 时效性提示 - 技术文章自动显示更新时效提示
- 动态发布 - 记录生活点滴，支持置顶功能
- 时间显示 - 精确到秒的时间记录
- 博客关联 - 自动关联博客文章发布动态
- 紧凑布局 - 美观的卡片式设计
- 隐藏动态 - 支持标记动态为隐藏状态
- Live2D彩蛋 - 发现隐藏内容时看板娘显示惊喜消息
- 待办展示 - 在动态页面侧边栏展示待办列表
- 优先级标记 - 支持高/中/低三级优先级
- 完成统计 - 显示完成进度和统计信息
- 后台管理 - 本地后台支持增删改查操作
- 图片管理 - 集中管理博客图片资源
- 分类筛选 - 按分类浏览和筛选图片
- 图片预览 - 支持高级放大控制和左右翻页
- 响应式布局 - 适配不同设备屏幕
- 递归扫描 - 自动递归扫描子目录图片
- 目录树导航 - 子目录快速导航和数量统计
- 开发日志 - 记录项目开发过程和功能更新
- 时间线展示 - 按时间顺序展示更新历史
- 分类标记 - 区分功能新增、优化、修复等类型
- 数据可视化 - 时间趋势折线图和类型分布环形图
- 本地管理 - 开发环境访问
/admin进行后台管理 - 待办管理 - 支持待办事项的增删改查操作
- 更新日志管理 - 创建和管理项目更新日志
- 代码备份 - 本地代码备份快照管理
- GitHub推送 - 直接推送更改到远程仓库
- 统一组件 - 复用性强的后台UI组件库
- 深色模式 - 自动跟随系统或手动切换
- 流畅动画 - 自然的交互动效
- 毛玻璃特效 - 现代化的卡片设计
- 浏览器检测 - 自动检测浏览器兼容性并提示
- 代码复制 - 代码块一键复制功能
- 暗黑模式图片优化 - 智能滤镜适配暗色主题
- 拼音转换器 - 汉字转拼音，支持多音字
- Markdown编辑器 - 实时预览，可导出
- 年度进度 - 显示当前年份进度百分比
- 节日倒计时 - 重要节日倒计时提醒
- 可视化展示 - 直观的进度条设计
- 需要安装 Node.js（版本20.9及以上，Next.js 16要求）
- 安装完成后，打开命令行工具
-
获取代码
git clone https://github.com/xinchengp/OxygenBlogPlatform.git cd OxygenBlogPlatform -
安装依赖
npm install
-
启动博客
npm run dev
-
访问博客 打开浏览器，输入
http://localhost:3000即可看到博客
- 在
src/content/blogs文件夹中创建新的Markdown文件（.md结尾） - 在文件开头添加文章信息，示例：
--- title: "文章标题" date: "2025-12-31" updatedAt: "2025-12-31" # 可选：文章更新时间 category: "生活感悟" tags: ["日常", "洛天依"] excerpt: "这里是文章的简短摘要" coverImage: "/path/to/image.png" # 可选：封面图片路径 ---
- 接下来用Markdown格式写正文内容
- 在
src/content/moments文件夹中创建新的Markdown文件（.md结尾） - 在文件开头添加动态信息，示例：
--- id: "1" time: "2026-02-24 10:30:00" pinned: false # 可选，设置为true可置顶动态 tags: ["测试", "动态"] images: ["/Momentsabout/图片1.jpg", "/LTY_Picture/图片2.png"] # 可选，支持多张图片 ---
- 接下来写动态内容
- 九宫格布局: 图片会以传统九宫格的形式排列，正方形缩小显示
- 图片预览: 点击图片可以放大显示，支持左右翻页
- 高级放大功能: 支持精细的缩放控制（+/-/0键）、鼠标拖拽查看、缩放百分比显示
- 加载状态: 图片加载过程中显示加载动画，提升用户体验
- 错误处理: 图片加载失败时显示错误信息并提供重试按钮
- 数量限制: 支持多张图片，根据实际需求添加
- 图片格式: 建议使用WebP格式，每张图片大小不超过5MB
- 图片来源: 支持两种图片添加方式：
- 本地上传: 直接从本地设备上传图片，自动压缩和存储
- 画廊选择: 从博客的画廊(gallery)中选择已有的图片，支持按分类筛选
- 访问画廊: 通过导航菜单进入画廊页面
- 浏览图片: 按分类浏览和筛选图片
- 选择图片: 在发布动态时可以从画廊选择图片
- 图片管理: 画廊中的图片存储在
public目录下的相关文件夹
- 日志位置:
src/content/changelogs/目录 - 文件命名: 使用日期格式
YYYY-MM-DD.md - 内容格式: Markdown格式，支持分类标记
- 自动展示: 在更新日志页面按时间线展示
- ** Fork 本仓库** 到你的GitHub账号
- 设置环境变量：在仓库Settings → Secrets中添加必要的环境变量
- 开启GitHub Actions：确保仓库的Actions功能已启用
- 推送文章：将写好的文章推送到main分支
- 等待部署：GitHub会自动构建并部署到GitHub Pages
# 生产环境 (.env) - GitHub Pages 默认域名
NODE_ENV=production
NEXT_PUBLIC_GITHUB_REPO_NAME=你的仓库名
NEXT_PUBLIC_BASE_PATH=/你的仓库名 # GitHub Pages路径前缀
# 生产环境 (.env) - 自定义域名
NODE_ENV=production
NEXT_PUBLIC_GITHUB_REPO_NAME=你的仓库名
NEXT_PUBLIC_BASE_PATH= # 空值，自定义域名不需要仓库名前缀- 在GitHub仓库Settings → Pages中设置你的域名
- 修改
next.config.ts中的配置，确保域名正确 - 推送代码后等待部署完成
本项目支持使用 Electron 打包为桌面应用：
# 安装 Electron 依赖（如未安装）
npm install electron --save-dev
# 运行桌面应用
npm run electron- Node.js版本：建议使用Node.js 20.9或以上版本（Next.js 16要求）
- 依赖安装：如果安装依赖失败，尝试使用
npm install --legacy-peer-deps - 图片大小：建议图片大小不超过500KB，确保加载速度
- 文章命名：文章文件名建议使用英文或拼音，避免特殊字符
- 本地测试：每次修改后，建议先在本地测试再推送到线上
- 时效性说明：技术类文章会自动显示时效性提示，超过1年的文章会有更新提示
- 浏览器兼容：建议使用现代浏览器（Chrome、Firefox、Safari、Edge）以获得最佳体验
- Electron版本：桌面应用使用Electron 34，支持Node.js 24
- 隐藏内容：隐藏的文章和动态仅在后台可见，构建后不会显示在前台
- 静态生成 - 加载速度快，SEO友好
- 免费托管 - 可部署到GitHub Pages，无需服务器
- 易于定制 - 主题和功能可根据需求调整
- 持续更新 - 定期优化和添加新功能
- 类型安全 - 使用TypeScript确保代码质量
- 响应式设计 - 适配各种设备屏幕
- 桌面支持 - 可打包为桌面应用
MIT License - 可自由使用和修改
🌸 一个温馨的小天地，记录生活与成长的美好时光