[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-5742":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},5742,"XinghuisamaBlogs","heiehiehi\u002FXinghuisamaBlogs","heiehiehi","这是一个采用 Next.js 构建的高颜值、毛玻璃（Glassmorphism）风格个人博客系统。本项目自带完善的前端展示与独立的本地后台控制台，支持 Markdown 沉浸式写作、草稿管理以及便捷的图床配置。（新增对移动端适配））","",null,"TypeScript",214,50,1,7,0,17,38,140,51,5.12,false,"main",true,[],"2026-06-12 02:01:14","# 🌟 欢迎使用 XHBlogs！\n\n这是一个采用 Next.js 构建的高颜值、毛玻璃（Glassmorphism）风格个人博客系统。本项目自带完善的前端展示与独立的本地后台控制台，支持 Markdown 沉浸式写作、草稿管理以及便捷的图床配置。\n\n本指南将带你从零开始，轻松部署并使用 XHBlogs。\n\n---\n## 语言\n\n[![English](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLanguage-English-blue.svg)](README_en.md)\n[![中文](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F语言-中文-red.svg)](README.md)\n\n## 写在前面\n\n### 更新摘要 (版本0.3.1)\n\n#### 1. 新增个人关于动态\n\n> 关于动态类贡献度及日志显示\n\n#### 2. 修复部分富文本编辑器bug\n\n> 修补目前存在的编辑器bug，如超链接无法显示，引用无法显示等\n\n#### 3. 新增灵境与等级系统\n\n> 类创意工坊功能，等级系统可在 设置->个人名片设置 中关闭\n\n\n## 一、快速开始部署\n\n### 1. 环境配置\n\n在开始之前，请确保你的电脑已安装以下运行环境，否则后续程序将无法正常启动：\n\n- **Node.js** (推荐版本 v18.x 或以上)\n- **包管理器** (npm)\n- **Git** (用于拉取代码与版本控制)\n- **Python** (建议版本 3.10 及以上，本系统在 3.10 环境下测试通过)\n- *可选：云存储\u002F图床服务（后续会有详细配置说明）*\n\n### 2. 博客源码更新\n\n为了让你能轻松跟上项目的最新功能，请使用更新器对源码进行更新！\n使用更新器，你不需要再手动对比代码、不用担心拉取更新会引发冲突，更不用害怕辛辛苦苦写的文章和配置文件被覆盖！\n\n🛠️ 更新步骤：\n\n第一步：获取无损更新器 (仅首次需要)\n\n#### 1 下载项目根目录下的 update.bat 和 update.py 文件。\n\n#### 2  将下载好的 update.bat 和 update.py 移动到你本地博客项目的最外层根目录（也就是和 my-blog-manager、XHBlogs 文件夹放在一起的地方）。\n\n如下图所示\n\n![img.png](picture\u002F333.png)\n\n#### 3 双击update.bat文件实现更新，如果闪退 请使用cmd运行update.py文件\n\n### 3. 快速开始\n\n#### ① 启动脚本\n\n当你完成上述环境的配置后，恭喜你，最基础的准备工作已经搞定了！\n首先，进入 `my-blog-manager` 文件夹（**⚠️ 注意：请绝对不要重命名此文件夹，否则会导致环境路径解析失败！**）\n\n双击运行文件夹中的启动脚本：\n`Start.bat`\n脚本会自动检测并安装所需的依赖包。等待环境配置完成后，程序会自动唤起精美的后台控制台。\n\n#### ② 部署你的博客到 Vercel\n\n> **提示**：本教程主要演示如何将项目部署至 Vercel，因为 Vercel 对 Next.js 框架有着最顶级的原生支持。\n>\n> **前提**：请确保已安装 Git，并拥有一个 GitHub 账号。**接下来的步骤请务必按顺序操作！**\n\n> **请确保你已完成以下操作**：\n>\n> **第一步：本地全局配置**\n\n设置用户名\n\n`git config --global user.name \"你的Github用户名\"`\n\n设置邮箱（必须是你在 GitHub 绑定的邮箱）\n\n`git config --global user.email \"你绑定在Github的邮箱@example.com\"`\n\n> **第二步：初始化本地仓库**\n>\n> 进入你的项目文件夹，执行以下CMD命令行操作：(及前端部署文件夹，这里是XHBlogs)\n\n1. 初始化 Git 仓库，生成隐藏的 .git 文件夹\n   `git init`\n2. 将所有文件添加到暂存区（注意后面有个点）\n   `git add .`\n3. 提交到本地版本库，并添加备注\n   `git commit -m \"first commit\"`\n\n**1. 配置本地物理路径**\n打开控制台的“设置”页面。\n在拉取的源码中，包含 `XHBlogs-mananger` 和 `XHBlogs` 两个核心文件夹。请在控制台中指定 `XHBlogs` 的本地物理路径。\n\n![选择物理路径](picture\u002FPasted%20image%2020260427111646.png)\n\n例如：`F:\\Test2\\XHBlogs`\n\n![填入本地BLOG物理路径](picture\u002FPasted%20image%2020260427112311.png)\n\n> **关键步骤**：填入路径后，请务必点击 **[测试路径]** 进行连通性验证！！！验证通过后，再点击下方的 **[保存双轨配置]**。\n\n**2. 在 GitHub 创建私有仓库**\n登录 GitHub，新建一个用于托管博客源码的仓库（建议设置为 **Private 私有仓库** 以保护数据隐私）。\n\n![创建仓库](picture\u002FPasted%20image%2020260427112905.png)\n\n仓库名称可自定义。\n\n![仓库命名](picture\u002FPasted%20image%2020260427113030.png)\n\n获取该仓库的 SSH 地址，并将其复制粘贴到控制台的“B线”配置中：\n\n![复制SSH](picture\u002FPasted%20image%2020260427113120.png)\n\n源码分支填写为 `main`。确认无误后，再次点击 **[保存双轨配置]**。\n\n**3. 获取并配置部署密钥**\n点击控制台中的 **[获取B线专属密钥]** 按钮：\n\n![专属密钥](picture\u002F98b965b5-6193-4690-a478-fe1a9abd594e.png)\n\n进入你的 GitHub 仓库页面，导航至 `Settings` -> `Deploy keys` 界面：\n\n![Deploy Keys](picture\u002FPasted%20image%2020260427113705.png)\n\n将刚才复制的密钥填入 `Key` 框中，`Title` 可随意命名（例如：`XHBlogs-Deploy-Key`）。\n\n> **🚨 严重警告**：下方的 **Allow write access** 选项必须勾选！！！\n> 设置完毕后，点击 **Add key** 保存。\n\n**4. 初始化并推送源码**\n返回本地控制台，点击 **[智能初始化双轨环境]**，静待程序执行完毕。\n完成后，点击 **[仅同步源码]** 按钮：\n\n![仅同步源码](picture\u002FPasted%20image%2020260427121539.png)\n\n程序将开始向 GitHub 推送代码。**在此期间，请千万不要切换页面或关闭窗口**：\n\n![同步进度](picture\u002FPasted%20image%2020260427121702.png)\n\n进度条完成后，说明前端静态页面源码已成功托管至 GitHub。\n\n> **此处可能出现无法推送bug**：\n>\n> **请尝试**\n>\n> 将SSH仓库地址改成如下图所示再进行初始化及同步源码\n>\n> ![img.png](picture\u002Fimg.png)\n\n**5. 部署至 Vercel 平台**\n访问 Vercel 官网，注册账号并绑定你的 GitHub 授权！\n\n![绑定账号](picture\u002FPasted%20image%2020260427121844.png)\n\n点击 `Add New...` 添加一个新的 Project，在 Import 列表中选择你刚刚推送到 GitHub 的仓库：\n\n![导入项目](picture\u002FPasted%20image%2020260427121939.png)\n\n例如我选择的是 `XHBlogS2`：\n\n![选择项目](picture\u002FPasted%20image%2020260427122034.png)\n\n在 Framework Preset（框架预设）中选择 **Next.js**，然后点击 **Deploy** 按钮开始部署：\n\n![点击Deploy](picture\u002FPasted%20image%2020260427122141.png)\n\n静候 Vercel 服务器构建你的博客~~\n\n![部署中](picture\u002FPasted%20image%2020260427122245.png)\n\n撒花！部署成功后，点击预览图即可直接访问你的专属网站！\n\n![部署成功](picture\u002FPasted%20image%2020260427122338.png)\n\n在项目仪表盘（Dashboard）中，你可以随时查看部署状态与详细日志：\n\n![查看详情](picture\u002FPasted%20image%2020260427122453.png)\n\nVercel 默认会为你分配一个免费的二级域名：\n\n![分配域名](picture\u002FPasted%20image%2020260427122553.png)\n\n---\n\n### 问题 1：我要怎么样绑定自己的专属域名？\n\n**答：** 这里以“阿里云”购买的域名为例（其他服务商如腾讯云、Cloudflare 等操作逻辑基本一致）。\n\n首先登录阿里云控制台，进入【域名管理】页面：\n\n![域名管理](picture\u002FPasted%20image%2020260427123636.png)\n\n点击对应域名右侧的【解析】按钮：\n\n![点击解析](picture\u002FPasted%20image%2020260427123737.png)\n\n接着回到 Vercel，进入你的项目仪表盘，点击 **Settings**（或者直接点击域名旁的加号）：\n\n![点击加号](picture\u002FPasted%20image%2020260427123156.png)\n\n![进入设置](picture\u002FPasted%20image%2020260427123838.png)\n\n在 Domains 选项卡中，输入你购买的域名（例如我的是 `xinghuisama.top`），点击 **Add** 保存：\n\n![输入域名](picture\u002Fafb9fe5f-bf1e-4a8a-ae6b-379938f0924d.png)\n\n添加后，Vercel 会提供 `A` 记录和 `CNAME` 记录的配置参数。请将这些参数完整添加到阿里云的 DNS 解析设置中：\n\n![添加记录](picture\u002FPasted%20image%2020260427124533.png)\n\n> **注意**：添加记录时，请务必仔细核去记录类型和记录值（Value）！\n\n配置完成后等待几分钟（DNS 传播需要时间），在 Vercel 页面点击 **Refresh** 刷新状态！！\n\n![Refresh](picture\u002FPasted%20image%2020260427124625.png)\n\n当状态显示为正常后，你就可以通过自己的专属域名访问博客了！（例如：`www.xinghuisama.top`）。\n\n---\n\n## 二、更新设置及上传文件\n\n为了保护数据安全，本控制台采用了**“操作暂存区”**机制。**请特别注意！！** 许多设置在修改后，必须主动执行“更新到本地”才能真正保存。需要执行此操作时，界面上方通常会有高亮提示。\n\n**操作示例：修改个人简介**\n\n![修改简介](picture\u002FPasted%20image%2020260427125314.png)\n\n修改内容后，点击 **[暂存到操作队列]**：\n\n![暂存队列](picture\u002FPasted%20image%2020260427125430.png)\n\n此时上方工具箱会提示待办操作。你可以随时撤销（清空全部），或者点击 **[更新本地]**。\n\n> ⚠️ 注意：点击“更新本地”后，数据仅仅保存在了你的本地控制台环境中。\n\n如果你希望让这些修改在前端博客页面生效，你必须继续点击 **[同步 Blog]**（前提是前端博客的物理路径已正确配置）：\n\n![同步Blog](picture\u002FPasted%20image%2020260427125800.png)\n\n博客文章、说说（碎碎念）、杂谈等所有内容的发布与修改，均遵循此流程。\n\n> **💡 黄金法则**：暂存队列 -> 更新本地 -> 同步Blog\n\n---\n\n## 三、如何推送你的修改到线上网页？\n\n当你在本地完成了满意的创作或设置调整，想要将其发布到公网让所有人看到时：\n\n请牢记，在执行了任何实质性修改并点击 **[同步Blog]** 后，请打开控制台的同步部署页面：\n\n![打开同步](picture\u002FPasted%20image%2020260427130216.png)\n\n确认“B线”地址正确无误，点击 **[仅同步源码]**。\n等待 GitHub Actions 或 Vercel 自动捕获更新。稍作喝杯茶的功夫，你就能在线上页面看到最新鲜的内容了！\n\n---\n\n## 四、图床配置\n\n为了优化写作体验，控制台深度整合了图床上传功能。本指南推荐使用“去不图床”（[https:\u002F\u002F7bu.top](https:\u002F\u002F7bu.top)）。\n如果你习惯使用纯外链，工具台也完美支持直接插入图片 URL。如果想接入其他支持标准 API 的图床，也欢迎极客们自行尝试。\n\n**配置流程：**\n\n![图床配置](picture\u002FPasted%20image%2020260427124930.png)\n\n填入对应的 API Token 等信息后，你可以点击 **[发送探针测试Token]**，实时检验图床接口是否畅通。\n\n---\n\n## 五、AI 猫猫助理设置\n\n博客系统内置了一只聪明的 AI 猫猫助理（默认接入 Gemini 模型）。极客玩家也可以通过修改源码接入其他大语言模型。\n\n首先，你需要申请一个 Gemini 的 API Key（申请教程网络资源丰富，在此不赘述）。拿到 API Key 后，在控制台进行如下配置：\n\n![猫猫设置](picture\u002FPasted%20image%2020260427134211.png)\n\n在本地设定好猫猫的专属系统提示词（性格）后，我们需要让线上环境也拥有调用 AI 的能力。请登录 Vercel：\n\n![Vercel环境](picture\u002FPasted%20image%2020260427134538.png)\n\n在项目设置中找到 `Environment Variables`（环境变量）：\n\n![搜索变量](picture\u002FPasted%20image%2020260427134633.png)\n\n进入你的博客工程详情：\n\n![项目工程](picture\u002FPasted%20image%2020260427134703.png)\n\n确保作用域（环境）包含线上环境，点击 **Add Environment Variables**：\n\n![添加变量](picture\u002FPasted%20image%2020260427135004.png)\n\n安全地注入你的密钥：\n\n- **Key** 输入：`GEMINI_API_KEY`\n- **Value** 输入：你的真实 API 密钥\n\n![输入API](picture\u002FPasted%20image%2020260427135044.png)\n\n点击保存。下一次重新部署时，猫猫助理就会在线上苏醒了。\n\n---\n\n## 六、评论系统配置\n\n本博客的评论系统基于 GitHub Issues（Gitalk 等类似方案）。你需要在 GitHub 创建一个 **Public（公开）** 仓库来专门存储网友的留言。\n\n在控制台评论设置中，填入你的 GitHub 用户名以及这个公开仓库的名称：\n\n![评论设置](.\u002Fpicture\u002FPasted%20image%2020260427135357.png)\n\n**接下来，配置 OAuth 授权以允许访客登录留言：**\n\n1. 登录 GitHub，点击右上角个人头像，进入 **Settings**（设置）。\n2. 滑动到左侧菜单栏最底部，点击 **Developer settings**。\n3. 在左侧选择 **OAuth Apps**，点击右上角的 **New OAuth App**。\n\n**关键应用信息填写指南：**\n\n\n| 字段名称                       | 填写建议                                                                           |\n| ------------------------------ | ---------------------------------------------------------------------------------- |\n| **Application name**           | 自定义名称，例如：`My-Blog-Comments`                                               |\n| **Homepage URL**               | 你的博客**首页完整地址** (例如 `https:\u002F\u002Fwww.xinghuisama.top`)                      |\n| **Application description**    | 可选填                                                                             |\n| **Authorization callback URL** | **核心参数**：必须填写你的博客域名。如果经常本地调试，可填 `http:\u002F\u002Flocalhost:3000` |\n\n**提取核心密钥：**\n\n1. 提交注册（Register application）。\n2. 在跳转页面即可看到 **Client ID**，这是所需的第一项数据。\n3. 点击下方的 **Generate a new client secret** 生成密钥。\n4. **🚨 立刻将这串密钥复制并妥善保存！** 出于安全机制，离开此页面后该密钥将永远隐藏。\n\n将这组 `Client ID` 和 `Client Secret` 准确填入控制台的对应栏目中，保存即可激活评论功能。\n\n---\n\n## 七、网易云音乐挂件设置\n\n![歌单设置](picture\u002FPasted%20image%2020260427141049.png)\n\n想给博客配上 BGM 吗？\n通过电脑浏览器打开 **网易云音乐网页版**。搜索并进入你喜欢的歌曲详情页，观察浏览器地址栏，URL 中的数字即为歌曲的专属 ID：\n\n![网易云ID](picture\u002FPasted%20image%2020260427141235.png)\n\n将这串 ID 复制并粘贴到控制台的搜索框中，即可一键将该歌曲收录进你的博客歌单库！\n\n![添加歌曲](picture\u002FPasted%20image%2020260427141356.png)\n\n---\n\n## 写在最后\n\nXHBLogs 还有诸多隐藏的细节功能，期待极客朋友们在实际使用中慢慢探索。本项目旨在提供一套开箱即用的前端静态展示与后台管理方案。如果你是资深开发者，觉得控制台操作仍有优化空间，完全可以基于 Next.js 源码进行二次开发，甚至手搓 Markdown 进行部署！\n\n**如果你觉得这个项目对你有帮助，请务必在 GitHub 上为我点亮一颗 ⭐ Star！每一颗星都是博主持续维护更新的最大动力。谢谢大家！**\n\n## 许可证\n\n[![License: CC BY-NC 4.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-CC%20BY--NC%204.0-lightgrey.svg)](https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc\u002F4.0\u002F)\n\n> 本项目采用 [CC BY-NC 4.0](https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby-nc\u002F4.0\u002F) 许可协议。允许免费学习、分享和二次修改后发布（二次开源发布需提及原作者），但**严禁用于任何商业用途**。\n","XHBlogs 是一个采用 Next.js 构建的高颜值、毛玻璃风格个人博客系统。该项目提供了完善的前端展示界面和独立的本地后台控制台，支持 Markdown 沉浸式写作、草稿管理和便捷的图床配置，并新增了移动端适配功能。其核心特点包括美观的 Glassmorphism 设计、用户友好的后台管理以及对 Markdown 的良好支持。XHBlogs 适合那些希望拥有个性化且易于管理博客平台的内容创作者和技术爱好者使用。无论是撰写技术文章还是分享生活点滴，它都能提供流畅舒适的体验。",2,"2026-06-11 03:04:57","CREATED_QUERY"]