hexo&马克飞象图片不能正常显示问题

楼主发现马克飞象写的文章虽然可以markdown导出,但是如果文章中有插图的话,却是生成一个.zip的压缩文件,如果直接把这个压缩文件解压缩放到 source_posts 目录下,使用 hexo s 可以发布,但是图片不能正常显示。

楼主忙活了大半天,找到了一个 hexo 插件hexo-asset-image,这个东西的使用方法如下:

Step 1:

  • 安装hexo-asset-image,只需要在命令行中输入下列命令,就可以安装好。
    1
    npm install hexo-asset-image --save

    Step 2:

  • 修改hexo配置文件
    1
    2
    3
    url: https://github.com  

    post_asset_folder: true

    对于这个 url 参数: 这个参数会用来定位图片的路径,可以影响 md 生成 html 的图片路径 如果你博客不是部署到github仓库的master branch下,会有所区别,这个逻辑有点复杂,楼主这里就不啰嗦了,如果不清楚可以自行改变这个值,然后看 hexo 发布网页中图片路径,或者看 hexo-asset-image 的源码 楼主使用的是master branch,所以这样写就好了,楼主博客的github 地址是 https://github.com/KnightDevelop/knightdevelop.github.io

    Step 3:

  • 马克飞象导出markdown Alt text
  • 导出的markdown解压缩,解压缩之后大概是这样的 Alt text
  • 然后把这个文件夹里的 .md 文件剪切到到 source_posts;把这个文件夹扔到 source_posts 下,注意文件夹名称和刚才剪切的 .md文件 保持一致 Alt text

    Step 4:

  • hexo clean
  • hexo g
  • hexo s -p 5000
  • 浏览器访问 http://localhost:5000/
  • 图片显示正常 Alt text 大功告成
|