Hexo实现博客使用本地图片

Posted on Edited on In

links:

  • [[hexo-renderer-marked]]

方法一

  1. 安装插件hexo-asset-image
  2. 修改_config.yml, post_asset_folder: false。将false改为true
  3. 在与md文件同目录下，创建一个同名文件夹，放入需要的图片文件
  4. 在md文件中，这样引用就好了![](file-name.png)

  5. Hexo在生成时

    1. 会自动处理这些图片标签，生成结果：/path_to_post/post_name/iamge-name。例如/2021/08/22/my-post/post123/my-img.png。source目录结果如下：
      |—source

       |--post123.md
 |--post123
     |--my-img.png

    2. Hexo的hexo-asset-image插件自动扫描目录，将md同目录下，与md文件同名的目录，拷贝到最终生成的index.html相同层级的目录下。
      |—public

       |--2021
     |--08
         |--22
             |--post123
                 |--index.html
                 |--my-img.png

同时，md文件里通过![](my-img.png)一样也可以访问到。

方法二

没试过，仅作参考

《如何在Hexo中添加本地图片 | BiuBiu》

以上方法可以解决本地图片上传和引用的问题，但是在每个文章下建立资源文件夹好处是分类清楚，缺点是图片复用不方便，也不符合网站设计的一般规范。

所以我们可以第二种方案：

  • 在本地source中建立img文件夹，将引用到的图片全部放在此文件夹中。这样操作也便于图片的复用。
  • 注意，采用这种方法时无需修改_config.yml,也无需安装hexo-asset-image

参考文献