一、准备工作：选对头像 + 放对位置

头像图片要求（避免显示异常）
格式：支持 jpg/png/webp（推荐 png，透明背景更适配主题）；
尺寸：建议 200x200 或 300x300（正方形，侧边栏显示更协调）；
命名：简单易记，比如 avatar.png（避免中文 / 特殊字符，防止路径报错）。
存放图片（二选一，推荐本地存放，稳定不失效）
方式 1：本地存放（推荐）
打开你的博客目录：C:\Users\qaz18\myblog\themes\butterfly\source；
在 source 文件夹下，新建一个 img 文件夹（如果已有就不用建）；
把准备好的头像图片（比如 avatar.png）复制到 img 文件夹里。
最终路径：C:\Users\qaz18\myblog\themes\butterfly\source\img\avatar.png
方式 2：在线图片（适合不想存本地的情况）
把头像上传到图床（比如阿里云 OSS、GitHub、Imgur），复制图片的直接访问链接（结尾是 jpg/png/webp 的完整 URL，比如 https://xxx.com/avatar.png）。
二、核心步骤：修改主题配置文件
打开 Butterfly 主题的配置文件：
找到 C:\Users\qaz18\myblog\themes\butterfly_config.yml（是主题文件夹里的 _config.yml，不是根目录的！）；
搜索 avatar 关键词（直接用 Ctrl+F 搜索，快速定位）；
按以下格式修改配置（二选一，对应上面的图片存放方式）：
方式 1：本地图片配置（推荐）
yaml
avatar:
img: /img/avatar.png # 路径对应「themes/butterfly/source/img/avatar.png」，不用写前面的路径
effect: false # 可选：true=鼠标hover时头像旋转，false=不旋转（新手建议关，更简洁）
rounded: true # 可选：true=圆形头像（默认），false=方形头像
border: true # 可选：true=显示头像边框（适配你的红白配色，更协调）
方式 2：在线图片配置
yaml
avatar:
img: https://xxx.com/avatar.png # 替换成你的在线图片URL
effect: false
rounded: true
border: true
✅ 关键注意：
配置里的 img 路径 / URL 要写对，不能多空格、不能漏后缀（比如 .png）；
YAML 语法要求：img: 后面必须带一个空格，缩进用 2 个空格（和其他配置保持一致，避免报错）。
三、验证效果：让头像生效
保存 _config.yml 配置文件；
打开 CMD 进入博客目录，执行命令（清空旧缓存，让配置生效）：
bash
运行
cd C:\Users\qaz18\myblog
hexo clean # 清空缓存（必做）
hexo generate # 重新生成网页
hexo server -p 4001 # 启动预览
访问 http://localhost:4001，就能看到侧边栏的头像已经替换成你的图片啦！
四、常见问题排查（头像不显示？看这里）
路径错了：本地图片必须放在 themes/butterfly/source/img，配置里写 /img/头像名.格式（不用带 themes/butterfly/source）；
文件名有中文：比如头像.png 改成 avatar.png，中文路径会导致 Hexo 解析失败；
没清缓存：修改配置后必须执行 hexo clean，否则会显示旧头像；
在线图片失效：检查 URL 是否能直接打开，确保图片没被删除 / 私密。
五、进阶：调整头像样式（可选）
如果想改头像大小、边框颜色（适配你的红白配色），可以这样弄：
打开 themes/butterfly/source/css/_layout/aside.styl；
找到 .avatar-img 相关代码，修改如下（示例：调整大小 + 红色边框）：
styl
.avatar-img
width: 120px # 头像大小（默认110px，改大改小都可以）
height: 120px
border: 2px solid #E53935 # 红色边框（和你的主题主色一致）
border-radius: 50% # 圆形头像（不想圆就改成 0）
保存后重新执行 hexo clean && hexo generate，刷新页面就能看到效果。

如何更改博客头像

以下保留你的文章正文内容