hexo 与七牛图床

起因

因为写博客需要图床,所以一开始我用知乎做图床,没想到知乎对外链管的很严,图片换了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%.vscode101wyy.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