Hexo|提取Wallpaper Engine壁纸作为AnZhiYu主题首页动态封面

Wallpaper Engine 里有太多好看的动态壁纸了，有没有想过把它们搬到自己的 Hexo 博客上作为首页 Banner？
这篇文章将记录全过程：从 Wallpaper Engine 提取视频资源，并硬核修改 AnZhiYu 主题源码，让它原生支持 MP4 视频封面播放。

1. 导出 Wallpaper Engine 壁纸

首先在 Wallpaper Engine (Steam版) 中挑选一个喜欢的壁纸（最好是视频场景类的）。

  1. 在壁纸库中右键点击壁纸。
  2. 选择 发送至移动设备 -> 导出 .mpkg 文件。
  3. 导出完成后，将获得一个 .mpkg 文件，手动将其后缀名修改为 .pkg。

2. 使用 RePKG 提取视频资源

MPKG/PKG 本质是加密或打包的格式，我们需要专用工具将其解包。

  1. 下载开源工具 RePKG-GUI。
  2. 解压并打开应用程序，按照 GUI 界面指引，将上一步的 .pkg 文件拖入。
  3. 点击 输出 (Extract)。
  4. 在输出目录中，你通常能找到一张预览图和一个高质量的 .mp4 视频文件。

3. 魔改主题源码 (核心步骤)

AnZhiYu 主题默认的首页 Banner 逻辑仅针对图片 (<img> 标签)。为了让它兼容视频，我们需要修改底层的 Pug 模板引擎代码。

定位文件：themes/anzhiyu/layout/includes/top/top.pug

找到渲染 todayCard-cover 的位置（大约在文件末尾部分），将原有的 img 标签逻辑替换为如下代码：

1
2
3
4
5
//- 识别 .mp4 结尾的链接，渲染为 video 标签
if top_group_banner_image.toLowerCase().endsWith('.mp4')
  video.todayCard-cover(src=url_for(top_group_banner_image) autoplay loop muted playsinline style='object-fit: cover;')
else
  img.todayCard-cover(src=url_for(top_group_banner_image) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt='封面')

原理说明：
这段代码通过判断我们在配置文件中填写的路径是否以 .mp4 结尾，来智能决定是渲染普通的图片标签，还是带有 autoplay 属性的视频标签。

4. 部署与配置

万事俱备，最后只需要把资源放进去并开启配置。

  1. 移动文件：将提取出的 wallpaper.mp4 放入博客源文件夹，例如 source/mp4/wallpaper.mp4。
  2. 修改配置：编辑 _config.anzhiyu.yml，定位到 home_top -> banner。
1
2
3
4
5
6
7
home_top:
  banner:
    tips: 享受动态的快乐
    title: Wallpaper Engine
    # 这里直接填写视频的路径
    image: /mp4/wallpaper.mp4
    link: /
  1. 预览：执行 hexo clean && hexo s，刷新首页，你应该能看到封皮已经动起来了！

Tips: 建议视频文件不要过大（建议压缩在 5MB 以内），否则会影响网站首屏加载速度。