一、 交互减法：摒弃传统菜单

在移动端优先的设计理念下，原本复杂的顶部导航菜单显得有些冗余。为了追求极致的沉浸感，我做了一个大胆的决定：隐藏传统菜单，重构全局导航逻辑。

1.1 设计理念：iOS 风格的全局“后退”

参考 iOS 原生应用的交互逻辑，当用户进入深层页面（如文章页或专栏页）时，最自然的动作是“返回上一页”，而不是去点击复杂的面包屑导航。

我编写了 cook_nav_replace.js，实现了以下逻辑：

  1. DOM 隐藏：隐藏主题原有的 #nav .menus_items。
  2. 动态注入：在页面左上角挂载一个磨砂玻璃质感的胶囊按钮。
  3. 智能显隐：仅在非首页出现，且适配 PJAX 无刷新跳转。
1
2
3
4
5
6
7
8
9
10
11
12
/* 核心样式预览：磨砂玻璃 + 胶囊圆角 */
#cook-back-menu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    border-radius: 30px;
    z-index: 9999;
    /* 交互细节 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

现在的导航栏，左上角常驻“< 返回前一页”，配合底部的动态波浪，视觉干扰降到了最低。

二、 视觉加法：GitHub Pro 仪表盘 (Bento Grid)

为了全面展示开源贡献，我不再满足于单一的 Contribution Graph。我希望将 个人资料、核心数据 (Stars/Commits)、语言分布、活跃趋势 整合在一个面板中。

2.1 布局架构：CSS Grid 实战

我封装了 github_cook 插件，采用了 Apple 经典的 Bento Grid (便当盒布局)：

  • 容器：max-width: 800px 的磨砂玻璃卡片。
  • 上半部：双列布局 (grid-template-columns: 1.2fr 0.8fr)。左侧展示核心数据 (Stats)，右侧展示语言占比 (Top Langs)。
  • 下半部：全宽展示动态波浪折线图 (Activity Graph)。

2.2 深色模式的“智能反转”

在测试中发现，GitHub API 生成的 SVG 图片默认是黑字的。当博客切换到深色模式时，黑色文字在深灰背景上几乎不可见。利用 CSS 滤镜进行色相旋转与反色：

1
2
3
4
5
6
/* 深色模式适配黑魔法 */
[data-theme="dark"] .gh-img-wrapper img {
    /* 1. invert(1): 将黑色文字变白，白色背景变黑 */
    /* 2. hue-rotate(180deg): 把被反转的蓝色图表颜色修正回来 */
    filter: invert(1) hue-rotate(180deg);
}

三、 核心攻坚：解决 API 国内“裂图”问题

这是本次更新中耗时最久的部分。

3.1 问题现象

部署后发现，Stats 和 Langs 的图片频繁加载失败（404 或超时），只有开启特定网络环境才能显示。原因是 github-readme-stats.vercel.app 域名在国内受限。

3.2 解决方案：自建反代 + 自定义域名

步骤一：Fork 与部署 Fork 开源项目 github-readme-stats 到自己的 GitHub 仓库，并将其部署到私有的 Vercel 账号下。

步骤二：绑定自定义域名 在阿里云 DNS 配置一条 CNAME 记录，将二级域名指向 Vercel：

记录类型 主机记录 记录值
CNAME stats https://www.google.com/search?q=cname.vercel-dns.com

步骤三：配置 GitHub Token (PAT) 私有部署实例需要独立权限。在 GitHub 生成 Personal Access Token，在 Vercel 项目设置中添加环境变量：

  • Key: PAT_1
  • Value: ******************************** (此处填入你的 Token)

步骤四：修改插件源 将 github_cook.js 中的 API 地址指向新域名：

1
2
// const baseUrl = '[https://github-readme-stats.vercel.app](https://github-readme-stats.vercel.app)'; // 旧地址 (访问受限)
const baseUrl = '[https://stats.dafenqiarch.xyz](https://stats.dafenqiarch.xyz)'; // 自建私有地址 (直连秒开)

四、 工具栈与环境配置总结

工具/服务 用途 关键配置点
CSS Grid 仪表盘布局 grid-template-columns 实现响应式分栏
CSS Filter 夜间模式适配 invert(1) hue-rotate(180deg)
Vercel API 托管 自建 github-readme-stats 实例
Aliyun DNS 域名解析 CNAME 接入实现国内直连加速
GitHub PAT 鉴权令牌 解决 API 速率限制问题

五、 踩坑日记 (Debug Log)

5.1 Vercel 环境变量不生效

现象：添加了 PAT_1 后，API 依然报错。 解决：Vercel 环境变量在构建时注入。添加后必须点击 Redeploy 且不勾选 “Use existing Build Cache” 才会生效。

5.2 Hexo 缓存导致的“假死”

现象：修改了 JS 代码但预览无变化。 解决：Hexo 会缓存插件渲染结果。执行：

1
hexo clean && hexo g && hexo s

5.3 层级遮挡 (Z-Index)

现象：新的返回按钮无法点击。 解决：给底层波浪特效设置 pointer-events: none，并提升返回按钮的 z-index。

六、 结语

从一行行代码的提交，到屏幕上这个精致的 Bento Grid，这不仅是数据的展示，更是对开源精神的一种致敬。现在，我的博客既有了算法的深邃，也有了工程的广度，技术画像终于完整了。

Keep Coding, Keep Building.