本文记录一些使用Hexo过程中遇到的麻烦问题,一般的安装和使用教程可以参考Hexo官方文档,这里就不写了。验证环境为Hexo v3.9.0/NodeJS v10.15.3/Windows 10 1803 x64和Hexo v3.9.0/NodeJS v12.2.0/Ubuntu 18.04 x64。
图片引用问题
问题现象
在post_asset_folder配置为true的情况下,若生成一篇名为test的文章,Hexo会自动帮我们创建test.md和test目录。如果图片test.png放在test目录下,并在test.md中通过
这样的代码引用图片,那么,在安装了hexo-asset-image插件的情况下,Hexo生成的HTML中,图片的引用路径如下:
1 | <meta property="og:image" content="https://www.sfysoft.com/.com//test.png"> |
这个路径是错误的,根本引用不到图片,浏览器就显示不出来。如果没有安装hexo-asset-image插件,生成的HTML中,图片的引用路径如下:
1 | <meta property="og:image" content="https://www.sfysoft.com/2019/06/26/test/test.png"> |
这个路径是正确的,发布后,在浏览器中能正确显示,但一般在Markdown编辑器中显示不了,无法实现所见即所得,如果使用
这样的代码引用,则一般在Markdown编辑器中能即时显示,但生成的文章显示不了,查看文章HTML源代码可以看到,图片引用路径变成了这样:
1 | <meta property="og:image" content="https://www.sfysoft.com/2019/06/26/test/test/test.png"> |
test路径重复了,无法引用到正确的路径。
解决办法
虽然网络上有许多文章提到要安装hexo-asset-image
插件,但真实的情况是,这个插件在使用上述方式引用图片时,并没有按预期工作,而在没有hexo-asset-image
插件的情况下,图片路径也能正确生成。经过研究,发现一种可以正确引用图片的方法:
-
卸载
hexo-asset-image
插件 -
使用

这样的方式,而非
的方式引用图片 -
使用支持设置图片引用根目录的Markdown编辑器来编辑md文件,例如,使用Typora编辑器的话,就可以在md文件的Front-matter部分,加上
typora-root-url: test
这条指令,来指示图片引用的基准目录为文件同级路径test。这样的话,在Typora编辑器中能正确显示图片,生成的HTML中,路径也是对的。
另外,为了解决这个问题,分析了代码,图片路径的生成,是在node_modules/hexo/lib/plugins/helper/open_graph.js
的openGraphHelper
函数中做的,其中有一段images = images.map(path =>...);
的代码做了这个工作,想从源码级解决的话,可以从这里入手。