1. 开启post_asset_floder选项
在blog的根目录下,打开整个博客的配置文件,_config.yml,把其中的post_asset_floder选项改为true。
资源文件夹 (post_asset_folder) 是 Hexo 的一项功能。 具体使用方式是在 _config.yml 中修改: post_asset_folder: true 这样子修改之后,当你使用 hexo new 命令创建文件的时候,会生成一个和你的文章同名的文件夹,里面可以放一些资源文件。
在后面的处理中,我们需要将我们的图片文件放到我们博客的.md的同名文件夹下。(这里先暂时不管有什么意义,因为毕竟一般不用new来创建新的.md文件)
2. 更改typora图片的存储格式
在之前的使用中,写markdown文件时,我一般都是直接将图片粘贴过来,使用的是markdown存储图片的默认格式。在默认的模式中,我们粘贴到markdown文件中的图片都会先保存到typora的默认存储位置,然后通过引用标签和图片绝对路径来显示在markdown文件中。这样有两个坏处,
一是存储位置默认在C盘,容易吃系统盘的空间。二是图片文件和markdown文件分离,相隔较远,不容易管理,一旦图片移动,就容易加载不出来,特别是在博客中,当我们将markdown文件上传,当然是访问不到的。
因此,我们可以在typora的图像设置中设置成如上图所示,保存图片的文件夹就用同名文件夹,别改,有坑!!!
这也算是前面将post_asset_floder改为true的原因之一,我们可以将自己写的markdown文件和装有图片的同名文件夹放到_post文件夹下,当我们使用hexo g命令时,便可以将图片和markdown文件传到public文件夹下(根据markdown生成的html文件和其中的图片资源),如果文件夹与对应的markdown文件不同名,图片是传不过去的,更别说访问到图片了,这里搞了我一个小时才发现,血泪教训啊。
3. 安装hexo-asset-img插件
当我们把markdown文件和同名的图片文件夹放到_post文件夹下,并执行hexo clean 和 hexo g命令后,查看public下的文件
可以看到,对应的html文件和图片也都生成了,但是依然看不到图片,为什么呢?查看网页源代码,
可以看到,图片的访问路径是有问题的,html文件和img文件是在同一个文件夹下,但是访问路径却还是markdown文件中的访问路径,多了前面的test-md,将其删去,
成功了。
因此,我们需要hexo-asset-img插件来帮助我们将图片的访问路径正确转换。
1 | npm install https://github.com/CodeFalling/hexo-asset-image --save |
使用以上命令,安装,完成后在重新打包和部署页面,网页正常了。