Hexo|为AnZhiYu主题添加动态视频头像

想要让你的博客侧边栏更加生动吗？相比于静态图片或 GIF，使用高质量的 MP4 视频作为头像不仅清晰度更高，还能实现完美的无缝循环。今天我们就来动手给 AnZhiYu 主题加上这个酷炫的功能。

核心原理

Hexo 的 AnZhiYu 主题默认使用 img 标签来显示头像。我们需要修改侧边栏作者卡片的模板文件，增加一个判断逻辑：如果配置文件中的头像路径以 .mp4 结尾，就渲染为 <video> 标签，否则保持原样的 <img> 标签。

修改步骤

1. 修改 Pug 模板

找到主题目录下的 themes/anzhiyu/layout/includes/widget/card_author.pug 文件。

我们需要将原本直接输出 img 的代码替换为带有条件判断的逻辑。

修改前：

1
2
.author-info-avatar
  img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")

修改后：

1
2
3
4
5
6
.author-info-avatar
  if theme.avatar.img && theme.avatar.img.endsWith('.mp4')
    video.avatar-img(autoplay loop muted playsinline style="object-fit: cover;")
      source(src=url_for(theme.avatar.img) type="video/mp4")
  else
    img.avatar-img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")

这段代码的作用是：当检测到 theme.avatar.img 配置项以 .mp4 结尾时，自动插入一个静音、自动播放、循环播放的视频标签。

2. 优化 CSS 样式

引入视频头像后，可能会遇到样式问题：

  1. 头像右下角的“状态表情”（比如正在工作、休息中）可能会被视频层级遮挡。

我们需要修改 themes/anzhiyu/source/css/_layout/aside.styl 文件。

修复层级遮挡问题：

找到 .author-status 类，添加 z-index 属性：

1
2
3
4
.author-status
  z-index: 100; /* 确保状态图标在视频上方 */
  position: absolute;
  /* ...其他原有属性... */

配置使用

修改完成后，使用方法非常简单。你只需要准备一个正方形的 MP4 视频（建议比例 1:1，否则会被裁切），放入 source/img/ 或其他资源目录。

然后修改你的配置文件 _config.anzhiyu.yml：

1
2
3
avatar:
  img: /img/your-avatar.mp4
  # img: /img/avatar.jpg  <-- 如果想换回图片，直接改回图片路径即可

重新部署

最后，别忘了三连击：

1
2
3
hexo clean
hexo generate
hexo server

现在打开你的博客，侧边栏的头像应该已经动起来了！