Hexo + anzhiyu 主题部署问题记录

1：SSH 链接失败

背景

在家通过 SSH 推送内容原本正常，部署 anzhiyu 主题后，推送最新文章时出现报错，无法连接。

1
2
$ kex_exchange_identification: read: Software caused connection abort
banner exchange: Connection to 20.205.243.166 port 22: Software caused connection abort

报错信息

1
2
$ kex_exchange_identification: read: Software caused connection abort
banner exchange: Connection to 20.205.243.166 port 22: Software caused connection abort

排查与解决步骤

  1. 测试 GitHub SSH 连接
    先验证是否能正常连接 GitHub 的 SSH 服务器，执行命令：

    1
    ssh -T git@github.com

    结果仍报错，确认是网络连接问题：

    1
    2
    kex_exchange_identification: read: Connection reset
    Connection reset by 20.205.243.166 port 22

  2. 排除网络环境问题
    切换为手机热点（怀疑校园网屏蔽 22 端口，因此前在江西无此问题），测试后问题依旧；且测试电脑其他网络功能正常（大概）。

  3. 临时解决方案：改用 HTTPS 推送
    修改 _config.yml 文件中的部署仓库地址，将 SSH 地址替换为 HTTPS 地址：

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/yourname/yourname.github.io.git  # 替换为自己的仓库地址
      branch: main

  4. 重新尝试推送
    执行 Hexo 部署命令，成功推送：

    1
    hexo c && hexo g && hexo d

    暂不深入排查 SSH 问题，后续再处理

2.图片的显示问题

2.1网站图片显示

背景

  • 不理解网站图片（如小 icon）的显示逻辑，原项目用在线图床，想改用本地文件；
  • 填写本地图片相对路径后，显示异常。

解决思路

当前已通过另一篇文章找到解决方案，参考以下教程：

2.2即刻页面的图片显示错误

关键是贴文用在线图床的是没问题的，到底是哪里有问题？

image-20251102151041563

原因

  • 有些图片链接过期了，毕竟找到网图不稳定

  • 这个yml文件要求极其的严格，必须按照要求格式，不然就会渲染失败。我真的没招了

3.参考教程太少了

可能是我看的内容不对？
官网的示例文档写的太不小白了
对于我这种连markdown都写不明白的人来说还是太难了
其实目前最主要的一个问题是我对于项目结构了解程度太低了
不仅仅是anzhiyu这个主题，更是重要的是对hexo这个项目不清楚，导致配置时容易混乱。

4.头像显示一直有问题

背景

  • 目前正在使用 “律队” 头像；

  • 网站内部帖文的头像显示正常，但网站加载页（loading 页）的头像一直不显示。

    奇怪我看了看源码，这两个明明用的是一个图

相关配置与代码

1.头像配置（_config.anzhiyu.yml）

1
2
3
4
\# Avatar (头像)配置项
avatar:
 img: /img/avatar/Avatar.jpg
 effect: false #头像是否旋转

2.Loading Animation (_config.anzhiyu.yml)

1
2
3
4
5
6
7
8
9
10
11
# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
  avatar: /img/avatar/Avatar.jpg #已经改正确了喵

3.加载页头像逻辑（代码文件）

加载页头像的代码位于 themes\anzhiyu\layout\includes\loading\fullpage-loading.pug，逻辑如下：

1
2
3
4
5
- loading_img = theme.preloader.avatar ? theme.preloader.avatar : theme.avatar.img
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    img.loading-img(alt="加载头像" class='nolazyload' src=url_for(loading_img))
    .loading-image-dot

代码逻辑解析

  • 如果配置了 theme.preloader.avatar，就优先用它作为加载页的头像；

  • 否则，就回退到 theme.avatar.img 里配置的头像（这里就是 /img/avatar/Avatar.jpg）。

  • 也就是说，加载页面的头像可以单独配置一张图，不配的话就复用主头像。

问题定位

发现问题所在了，原来是因为我手🗡配置项preloader其中的avatar路径写错了，所以头像出不来。按F12查看发现：

1
<img class="loading-img nolazyload entered loading" alt="加载头像" src="/%5Csource%5Cimg%5Cai.png" data-ll-status="loading">

而/%5Csource%5Cimg%5Cai.png是image-20250915234916884
实在是难绷

最后把头像的原图发下

7a368bc9d627387fd3b13350059d175a

小 Issue 集合

  • Hexo 命令缩写失效：执行 hexo g（generate 缩写）推送失败，需改为完整命令 hexo generate。

    原因：安装追番组件后产生冲突
    解决方案：输入缩写时多写一个字母（如 hexo ge）即可正常执行。

  • 贴文背景显示控制：主要指cover这个参数应该如何填写本地路径，搞了半天我还是不明白

    事实上本地路径的引用对于封面也是完全没有问题的，就是图片推送到GitHub上老是失败😅😅😅

  • 网站背景显示：这个也不会喵

  • categories：Hexo:分类页Hexo一直显示404网址，主要是其他categorie没有问题，就Hexo有问题，最后在远程仓库发现了问题

    原来是github远程仓库的名字还是hexo而不是Hexo，导致定位网址categories/Hexo/时失败出现404，尴尬的是无论怎么推送都无法解决问题
    于是先改名成Hexoo再改回Hexo,曲线救国了是。