前言
本篇博客主要讲解七牛云插件安装与使用，博客中获取七牛云存储的图片主要有两种方式，一种是在七牛控制台中上传图片然后取图片外链地址，另外一种是用七牛云插件+标签语法将图片上传到七牛云并显示到我们所写的博客中，这里主要介绍第二种方式。
相关网址
注册七牛个人账号
创建存储空间.png
添加到万网.png
安装七牛云插件
- 安装七牛云插件
npm install hexo-qiniu-sync --save
配置相关信息
- 配置站点文件_config.yml，配置入内容（注意：添加到配置文件时，把//去掉）
#plugins:
# - hexo-qiniu-sync
qiniu:
offline: false
sync: true
bucket: blogwenbo
//这里将其注释掉，不注释，执行hexo g报错
# secret_file: sec/qn.json or C:
access_key: your access_key
secret_key: your secret_key
// 上传的资源子目录前缀.如设置，需与urlPrefix同步
dirPrefix: static
//外链前缀
urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
//使用默认配置即可
up_host: http://upload.qiniu.com
//本地目录
local_dir: static
// 是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
update_exist: true
image:
folder: images
extend:
js:
folder: js
css:
folder: css
- 生成七牛配置路径，执行下面命令任意一个
就会在static目录下生成images、css、js三个文件夹。这时我们把测试图片七牛云.png放在images文件夹下，然后按照如下标签语法书写：hexo s 或 hexo g //终端输出 INFO ----------------------------------------------------------- INFO qiniu state: online INFO qiniu sync: true INFO qiniu local dir: static INFO qiniu url: http://blogwenbo.com/static INFO ----------------------------------------------------------- INFO Start processing INFO Now start qiniu sync. INFO Need upload file num: 0{% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
七牛云.png
- 同步静态资源到七牛云空间，主要有两种方式，一种是使用hexo命令，还有一种是使用七牛插件命令，可以参考GitHub文档：hexo-qiniu-sync
//1、启用本地服务器.即使用 hexo server 命令（简写为 hexo s）
//当以本地服务器模式启动后，会自动监测 local_dir 目录下的文件变化， 会自动将新文件进行上传。
如果文件进行了修改，但设置中没有启用 update_exist 配置，则不会更新到七牛空间。
hexo s
hexo server
//2、使用命令行命令(sync | s | sync2 | s2)
//命令行命令会扫描 local_dir 目录下的文件，同步至七牛空间。
hexo qiniu sync
hexo qiniu s
hexo qiniu sync2
hexo qiniu s2
- 图片处理可参考官方文档
图片基本处理
问题解决
-
没有注释secret_file: sec/qn.json or C:报错，如下图所示：
HexoError.png
# secret_file: sec/qn.json or C: -
hexo-qiniu-sync安装好后，hexo s命令不见了，hexo d也提示问题 #41
//将其注释就好了 #plugins: # - hexo-qiniu-sync
结语
自己也参考了一些文章，但讲解的都不是很详细完整，有些博客只讲解了重要的一些步骤，不管怎样，最后自己还是捣腾出来了，还是挺折腾人的，我也是第一次用七牛云存储图片，有些地方可能讲解的不是很完整，也请谅解。希望本篇博客能给你一些帮助，也欢迎大家一起交流学习。成功案例：Hexo七牛插件安装与使用。
网友评论