桑龙的博客
0%

hexo 与七牛图床

Posted on Edited on

起因

因为写博客需要图床，所以一开始我用知乎做图床，没想到知乎对外链管的很严，图片换了IP加载不出来，所以采用了七牛图床。 建议直接使用 Markdown Preview Enhanced。

配置

  • 注册七牛云
  • 创建存储空间,添加”对象存储”,访问控制选择”公开空间”
  • 右上角个人面板–>密钥管理–>获取AK(AccessKey)和SK(SecretKey)
  • 在hexo主目录运行如下命令安装hexo-qiniu-sync插件
    1
    npm install hexo-qiniu-sync --save
  • 在hexo主目录的_config.yml文件中配置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    #七牛云存储设置
    ##offline       是否离线. 离线状态将使用本地地址渲染
    ##sync          是否同步
    ##bucket        空间名称.
    ##access_key    上传密钥AccessKey
    ##secret_key    上传密钥SecretKey
    ##secret_file   秘钥文件路径，可以将上述两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可
    ##dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
    ##urlPrefix     外链前缀.
    ##up_host      上传服务器路径,如选择华北区域的话配置为http://up-z1.qiniu.com
    ##local_dir     本地目录.
    ##update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
    ##image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
    ##image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
    ##              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图
    qiniu:
      offline: false
      sync: true
      bucket: bucket_name
      secret_file: sec/qn.json or C:
      access_key: AccessKey
      secret_key: SecretKey
      dirPrefix: static
      urlPrefix: http://bucket_name.qiniudn.com/static
      up_host: http://upload.qiniu.com
      local_dir: static
      update_exist: true
      image: 
        folder: images
        extend: 
      js:
        folder: js
      css:
        folder: css
  • 上一步配置好以后,执行hexo s命令,会自动在hexo主目录创建如下目录结构:
    1
    2
    3
    4
    5
    6
    node_modules
    public
    static // 静态资源目录
    	- css		//css文件存储目录
    	- images	//图片存储目录	
    	- js		//js文件存储目录

将本地图片放在images目录下,在md文件中以如下方式引入文件即可:

正常部署

弄完我就后悔了。。。。

因为其实我是两个电脑写博客，所以以前只是同步一下文章文件夹，现在还要同步图片文件夹，你知道的这个图片文件夹很大，而且我还不能在 vscode 中预览图片了因为 qnimg 不支持。。

所以我发现的 vscode 的一个七牛插件！github

使用方法：

下载 github 文件
F1 输入命令：

1
Extensions: Install from VSIX.

通过 VSIX 安装（通过市场安装会报错）
F1 输入命令：

1
open user setting

输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
    // 插件开关
    "qiniu.enable": true,

    // 一个有效的七牛 AccessKey 签名授权
    "qiniu.access_key": "*****************************************",

    // 一个有效的七牛 SecretKey 签名授权
    "qiniu.secret_key": "*****************************************",

    // 七牛图片上传空间
    "qiniu.bucket": "ysblog",

    // 七牛图片上传路径，参数化命名，暂时支持 ${fileName}、${mdFileName}、${date}、${dateTime}
    // 示例：
    //   ${fileName}-${date} -> picName-20160725.jpg
    //   ${mdFileName}-${dateTime} -> markdownName-20170412222810.jpg
    "qiniu.remotePath": "${fileName}",

    // 七牛图床域名
    "qiniu.domain": "http://xxxxx.xxxx.com"
}

使用

  • 粘贴图片路径上传：SHIFT + P
  • 直接选择图片上传：SHIFT + O

问题

  • 建议通过 github 的vsix安装，不让vs 找不到插件
  • 大写 P 和 O 被征用了。写英文很不爽。
  • 预览不能显示（需要预览插件允许 http内容）。
  • jpeg 不支持直接选择图片上传

Markdown Preview Enhanced（推荐）

后来发现，其实这个插件自带七牛，安装后，重启，预览处右键选择“image helper!”，点击上传图片即可。默认是code 作者的imgur图床，怕以后失效也可以设成自己图床。

设置

  • Windows %USERPROFILE%.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.3.5/package.json
  • macOS ~/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.3.5/package.json
  • Linux ~/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.3.5/package.json

修改里面的 default 参数。

吐槽一下，网上很多教程只安装，用作者提供的库，或者再去装其他七牛的插件，多此一举，看看代码改一下比装多个插件舒服吧。

早知这么简单还费什么事情。。。
demo
demo