Ayer主题修复图片显示

起因是我突然发现，我目前使用的这个博客网站的图片无法显示了，查阅了原主题作者的开源链接，Ayer，发现原作者已经在2022年就停止更新，图片无法显示的问题一直没能修复。查阅了一年以来的fork也没有人解决这个问题，于是我出手了（不是）

我也fork了原主题项目，更名为Ayerr，开始bug修复和高强度自定义设置，打算以后一直更新下去。

总之这是一篇更新日志，v1.0，来记录这个衍生主题Ayerr的首次更新：修复原主题Ayer无法显示图片的问题。

✨ 同时也欢迎一起更新！项目地址：https://github.com/Morlvoid/hexo-theme-ayerr

为 Hexo 主题 Ayer 修复图片显示问题

1. 修复内容说明

1.1 问题描述

Ayer 主题原作者已经停止更新，主题中存在图片显示问题，无法正常使用 {% asset_img %} 标签和传统 Markdown 语法添加图片。

1.2 修改文件列表

文件路径	修改内容
scripts/asset-image.js	新增文件，实现 {% asset_img %} 标签支持
README.md	更新文档，添加图片使用说明
package.json	更新主题名称和相关信息
_config.yml	更新配置，简化菜单

1.3 核心修复代码

scripts/asset-image.js

// 注册 {% asset_img %} 标签 
const { join } = require('path'); 

hexo.extend.tag.register('asset_img', function(args) { 
    // 解析参数，例如：{% asset_img demo.jpg "图片描述" %} 
    const img = args[0]; 
    const alt = args.slice(1).join(' ') || ''; // 支持带空格的描述文字 
    
    // 获取当前上下文 
    const ctx = this; 
    let imgPath = img; 
    
    // 如果是绝对路径或外部链接，直接返回 
    if (/^(?:https?:\/\/|\/)/.test(img)) { 
        return `<img src="${img}" alt="${alt}" class="article-img">`; 
    } 
    
    // 构建正确的图片路径 
    // 对于文章资源，使用相对路径 
    const post = ctx.post || ctx.page; 
    if (post && post.asset_dir) { 
        // 对于文章内的资源，直接使用文件名即可，Hexo 会自动处理路径 
        imgPath = img; 
    } 
    
    // 手动构建图片 URL，避免使用可能出现问题的 url_for 辅助函数 
    // 直接使用根路径 + 资源路径 
    const src = hexo.config.root + imgPath; 
    
    // 返回标准的 img HTML 标签 
    return `<img src="${src}" alt="${alt}" class="article-img">`; 
}, {async: false, ends: false});

2. 修复后的新主题 Ayerr 安装使用

2.1 安装方法

方法一：直接克隆源代码后移动到theme文件夹中

git clone https://github.com/Morlvoid/hexo-theme-ayerr.git themes/ayerr

方法二：手动下载

1. 从 GitHub 下载主题压缩包
2. 解压到 themes/hexo-theme-ayerr 目录

2.2 启用主题

修改博客根目录的 _config.yml 文件：

theme: hexo-theme-ayerr

2.3 基本配置

启用文章资源文件夹：修改博客根目录的 _config.yml 文件：

post_asset_folder: true

修改theme文件夹下的hexo-theme-ayerr根目录的 _config.yml 文件：

post_asset_folder: true

2.4 更新主题

cd themes/hexo-theme-ayerr
git pull

3. 修复后添加图片的方法

修复图片显示问题后，有两种方法可以为博客添加图片：

3.1 方法一：使用 asset_img 标签

语法格式

{% asset_img 图片文件名 "图片描述" %}

使用示例

{% asset_img demo.png "这是使用 asset_img 标签的图片" %}

特点

• 专为文章资源文件夹设计
• 自动处理图片路径
• 生成带有 article-img 类的图片标签
• 支持带空格的描述文字
• 无需手动拼接图片路径

3.2 方法二：使用传统 Markdown 语法

语法格式

![图片描述](图片文件名)

使用示例

![这是使用传统 Markdown 语法的图片](demo.png)

特点

• 标准 Markdown 语法，兼容性好
• 简洁易记
• 自动处理文章资源文件夹中的图片
• 支持描述文字

3.3 图片存放位置

将图片放在与文章同名的资源文件夹中，例如：

source/_posts/
├── test.md
└── test/
    └── demo.png

如果要在其他页面中存，例如about.html，也需要新建一个与index同名的文件夹，例：

source/about/
├── index.md
└── index/
    └── demo.png

3.4 注意事项

1. 图片格式：支持常见的图片格式，如 PNG、JPG、GIF 等
2. 图片尺寸：建议使用适当尺寸的图片，避免过大影响加载速度
3. 图片命名：避免使用中文和特殊字符，建议使用英文和数字
4. 启用文章资源文件夹：确保在博客根目录的 _config.yml 中启用 post_asset_folder: true

4. 修复效果验证

4.1 生成测试

hexo clean
hexo g

4.2 服务器测试

hexo s

4.3 预览效果

• ✅ {% asset_img %} 标签正常工作
• ✅ 传统 Markdown 语法正常工作
• ✅ 图片 URL 格式正确
• ✅ 图片显示样式优化

5. 主题特色

5.1 新增功能

• ✅ 修复了图片显示问题
• ✅ 支持 {% asset_img %} 标签
• ✅ 支持传统 Markdown 语法
• ✅ 优化了图片显示样式
• ✅ 简化了侧边栏菜单

5.2 主题配置

• 支持响应式设计
• 支持多语言
• 支持黑夜模式
• 支持代码复制功能
• 支持文章字数统计
• 支持多种评论系统

6. 常见问题

6.1 图片不显示怎么办？

1. 检查文章资源文件夹是否启用
2. 检查图片是否放在正确的资源文件夹中
3. 检查图片路径是否正确
4. 清理缓存并重新生成

6.2 如何添加多个图片？

{% asset_img demo1.png "图片 1" %}
{% asset_img demo2.png "图片 2" %}
{% asset_img demo3.png "图片 3" %}

6.3 如何调整图片大小？

可以在 Markdown 中直接添加 HTML 标签：

<img src="demo.png" alt="图片" style="width: 50%;">

7. 贡献与反馈

• 项目地址：https://github.com/Morlvoid/hexo-theme-ayerr
• 欢迎提交 Issue 和 Pull Request
• 如有问题，可在 GitHub 上创建 Issue 反馈

8. 许可证

本项目基于原作者的 SATA 许可证，在遵守 MIT 许可证的前提下，你应该马不停蹄的给这个开源项目“点个赞”，比如 github 右上角的 star，然后你应该感谢这个开源项目的作者。

---

修复人：Morlvoid
修复时间：2026-01-14