Hexo生成新版静态文件时,图片没有被拷贝到public目录的问题

本文最后更新于:3 个月前

问题描述

搭建起来Hexo站点后,肯定会新增图片,比如favicon.png,avatar.png等,类似这样的文件需要集中放置在 ${hexo root}/source/img/ 下,当有和 Theme/img/ 重名的文件时,source下的文件优先级最高,实现上应该是copy顺序的安排。这样的设计是合理的,自定义文件集中放置在source目录,管理起来直观。但当执行hexo g后,一些预期需要copy到public目录下的图片并没有如期而至,哪里出了问题?

问题排查

  • 怀疑因为db.json的缓存机制导致copy没有执行,所以先执行hexo clean,再执行 hexo g,问题没有解决
  • 进入source/img看看文件是否正常,似乎没问题,但属性列被加上 **@**,这些图片是从浏览器下载的,被附加了额外的属性,可能因为潜在安全问题导致copy失败
  • 删除附加属性后再次执行hexo g,问题依旧
  • 通过增加 --debug 查看执行过程,发现每次都是先拷贝 source/img 再拷贝 theme/img 这会导致如果两个目录有相同的文件名,则theme下的最后生效,但这明显与预期相反
  • 跟踪代码,果然发现了问题,需要修改 node_modules/hexo/lib/hexo/index.js#318 将如下代码
1
2
3
4
return Promise.all([
this.source.process()
, this.theme.process()
]);

修改为正确的顺序,让source目录最后处理,以保证其最高优先级

1
2
3
4
return Promise.all([
this.theme.process(),
this.source.process()
]);

启发思考

  • 之前的经验是网站icon需要设置为 favicon.ico,而现在可以设置为png了,不但方便了,效果也好了很多,需要在head区块内添加如下语句即可
1
<link rel="icon" href="/img/favicon.png">
  • 试着在网上搜了这个问题,没有找到类似的,得空提交一个issue