Atom 编写 Markdown 将图片上传到七牛图床

发表于 阅读次数： 评论数： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

前言

  • 七牛云免费提供 30 天有效期的七牛融合 CDN 测试域名，也支持绑定自定义域名，但要求自定义的域名必须备案
  • 七牛云每月会免费提供 10 GB 存储空间、10 GB 下载流量、10 万次 PUT 请求、100 万次 GET 请求，但免费提供的存储资源只支持 HTTP 协议访问，若需要使用 HTTPS 协议，则需要按流量付费才能够使用
  • Atom 编写 Markdown 将图片到七牛图床，第一种方法是安装两款插件，分别是：markdown-assistant + qiniu-uploader，不支持上传本地文件到七牛云，只支持将剪贴面板里的图片上传到七牛云，在新版本的 Atom 中存在兼容性问题
  • Atom 编写 Markdown 将图片到七牛图床，第二种方法直接安装 md-writer-qiniu 插件，该插件是在 markdown-writer 的基础上新增了七牛图片上传的功能，支持上传本地图片到七牛云，支持将剪贴面板里的图片保存到本地或者上传到七牛云

Atom 安装 md-writer-qiniu 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
# 进入 Atom 本地的插件目录
$ cd ~/.atom/packages

# 克隆代码，文件夹的名称必须是 markdown-writer ，即需要和 packagename 一致，否则插件无法正常使用
$ git clone https://github.com/chenghm123/md-writer-qiniu.git markdown-writer

# 进入源码目录
$ cd markdown-writer

# 安装依赖
$ npm install

# 重启 Atom

md-writer-qiniu 快捷键冲突

md-writer-qiniu 的快捷键默认是 shift-ctrl-i，可能会与 toggle-dev-tools 的快捷键冲突，可以编辑 ~/.atom/keymap.cson 文件，更改 md-writer-qiniu 的快捷键，即下面的 "shift-ctrl-v": "markdown-writer:insert-image"：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ vim ~/.atom/keymap.cson
".platform-linux atom-text-editor:not([mini])":
  "shift-ctrl-K": "markdown-writer:insert-link"
  "shift-ctrl-v": "markdown-writer:insert-image"
  "shift-ctrl-X": "markdown-writer:toggle-taskdone"
  "ctrl-i":       "markdown-writer:toggle-italic-text"
  "ctrl-b":       "markdown-writer:toggle-bold-text"
  "ctrl-'":       "markdown-writer:toggle-code-text"
  "ctrl-h":       "markdown-writer:toggle-strikethrough-text"
  "ctrl-1":       "markdown-writer:toggle-h1"
  "ctrl-2":       "markdown-writer:toggle-h2"
  "ctrl-3":       "markdown-writer:toggle-h3"
  "ctrl-4":       "markdown-writer:toggle-h4"
  "ctrl-5":       "markdown-writer:toggle-h5"

md-writer-qiniu 插件配置

首先注册七牛云的账号，选择” 对象存储” 产品，然后创建存储空间（必须设置为公开访问），接着在 Atom 的插件配置中填写以下内容即可。

  • Qiniu Bucket 是七牛云存储空间的名称
  • Qiniu Domain 是七牛云存储空间的域名
  • AccessKey、SecretKey 即是在七牛云中的 AK、SK

qiniu-upload-plugin-config-1

如果希望将剪贴面板里的图片保存到本地目录，需要配置 Hexo 图片的默认保存目录，下述配置是将图片保存在 source/asset/{year}/{month} 本地目录下：

qiniu-upload-plugin-config-2

md-writer-qiniu 插件的使用

  • 使用快捷方式 shift-ctrl-i 或者 shift-ctrl-v，调出图片上传的界面（如下图），也可以导航到菜单： Packages –> Markdown Writer –> Markup –> Insert Image。在下面的操作完成后，默认按下” 回车键 “，即表示开始上传图片或者保存图片到 Hexo 的图片目录。

qiniu-upload-plugin-ui-1

  • 第一种使用情况：当剪贴面板里有图片时，如果勾选了 “Save Image To”，则只会将剪贴面板里的图片保存到 Hexo 的图片目录，此时并不会上传到七牛云；若不勾选，则默认会将剪贴面板里的图片上传到七牛云。

qiniu-upload-plugin-ui-2

  • 第二种使用情况：当剪贴面板里没有图片时，此时点击 “Choose Local Image” 按钮从本地选择图片，若勾选了 ”Copy Image To”，则只会当本地图片保存到 Hexo 的图片目录，此时并不会上传到七牛云；若不勾选，则默认会将本地图片上传到七牛云。

qiniu-upload-plugin-ui-3

使用总结：

  • 若不勾选 ”Save Image To“或者 “Copy Image To” 选项，默认会将剪贴面板里的图片或者本地图片上传到七牛云
  • 只要勾选了 ”Save Image To“或者 “Copy Image To” 选项，都不会将剪贴面板里的图片或者本地图片上传到七牛云

补充说明

  • 使用上面提到的 md-writer-qiniu 插件将图片上传到七牛云后，默认的图片路径是 {YYYY}/{MM}/{DD}/{HHmmss}{random-string}{extname} 的格式， 该插件不支持自定义七牛云里的图片文件名
  • 若需要自定义七牛云里的图片文件名，可以使用这个分支的 md-writer-qiniu 插件（安装方法和上面的插件一样），支持使用路径前缀（针对七牛云的存储路径）。当在该插件的配置项里不勾选 Qiniu File Random Name 选项时，默认的图片路径是 {keyPrefix}/{YYYY}/{MM}/{title}{extname}，也就是说可以指定 Title 作为七牛云图片的文件名，具体配置如下图：

markdown-writer-ext