博客插入图片

Hexo插入图片解决方案

如果使用公共博客，其实没这么麻烦，图片、评论、推广都帮你做了，个人博客就要分别解决这些问题

方案

一般博客插入图片有以下几种方案

1. 公共图床
   1. 如网站上csdn、码云、百度链接上的图片，会因为定期扫描外链直接屏蔽
2. 私有图床
   1. 微博图床，配合浏览器图床插件上传、mac用ipic方便上传，但是半年后会清理丢失
   2. ipic提供私有存储：收费
   3. 自己的cdn服务开通：七牛云、又拍云、阿里云之类、收费
3. 博客本地保存引用
   1. 这种不会丢失就是上传内容多，需要本地工具配合更方便快捷

经历

个人一开始用公共图床，很快失效了图片，然后改用新浪图床结果半年后也失效了，现在使用最保险的第三种方式，真的是走过的血泪史，老文章的图片找时间恢复下

网上有说用，hexo-asset-image图片插件，原理是通过识别替换符替换生成html的路径，而且图片插入挺麻烦，要手工放入目录，然后再用快捷标识符引用

1. 提前配置：
   1. 修改根目录的_config.yml文件，这样创建时自动创建同名文件夹 post_asset_folder: true
   2. 安装插件npm install hexo-asset-image --save
2. 使用方式：
   1. 不过这样插入图片太麻烦，需要用{ % % }插入，一般的md的编辑器不识别
   2. 好像还有一种使用![你想输入的替代文字](博文标题/图片名.jpg)也会变化链接方式，不过没尝试成功
3. 如果已经安装想卸载：npm uninstall hexo-asset-image

推荐大家使用Typora编写markdown内容，所见即所得，使用Typora图片插入非常方便，直接复制粘贴即可，不过图片插入一个固定的全局目录中，所以为了让hexo与typora都能看到正确的图片内容，需要做一些配置

Action

一开始搜索了下与typora结合，网上没有一个能把图片插入说对的说全的

要么是root、要么是copy全局设置，其实只要2个同时设置就对的了

还一点是如果用每个文章的相对目录都生成一个文件夹的话需要路径变化，就需要hexo-asset-image一起配合使用了，这里不这么麻烦，直接把所有图片都集中在一个目录下，这样还能复用图片

第一步

在本地source中建立imgs文件夹，将引用到的图片全部放在此文件夹中

第二步

可以scaffolds->post.md增加

typora-copy-images-to: ../imgs
typora-root-url: ../../source

这样new的时候就有了，如果idea有设置live也可以改下

第三步

hexo n “xxxx”时就生成：

typora-copy-images-to: ../imgs
typora-root-url: ../../source

在拖动图片到typora中时因为typora-copy-images-to设置为imgs中，而root在source，所以会形成下面的相对路径

![image-20191007165004059](/imgs/image-20191007165004059.png)

这样在线下编写插入的图片就是如下格式，这样本地搜索路径就是../../source（typora-root-url）+/imgs/image-20191007165004059.png能在typora中正确显示

而在线上相对路径前面会加上域名：变为域名+/imgs/image-20191007165004059.png也可以正确显示

这样就完美了！

优化

可以用2个工具配合，先规整大小，然后再进行无损压缩！

简单的话mac自带的可以，不过只能减少大小，图片一般1280 即可先等比例缩小大小 sips -Z 1280 *.png

压缩会按照照片的最大边限定1280等比缩放

真正无损压缩，或者优化有部分损失压缩的工具比较好用的可以用ImageOptim

1. 官网下载https://imageoptim.com/howto.html
2. 使用非常方便，只要当前图片拖进去就开始压缩了，直接替换过去图片，可以先设置好启动有损，默认80%就可以，基本上6M图片能压缩到2M左右

最好是图片写博客的时候都是经过裁剪的，如截屏之类的

总体上多张图片115M，先进行像素标准化40M，然后压缩80%图片质量边25M左右，将近1/5的大小