一个温馨可爱的个人博客，以虚拟歌手洛天依为主题，适合记录生活感悟和技术学习心得。
Live站点: https://blog.xinchengp.cn
- 互动看板娘 - 可爱的洛天依陪你逛博客
- 精选音乐 - 内置多首洛天依歌曲
- 主题配色 - 以天依蓝为主色调，清新自然
- 轻松写文 - 支持Markdown格式，简单易用
- 自动归档 - 文章按时间和分类整理
- 评论互动 - 基于GitHub的评论系统
- 阅读统计 - 自动计算阅读时间
- 动态发布 - 记录生活点滴，支持置顶功能
- 时间显示 - 精确到分钟的时间记录
- 博客关联 - 自动关联博客文章发布动态
- 紧凑布局 - 美观的卡片式设计
- 图片管理 - 集中管理博客图片资源
- 分类筛选 - 按分类浏览和筛选图片
- 图片预览 - 支持高级放大控制和左右翻页
- 响应式布局 - 适配不同设备屏幕
- 深色模式 - 自动跟随系统或手动切换
- 流畅动画 - 自然的交互动效
- 毛玻璃特效 - 现代化的卡片设计
- 拼音转换器 - 汉字转拼音，支持多音字
- 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" # 可选：封面图片路径
3. 接下来用Markdown格式写正文内容
### 发布动态
1. 在 `src/content/moments` 文件夹中创建新的Markdown文件（.md结尾）
2. 在文件开头添加动态信息，示例：
```yaml
---
id: "1"
time: "2026-02-24 10:30"
pinned: false # 可选，设置为true可置顶动态
tags: ["测试", "动态"]
images: ["图片URL1", "图片URL2"] # 可选，支持多张图片
---
- 接下来写动态内容
- 九宫格布局: 图片会以传统九宫格的形式排列，正方形缩小显示
- 图片预览: 点击图片可以放大显示，支持左右翻页
- 高级放大功能: 支持精细的缩放控制（+/-/0键）、鼠标拖拽查看、缩放百分比显示
- 加载状态: 图片加载过程中显示加载动画，提升用户体验
- 错误处理: 图片加载失败时显示错误信息并提供重试按钮
- 数量限制: 支持多张图片，根据实际需求添加
- 图片格式: 建议使用WebP格式，每张图片大小不超过5MB
- 图片来源: 支持两种图片添加方式：
- 本地上传: 直接从本地设备上传图片，自动压缩和存储
- 画廊选择: 从博客的画廊(gallery)中选择已有的图片，支持按分类筛选
- 访问画廊: 通过导航菜单进入画廊页面
- 浏览图片: 按分类浏览和筛选图片
- 选择图片: 在发布动态时可以从画廊选择图片
- 图片管理: 画廊中的图片存储在
public目录下的相关文件夹
- ** 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中的配置，确保域名正确 - 推送代码后等待部署完成
- Node.js版本：建议使用Node.js 20.9或以上版本（Next.js 16要求）
- 依赖安装：如果安装依赖失败，尝试使用
npm install --legacy-peer-deps - 图片大小：建议图片大小不超过500KB，确保加载速度
- 文章命名：文章文件名建议使用英文或拼音，避免特殊字符
- 本地测试：每次修改后，建议先在本地测试再推送到线上
- 时效性说明：技术类文章会自动显示时效性提示，超过1年的文章会有更新提示
- 静态生成 - 加载速度快，SEO友好
- 免费托管 - 可部署到GitHub Pages，无需服务器
- 易于定制 - 主题和功能可根据需求调整
- 持续更新 - 定期优化和添加新功能
- 类型安全 - 使用TypeScript确保代码质量
- 响应式设计 - 适配各种设备屏幕
MIT License - 可自由使用和修改
🌸 一个温馨的小天地，记录生活与成长的美好时光