Hexo-Theme-MK：经典重铸，从 WordPress 到 Hexo 的华丽转身

一直以来，mkBlog（孟坤博客主题）都是 WordPress 圈子里的一股清流：清新、功能强大且自带“说说”碎碎念功能。

然而，随着静态博客的兴起，Hexo 以其极致的访问速度、零成本部署（GitHub Pages/Vercel）和极高的安全性吸引了无数开发者。为了结合两者的优点，我决定将这款经典主题移植到 Hexo 平台，并命名为 Hexo-Theme-MK。

这不仅仅是一次简单的 UI 搬运，更是一次从动态（PHP）到静态（Node.js）的底层架构重构。以下是本次迁移的保留特性与核心升级清单。

🎨 完美复刻：我们保留了什么？

在视觉和核心体验上，我致力于做到“原汁原味”，让老用户没有任何陌生感。

1. 经典的 UI 设计语言

• 配色与布局：保留了标志性的 #eb5055 主题色，以及清新简约的排版风格。
• 双模式切换：完美复刻了首页的 列表模式 (List) 和 **卡片模式 (Card)**。特别是在卡片模式下，鼠标悬停图片变暗并显示摘要的经典交互效果得以保留。
• 细节交互：导航栏自动隐藏 (Headroom)、返回顶部按钮、侧边栏逻辑等细节体验均未缺席。

2. 招牌功能：“说说”碎碎念

这是 mkBlog 的灵魂功能，也是很多博主舍不得离开 WordPress 的原因。在 Hexo 版中：

• 我们完整保留了气泡式的时间轴布局。
• 保留了经典的多彩气泡算法（蓝、灰、绿循环变色）。
• 保留了说说单页的独立样式（头像、气泡、评论聚合）。
• 实现方式：利用 Hexo 的 categories 分类机制巧妙实现，发布说说就像写文章一样简单。

3. 实用工具箱

原主题内置的实用工具页面，全部从 PHP 移植为纯前端版本，更加安全高效：

• 在线二维码生成：使用 qrcode.js 本地生成，无后台记录，保护隐私。
• 随机密码生成器：纯 JS 实现，浏览器本地计算。
• 代码高亮转换：前端转换逻辑，方便开发者分享代码。
• 在线壁纸 & 虎牙直播：保留了这两个极其受欢迎的摸鱼页面（后端逻辑已升级，见下文）。

🚀 核心进化：我们升级了什么？

从 PHP (WordPress) 迁移到 Node.js (Hexo)，底层的逻辑发生了翻天覆地的变化，带来了性能和功能的双重飞跃。

1. 评论系统：从原生到 Waline

WordPress 的原生评论系统依赖数据库，不仅慢而且容易被垃圾评论轰炸。

• 升级方案：全站接入 Waline 评论系统。
• 优势：
  • 支持 Markdown 语法，支持表情包。
  • 自带阅读量统计，替代了笨重的 WP-PostViews 插件。
  • 深度定制：我对 Waline 的 CSS 进行了深度覆盖，使其输入框、按钮、列表样式与原 mkBlog 主题完美融合（还原了经典的虚线分割与悬停变色）。
  • 服务端部署在 Vercel，数据存储在 LeanCloud，完全免费且稳定。

2. 动态 API 代理：Cloudflare Workers

原主题的“360壁纸”和“虎牙直播”依赖 WordPress 的 php-curl 进行后端转发，容易拖慢服务器，且存在 HTTPS 混合内容报错的问题。

• 升级方案：使用 Cloudflare Workers 进行 Serverless 代理。
• 优势：
  • 全球加速：利用 Cloudflare 的边缘网络，API 响应速度极快。
  • HTTPS 自动转换：在 Worker 层自动将 360 壁纸接口的 HTTP 图片链接转为 HTTPS，彻底解决浏览器安全警告。
  • 前端直连：Hexo 页面通过 JS 直接请求 Workers，无需经过博客服务器，实现了真正的动静分离。

3. 搜索体验：本地极速搜索

WordPress 的搜索需要查询数据库，每次搜索都是一次服务器请求，速度受限于主机性能。

• 升级方案：集成 Hexo Local Search。
• 优势：
  • 秒级响应：基于生成的 XML 文件进行本地匹配，输入关键词的同时即刻显示结果，无需刷新页面。
  • 关键词高亮：原生支持搜索结果关键词高亮显示。

4. 极致性能优化

• 全站 PJAX：开启了 PJAX 无刷新加载，页面切换如丝般顺滑，音乐播放不中断。
• 资源压缩：接入 hexo-neat，自动压缩 HTML、CSS 和 JS，大幅减小体积，提升加载速度。
• 去数据库化：再也不用担心数据库连接错误（Error establishing a database connection），再也不用担心流量攻击打垮 CPU。

🛠️ 如何安装使用？

1. 下载主题：

   git clone https://github.com/xuduorg/hexo-theme-mk.git
   

2. 安装依赖：

   npm install hexo-renderer-ejs hexo-generator-search --save
   

3. 配置：
   修改博客根目录的 _config.yml，设置 theme: hexo-theme-mk。然后参照主题目录下的 _config.yml 配置菜单、评论和功能开关。

📝 总结

Hexo-Theme-MK 不仅仅是一次移植，更是一次现代化的重构。

它保留了你对 mkBlog 的所有美好记忆——那些气泡、那些卡片、那些实用的工具；同时，它甩掉了 WordPress 沉重的历史包袱，拥抱了静态网站的极速与安全。

如果你喜欢记录生活，喜欢轻量级的博客体验，那么 Hexo-Theme-MK 将是你的不二之选。

项目现已开源，欢迎 Star 与 Fork！
点击查看项目地址