Hexo使用问题与解决方法

本文记录一些使用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中通过![test](test.png)这样的代码引用图片,那么,在安装了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编辑器中显示不了,无法实现所见即所得,如果使用![test](test/test.jpg)这样的代码引用,则一般在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插件的情况下,图片路径也能正确生成。经过研究,发现一种可以正确引用图片的方法:

  1. 卸载hexo-asset-image插件

  2. 使用![test](test.png)这样的方式,而非![test](test/test.jpg)的方式引用图片

  3. 使用支持设置图片引用根目录的Markdown编辑器来编辑md文件,例如,使用Typora编辑器的话,就可以在md文件的Front-matter部分,加上typora-root-url: test这条指令,来指示图片引用的基准目录为文件同级路径test。这样的话,在Typora编辑器中能正确显示图片,生成的HTML中,路径也是对的。

另外,为了解决这个问题,分析了代码,图片路径的生成,是在node_modules/hexo/lib/plugins/helper/open_graph.jsopenGraphHelper函数中做的,其中有一段images = images.map(path =>...);的代码做了这个工作,想从源码级解决的话,可以从这里入手。