这是一个采用 Next.js 构建的高颜值、毛玻璃（Glassmorphism）风格个人博客系统。本项目自带完善的前端展示与独立的本地后台控制台，支持 Markdown 沉浸式写作、草稿管理以及便捷的图床配置。
本指南将带你从零开始，轻松部署并使用 XHBlogs。
关于动态类贡献度及日志显示
修补目前存在的编辑器bug，如超链接无法显示，引用无法显示等
类创意工坊功能，等级系统可在 设置->个人名片设置 中关闭
已更换API，修复网易云音乐显示bug。更新即可
在开始之前，请确保你的电脑已安装以下运行环境，否则后续程序将无法正常启动：
- Node.js (推荐版本 v18.x 或以上)
- 包管理器 (npm)
- Git (用于拉取代码与版本控制)
- Python (建议版本 3.10 及以上，本系统在 3.10 环境下测试通过)
- 可选：云存储/图床服务（后续会有详细配置说明）
为了让你能轻松跟上项目的最新功能，请使用更新器对源码进行更新！ 使用更新器，你不需要再手动对比代码、不用担心拉取更新会引发冲突，更不用害怕辛辛苦苦写的文章和配置文件被覆盖！
🛠️ 更新步骤：
第一步：获取无损更新器 (仅首次需要)
如下图所示
当你完成上述环境的配置后，恭喜你，最基础的准备工作已经搞定了！
首先，进入 my-blog-manager 文件夹（
双击运行文件夹中的启动脚本：
Start.bat
脚本会自动检测并安装所需的依赖包。等待环境配置完成后，程序会自动唤起精美的后台控制台。
提示：本教程主要演示如何将项目部署至 Vercel，因为 Vercel 对 Next.js 框架有着最顶级的原生支持。
前提：请确保已安装 Git，并拥有一个 GitHub 账号。接下来的步骤请务必按顺序操作！
请确保你已完成以下操作：
第一步：本地全局配置
设置用户名
git config --global user.name "你的Github用户名"
设置邮箱（必须是你在 GitHub 绑定的邮箱）
git config --global user.email "你绑定在Github的邮箱@example.com"
第二步：初始化本地仓库
进入你的项目文件夹，执行以下CMD命令行操作：(及前端部署文件夹，这里是XHBlogs)
- 初始化 Git 仓库，生成隐藏的 .git 文件夹
git init - 将所有文件添加到暂存区（注意后面有个点）
git add . - 提交到本地版本库，并添加备注
git commit -m "first commit"
1. 配置本地物理路径
打开控制台的“设置”页面。
在拉取的源码中，包含 XHBlogs-mananger 和 XHBlogs 两个核心文件夹。请在控制台中指定 XHBlogs 的本地物理路径。
例如：F:\Test2\XHBlogs
关键步骤：填入路径后，请务必点击 [测试路径] 进行连通性验证！！！验证通过后，再点击下方的 [保存双轨配置]。
2. 在 GitHub 创建私有仓库 登录 GitHub，新建一个用于托管博客源码的仓库（建议设置为 Private 私有仓库 以保护数据隐私）。
仓库名称可自定义。
获取该仓库的 SSH 地址，并将其复制粘贴到控制台的“B线”配置中：
源码分支填写为 main。确认无误后，再次点击 [保存双轨配置]。
3. 获取并配置部署密钥 点击控制台中的 [获取B线专属密钥] 按钮：
进入你的 GitHub 仓库页面，导航至 Settings -> Deploy keys 界面：
将刚才复制的密钥填入 Key 框中，Title 可随意命名（例如：XHBlogs-Deploy-Key）。
🚨 严重警告：下方的 Allow write access 选项必须勾选！！！ 设置完毕后，点击 Add key 保存。
4. 初始化并推送源码 返回本地控制台，点击 [智能初始化双轨环境]，静待程序执行完毕。 完成后，点击 [仅同步源码] 按钮：
程序将开始向 GitHub 推送代码。在此期间，请千万不要切换页面或关闭窗口：
进度条完成后，说明前端静态页面源码已成功托管至 GitHub。
此处可能出现无法推送bug：
请尝试
将SSH仓库地址改成如下图所示再进行初始化及同步源码
5. 部署至 Vercel 平台 访问 Vercel 官网，注册账号并绑定你的 GitHub 授权！
点击 Add New... 添加一个新的 Project，在 Import 列表中选择你刚刚推送到 GitHub 的仓库：
例如我选择的是 XHBlogS2：
在 Framework Preset（框架预设）中选择 Next.js，然后点击 Deploy 按钮开始部署：
静候 Vercel 服务器构建你的博客~~
撒花！部署成功后，点击预览图即可直接访问你的专属网站！
在项目仪表盘（Dashboard）中，你可以随时查看部署状态与详细日志：
Vercel 默认会为你分配一个免费的二级域名：
答： 这里以“阿里云”购买的域名为例（其他服务商如腾讯云、Cloudflare 等操作逻辑基本一致）。
首先登录阿里云控制台，进入【域名管理】页面：
点击对应域名右侧的【解析】按钮：
接着回到 Vercel，进入你的项目仪表盘，点击 Settings（或者直接点击域名旁的加号）：
在 Domains 选项卡中，输入你购买的域名（例如我的是 xinghuisama.top），点击 Add 保存：
添加后，Vercel 会提供 A 记录和 CNAME 记录的配置参数。请将这些参数完整添加到阿里云的 DNS 解析设置中：
注意：添加记录时，请务必仔细核去记录类型和记录值（Value）！
配置完成后等待几分钟（DNS 传播需要时间），在 Vercel 页面点击 Refresh 刷新状态！！
当状态显示为正常后，你就可以通过自己的专属域名访问博客了！（例如：www.xinghuisama.top）。
为了保护数据安全，本控制台采用了**“操作暂存区”**机制。请特别注意！！ 许多设置在修改后，必须主动执行“更新到本地”才能真正保存。需要执行此操作时，界面上方通常会有高亮提示。
操作示例：修改个人简介
修改内容后，点击 [暂存到操作队列]：
此时上方工具箱会提示待办操作。你可以随时撤销（清空全部），或者点击 [更新本地]。
⚠️ 注意：点击“更新本地”后，数据仅仅保存在了你的本地控制台环境中。
如果你希望让这些修改在前端博客页面生效，你必须继续点击 [同步 Blog]（前提是前端博客的物理路径已正确配置）：
博客文章、说说（碎碎念）、杂谈等所有内容的发布与修改，均遵循此流程。
💡 黄金法则：暂存队列 -> 更新本地 -> 同步Blog
当你在本地完成了满意的创作或设置调整，想要将其发布到公网让所有人看到时：
请牢记，在执行了任何实质性修改并点击 [同步Blog] 后，请打开控制台的同步部署页面：
确认“B线”地址正确无误，点击 [仅同步源码]。 等待 GitHub Actions 或 Vercel 自动捕获更新。稍作喝杯茶的功夫，你就能在线上页面看到最新鲜的内容了！
为了优化写作体验，控制台深度整合了图床上传功能。本指南推荐使用“去不图床”（https://7bu.top）。 如果你习惯使用纯外链，工具台也完美支持直接插入图片 URL。如果想接入其他支持标准 API 的图床，也欢迎极客们自行尝试。
配置流程：
填入对应的 API Token 等信息后，你可以点击 [发送探针测试Token]，实时检验图床接口是否畅通。
博客系统内置了一只聪明的 AI 猫猫助理（默认接入 Gemini 模型）。极客玩家也可以通过修改源码接入其他大语言模型。
首先，你需要申请一个 Gemini 的 API Key（申请教程网络资源丰富，在此不赘述）。拿到 API Key 后，在控制台进行如下配置：
在本地设定好猫猫的专属系统提示词（性格）后，我们需要让线上环境也拥有调用 AI 的能力。请登录 Vercel：
在项目设置中找到 Environment Variables（环境变量）：
进入你的博客工程详情：
确保作用域（环境）包含线上环境，点击 Add Environment Variables：
安全地注入你的密钥：
- Key 输入：
GEMINI_API_KEY - Value 输入：你的真实 API 密钥
点击保存。下一次重新部署时，猫猫助理就会在线上苏醒了。
本博客的评论系统基于 GitHub Issues（Gitalk 等类似方案）。你需要在 GitHub 创建一个 Public（公开） 仓库来专门存储网友的留言。
在控制台评论设置中，填入你的 GitHub 用户名以及这个公开仓库的名称：
接下来，配置 OAuth 授权以允许访客登录留言：
- 登录 GitHub，点击右上角个人头像，进入 Settings（设置）。
- 滑动到左侧菜单栏最底部，点击 Developer settings。
- 在左侧选择 OAuth Apps，点击右上角的 New OAuth App。
关键应用信息填写指南：
| 字段名称 | 填写建议 |
|---|---|
| Application name | 自定义名称，例如：My-Blog-Comments |
| Homepage URL | 你的博客首页完整地址 (例如 https://www.xinghuisama.top) |
| Application description | 可选填 |
| Authorization callback URL | 核心参数：必须填写你的博客域名。如果经常本地调试，可填 http://localhost:3000 |
提取核心密钥：
- 提交注册（Register application）。
- 在跳转页面即可看到 Client ID，这是所需的第一项数据。
- 点击下方的 Generate a new client secret 生成密钥。
- 🚨 立刻将这串密钥复制并妥善保存！ 出于安全机制，离开此页面后该密钥将永远隐藏。
将这组 Client ID 和 Client Secret 准确填入控制台的对应栏目中，保存即可激活评论功能。
想给博客配上 BGM 吗？ 通过电脑浏览器打开 网易云音乐网页版。搜索并进入你喜欢的歌曲详情页，观察浏览器地址栏，URL 中的数字即为歌曲的专属 ID：
将这串 ID 复制并粘贴到控制台的搜索框中，即可一键将该歌曲收录进你的博客歌单库！
XHBLogs 还有诸多隐藏的细节功能，期待极客朋友们在实际使用中慢慢探索。本项目旨在提供一套开箱即用的前端静态展示与后台管理方案。如果你是资深开发者，觉得控制台操作仍有优化空间，完全可以基于 Next.js 源码进行二次开发，甚至手搓 Markdown 进行部署！
如果你觉得这个项目对你有帮助，请务必在 GitHub 上为我点亮一颗 ⭐ Star！每一颗星都是博主持续维护更新的最大动力。谢谢大家！
本项目采用 CC BY-NC 4.0 许可协议。允许免费学习、分享和二次修改后发布（二次开源发布需提及原作者），但严禁用于任何商业用途。