之前一直使用博客一直使用本地图片,这样不是很方便。现在域名的备案终于下来了,可以试着使用七牛作为博客的图床了。
为什么使用七牛
七牛在国内云存储上做的是很厉害的了。这些不是重点,重点是七牛的免费额度啊:
- 10GB 永久免费存储空间
- 每月10GB 下载流量
- 每月10 万次 Put 请求
- 每月100 万次 Get 请求
这对于一个博客来说,完全足够了。(除非你的博客很大,访问量也很高)
配置七牛做图床
使用七牛云存储来作为自己图片的存储空间,首先注册七牛账号(注册地址),按照流程注册就好了。之后登陆七牛账号,在添加资源中,添加一个新的对象存储,这个就是用于存储图片的存储空间。
七牛会提供一个测试域名,作为图片的访问地址。可以改成自己的域名,建议使用二级域名。这里,要求域名是备案的。
这样七牛空间的基本操作就完成了。接下来开始集成插件:
hexo-asset-image
之前使用本地图片的时候,使用了hexo-asset-image插件。
这个插件在使用本地图片的时候很是方便,图片只需要放在文章同名文件夹中即可,然后文章的引用路径就是简单的
文章名(就是图片的文件夹名)/图片名
。简化了很多(而且Mou也可以支持预览)
现在使用七牛做为存储空间,仍然不想放弃之前那种简单的图片路径引用方式,所以,这个插件还是要用。不过,在后面我们要对插件的代码做些修改。
hexo-qiniu-sync
hexo-qiniu-sync这是一个,不需要手动同步图片到七牛的插件,用起来也不错。具体用法参见官方的README
这里需要说下配置参数的相关内容:
|
bucket
指的是七牛账户创建的七牛存储控件的名称access_key
与secret_key
是七牛账户的秘钥,可以在秘钥管理中查看(只有验证秘钥才能指定账户存储嘛)secret_file
可有可无,貌似有了这个之后上面的两个参数就不需要配置了。我的在加了这个配置之后反而报错,索性去除了。这个路径是需要你自己建立一个json的文件存储上面的秘钥,然后把文件的路径写在这里就好dirPrefix
这个是七牛的目录名,七牛存储空间没有显示的目录。所谓目录,就是在指定访问域名后面先加上你的目录名,再加上你上传的图片名,这样就相当于目录了,来区分图片的分类up_host
这个是访问图片的域名地址,比如我的是http://error408.com
,前提是已经绑定了自己的域名(绑定之前可以用测试域名)。这些操作,完全可以在七牛的内容管理上自己上传一张图片,然后查看外链,就会一目了然了local_dir
这个是本地的图片文件夹,这个就是插件同步七牛的图片来源。你所有的图片等资源都放在这里。名字可以任意,需要在博客根目录下创建这个文件夹,如我的是qnsource
image
、js
、css
这三个参数是文件夹的名字,这三个文件夹会在hexo运行后,插件自动会在上一步你指定的那个local_dir
下创建这三个文件,名字分别是folder
参数值,分别可以放相应的资源
这样你在local_dir
的image
命名的文件夹中添加一张图片,之后运行hexo(如hexo s
),图片就可以在你的七牛存储空间的内容管理中看见了。
你会看到图片的外链URL就是
http://your_site/your_static(你的目录-dirPrefix参数的配置)/images/yourimage.png
。就是你的域名+自定义的目录名+images(配置文件中image
中folder
指定的文件)+ 你的图片名
配置好的图片结构路径如下:
插件支持自定义子文件夹
这样同步七牛就搞定了,最后就剩下文章图片链接引用了
简化图片路径引用
这里要配合第一步中的插件hexo-asset-image
使用,首先在博客的根目录下进入node_modules
插件所在目录,找到这个插件,进入index.js
文件。接下来就可以自定义编辑了
上面便是这个插件的核心代码,其中link
就是获取静态博客文章目录所在的路径,而最后的src
指定替换函数就是拼接文章所在目录与文章中图片的引用,生成新的图片访问地址。由于,不懂JS,就只能在逻辑上判断他的逻辑。所以,萌生了一个想法,我是不是可以把link
换成我的七牛固定地址,然后最后拼接上文章中的图片名?那么我不就可以在文章中只是引用图片名就行了吗?好了,尝试之后,果然奏效。修改代码如下
|
|
- 这里我修改了
link
地址,这里可以写一个死的地址比如link = "http://七牛访问图片固定前缀"
,而我为了方便配置,采用了直接获取config
配置文件中qiniu
的配置,拼接成固定的图片访问前缀。这个访问前缀,可以在查看七牛存储空间中图片的外链,来确定通用的访问前缀- 第二步中,首先去除对于
src
字符串截取函数split()
、pop()
,这样可以完全读取文章中图片的引用路径;然后对于src
的替换函数也要处理下,这里直接用我写的七牛固定路径link
+/
+ 文章中的图片引用路径src
。这里也可以在配置文件config
中自定义一个字段,如上面注释的baseUrl
,把固定路径前缀写好,link
的修改就可以直接是link = config.qiniu.baseUrl
了
注意:在添加图片的时候,放在images
文件夹下的图片,是可以创建子文件夹的。所以,为了方便以及同时兼容之前使用本地图片插件的方式,每一篇文章或者一个功能对应的图片最好放在一个子文件夹下,这样在日志文章中对图片进行引用的时候就可以直接设置成文件夹名/图片名.png
的格式。这里建议文件夹名与文章名相同,便于管理
日志文章中引用图片的示例:
|
或者
|
这样,就可以很方便的使用七牛作为自己的图床了。