🌸 个人博客 - 洛天依主题

一个温馨可爱的个人博客，以虚拟歌手洛天依为主题，适合记录生活感悟和技术学习心得。

Live站点: https://blog.xinchengp.cn

✨ 主要功能

✨ 洛天依特色

• 互动看板娘 - 可爱的洛天依陪你逛博客
• 精选音乐 - 内置多首洛天依歌曲
• 主题配色 - 以天依蓝为主色调，清新自然

📝 博客功能

• 轻松写文 - 支持Markdown格式，简单易用
• 自动归档 - 文章按时间和分类整理
• 评论互动 - 基于GitHub的评论系统
• 阅读统计 - 自动计算阅读时间

🎨 设计亮点

• 深色模式 - 自动跟随系统或手动切换
• 流畅动画 - 自然的交互动效
• 毛玻璃特效 - 现代化的卡片设计

🛠️ 实用工具

• 拼音转换器 - 汉字转拼音，支持多音字
• Markdown编辑器 - 实时预览，可导出

🚀 本地体验

准备工作

• 需要安装 Node.js（版本18及以上）
• 安装完成后，打开命令行工具

开始步骤

1. 获取代码

   git clone https://github.com/xinchengp/OxygenBlogPlatform.git
   cd OxygenBlogPlatform

2. 安装依赖

   npm install

3. 启动博客

   npm run dev

4. 访问博客 打开浏览器，输入 http://localhost:3000 即可看到博客

📝 写博客

添加新文章

1. 在 src/content/blogs 文件夹中创建新的Markdown文件（.md结尾）
2. 在文件开头添加文章信息，示例：

   ---
   title: "文章标题"
   date: "2025-12-31"
   category: "生活感悟"
   tags: ["日常", "洛天依"]
   excerpt: "这里是文章的简短摘要"
   ---

3. 接下来用Markdown格式写正文内容

插入图片

• 图片放在 public 文件夹下
• 文章中使用相对路径引用，例如：![图片描述](/图片路径)

🌐 部署到线上

使用GitHub Pages

1. ** Fork 本仓库** 到你的GitHub账号
2. 设置环境变量：在仓库Settings → Secrets中添加必要的环境变量
3. 开启GitHub Actions：确保仓库的Actions功能已启用
4. 推送文章：将写好的文章推送到main分支
5. 等待部署：GitHub会自动构建并部署到GitHub Pages

使用自定义域名

1. 在GitHub仓库Settings → Pages中设置你的域名
2. 修改 next.config.ts 中的配置，确保域名正确
3. 推送代码后等待部署完成

⚠️ 注意事项

1. Node.js版本：建议使用Node.js 18或以上版本
2. 依赖安装：如果安装依赖失败，尝试使用 npm install --legacy-peer-deps
3. 图片大小：建议图片大小不超过500KB，确保加载速度
4. 文章命名：文章文件名建议使用英文或拼音，避免特殊字符
5. 本地测试：每次修改后，建议先在本地测试再推送到线上

🌟 特色亮点

• 静态生成 - 加载速度快，SEO友好
• 免费托管 - 可部署到GitHub Pages，无需服务器
• 易于定制 - 主题和功能可根据需求调整
• 持续更新 - 定期优化和添加新功能

📄 许可证

MIT License - 可自由使用和修改

---

🌸 一个温馨的小天地，记录生活与成长的美好时光

⬆️ 返回顶部