Hexo博客插入图片的方法
Hexo博客插入图片的方法
hexo blog 插入图片的方法总结
hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /public 文件夹中, 所以我们使用相对路径的引用可能导致问题, 总结了一下常用的引用图片的几种方式,记录一下,避免再次忘记
- 绝对引用: 使用 /source/images 文件夹
- 相对引用: 使用 post_asset_folder:true 建立文章同名文件夹
- CDN 或者图床引用
1. 绝对引用
少量使用图片的时候使用, 将文件放在 /source/images 文件夹下, 使用 markdown 语法  可以实现图片显示, 但是这种引用在本地markdown 编辑器中会无法预览,因为相对路径不一致,找不到文件, 不过在首页内容和文章正文中都能正常显示,十分方便
个人使用的方法就是这种, 由于自己很少插入图片, 但是存在一个问题,后续可能维护起来麻烦, 不知道哪里引用了哪个图片,导致文章删除但是图片仍在, 很麻烦
2. 相对引用
在站点配置文件*/_config.yml* 中配置指令 post_asset_folder: true 这样在每次新建文章的时候就会建立同名文件夹, 直接将相应的文章图片放在文件夹内 使用 语法  可以访问同名文件夹下图片资源,十分方便
3. 在线资源
在线图片
如果我们要的图片现在网络上已经存在了,我们找到相应的地址直接引用就好
可以只用标准markdown 图片语法引用相关图片 
例如
百度图片
CSDN 图片
博客园图片
维基百科图片
自己做的图
如果我们要的图只是我们自己画出来的图,或者生成的图,可以使用在线图床上传之后得到链接使用,
个人感觉最好用的图床是 sm.ms, 点击上传之后可以得到各种链接,十分方便, 最终给出的链接比如 https://i.loli.net/2019/11/09/KDut86ljxM9TXnP.png 的形式
刚刚上传了代码的一段截图 得到链接在这里测试使用
图像样式自定义
对于markdown 插入的图片,可能不是很满足自己的需求,需要进行一定的图片调整,比如图片居中或者图片大小控制 相应的各家markdown 的编辑器有自己的实现规则,但是在hexo blog 中我们对于图片的处理一般是转为直接 做html 处理, 比如
- 使用img 标记来控制图片显示大小
图片大小控制
<img src="/images/lena.png" width="50%" height="50%">
- 使用div 加上css 来控制图片的显示和大小
<div style="width: 200px; margin: auto"></div>
- Hexo 中扩展 Markdown 语法设置图片的大小 blog 中自己写了一个控制显示的方法,可以参考
更多
个人目前使用的方法1
但是后续可能要换成方法2 更加方便管理图片以及后续可能的迁移过程, 希望对看到的你们有一点帮助.
