注:本文内图片均采用本文所给方式上传,可放心使用本文所给方法

引子

最近的创作欲非常旺盛,经常要用到Markdown来写一些文章,这时候插图就成了一个复杂的问题。

对于一个Markdown使用者来说,比起word、LaTex等文本编辑软件,它最大的优势就在于可以免去排版和调整文字大小的时间。但同时它在插图方面由于使用的是链接式引用图片,所以本地插入的图片将无法在上传到网站后显示。

本文旨在提供几种将本地Markdown中图片自动上传到图床的方法,来便于Markdowner更便捷的操作。

图床的选择

现在各种图床非常多啦,比较常用的有:github的图床七牛云的图床有道云笔记的图床CSDN的图床等等。

个人比较推荐的是七牛云的图床,一是因为它的速度确实很快还支持CDN,二是认证用户的免费容量可以达10G。可以说是白嫖里的大哥大。但是它最大的缺点就是你的域名需要备案,这就要求你得有自己的服务器(现在域名的备案必须要有个人服务器)。所以,还是需要大家自己权衡啦。

此外,github的图床不推荐的原因主要是因为它的服务器在国外,所以比较卡顿。但这个问题可以通过设置代理的方式解决(我也还不会),或者可以使用码云来解决。

总之各种图床各有利弊,大家按照自己的实际情况进行选择。

关于七牛云

注册之类的过程就略去了,重要的步骤是认证和添加自己的外链。

认证的过程:

注册完成后,打开七牛云的个人中心,可以看到有一栏叫做实名认证信息,点击那里的认证按钮,按照提示上传相关资料,就可以通过认证啦!认证之后可以获得大量的免费空间和一系列权益。

绑定域名的过程:

前往创建的对象存储-空间管理,进入你建立的图片仓库(一定得是公有仓库),找到域名管理,配置自定义的CDN域名。

点击创建域名,在弹出的网页里输入相关的配置信息。注意域名最好输入一个二级域名,例如我的CDN域名就是img.bolun.xyz(配置中,大部分配置都选默认就好)。之后,进入你的DNS解析服务商的网站,在产品控制台-DNS解析中配置CNAME的二级域名解析。至于CNAME具体指向的域名设置为何,请参见下图。

若你对CNAME及DNS解析等非常不了解的话,可以先参考一下这个:如何配置域名的 CNAME

最方便的实属方法三:利用PicGo+Typora实现Markdown实时上传。如果图方便,请直接去看方法三哦😃

方法一:利用七牛云的插件hexo-qiniu-sync

此方法比较麻烦,适用于本地已经用图片,想一键上传到图床的同学。若是想截图后上传至图床或在Markdown写文章的过程中插图自动上传至图床,请跳过并参考方法二、三。

安装七牛云的hexo插件:

进入cmd或其他的bash界面,进入你存放博客的文件夹,输入以下命令:

npm install hexo-qiniu-sync --save

然后再修改站点文件_config.yml,添加/配置以下信息:

plugins:
# - hexo-qiniu-sync
qiniu:
  offline: false
  sync: true     # "true代表开启七牛云插件;false代表关闭七牛云插件"
  bucket: bolunblog-pic        #这里填你的仓库名
  # secret_file: sec/qn.json or C: # 这行代码最好注释,否则会报错
  # 在 [个人面板——密钥管理] 里面你可以找到你下面这两对密钥
  access_key:         #这里填你的access_key  
  secret_key:         #这里填你的secret_key
  dirPrefix: static # "这个是七牛的目录名,七牛存储空间没有显示的目录。所谓目录,就是在指定访问域名后面先加上你的目录名,再加上你上传的图片名,这样就相当于目录了,来区分图片的分类。"
  urlPrefix: http://img-bolun-xyz-idvby0g.qiniudns.com/static # "这里第一个位置填写刚才系统分配给你的域名,第二个位置填写上一行的 dirPrefix 的内容。"
  up_host: http://upload-z2.qiniu.com  # "华东区为这个默认访问域名,具体可以查看 https://developer.qiniu.com/kodo/manual/1671/region-endpoint 这个网址。"
  local_dir: static # "在hexo主目录下将会自动创建的你的文件同步文件夹名,可以自定义。"
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

其中,access_keysecret_key可以在个人中心-密钥管理里找到。urlPrefix即CNAME指向的那个地址,见上文。修改完毕后,点击保存。然后输入命令,启动七牛云:

hexo g

我们可以看到,我们网站的文件夹里,多出来了一个static文件夹,里面拥有三个目录:imagescssjs

一键上传图片到七牛云仓库:

当我们想要上传图片到七牛云的图片仓库时,我们只需要将图片等放入images文件夹,然后进入网址文件夹,在bash窗口输入指令:

hexo qiniu s

即可一键将images里的图片全部上传到七牛云的仓库里了。然后我们在Markdown里可以通过以下命令来对图片进行引用:

{% qnimg test/demo.png title:图片标题 alt:图片说明 %}

确定图片显示无误以后,我们可以进入static/images文件夹,把图片删除节省空间。

关于更多hexo-qiniu的使用,请参考github文档:hexo-qiniu-sync

评注:有一说一,该方法还是比较费劲的。但是相比于手动去七牛云网站上传、拷贝图片链接来说,简单多了。下面将介绍两种更简单的方法。

方法二:利用PicGo快捷键快速上传图片

使用此方法,可以实现将剪贴板(例如截图后的图片)内容,迅速上传到七牛云,并生成一个可以在Maekdown引用的外链。

关于PicGo

PicGo作为一个用于快速上传图片并获取图片URL链接的工具,可以极大方便我们的图片上传和引用操作。它的下载地址是:PicGo下载地址

PicGo现在可以支持的图床包括以下这些:

它可以自己利用快捷键来实现迅速的图片上传和引用,也可以与Typora结合来实现从文中自动上传图片。

更多关于PicGo的信息请参考PicGo的Github文档

配置PicGo

打开PicGo软件,找到图床设置-七牛图床,输入以下参数:

其中,AccessKeySecretKey即方法一的access_keysecret_key,可以在个人中心-密钥管理里找到。存储空间名就是仓库的名字;访问地址设置为你的设定的二级域名(参见上文,例如我的就是:http://img.bolun.xyz)即可。存储区域请参考七牛云存储对象地区对应表。其他两项可以不设置,然后点击确定。

设置快捷键

进入PicGo设置一栏,选择修改快捷键的选项,进入后,将快键设置为你熟悉的键位。(对于我,由于截图快捷键是Ctrl+Alt+A,所以我把上传图片的快捷键设置为了Ctrl+Alt+S

通过对PicGo的配置和对于快捷键的配置,我们就可以轻松实现一键存截图的功能啦😊

引用图片至Markdown

我们上传到图床的目的还是为了在Markdown写作过程中的引用,那么怎么引用上传到的图片呢?我们可以进入相册,里面全是我们之前截图上传的图片,然后点击图片右下角的复制按钮,即可复制链接,复制后,我们就可以把图片直接引用到Markdown文章啦。

评注:此方法可以快速将截图发送到七牛云的图床上,非常好用。不过引用图片还需要繁杂的过程,所以接下来就请出我们的压轴大将!

方法三:利用PicGo+Typora实现Markdown实时上传

使用此方法,可以实现将Markdown里放置的图片实时上传到七牛云图床上。好用到哭!

下载/更新Typora至0.9.84及以上及简单配置

使用Typora的更新器或在应用商店搜索Typora,将Typora更新到最新版本(至少要在0.9.84及以上)。这是因为更新日志显示,0.9.84版本才开始支持PicGo实时上传。

image-20200619233845624

安装完成后,点击Typora界面右上角的文件,选择偏好设置,进入偏好设置界面。

image-20200619234819355

按照这个配置进行设定,要注意的是:一定要选择上传图片,且对本地位置的图片应用上述规则。然后到上传服务设定里,选择PicGo(app),路径选择你的PicGo.exe路径即可。

设置完毕后,可以尝试点击验证图片上传选项来进行验证,若成功,则说明配置完成。

图片的自动上传

完成以上配置后,我们在Typora编辑的Markdown文件中的所有本地图片都会被实时上传到图床。

例如:

1

方法四:利用qshell+bash代码自动上传图片

此方法来自hxd的博客:三行代码搞定七牛云文件上传和博客部署

在博客根目录下配置

首先将以下目录添加到博客的根目录。其中,blogimg用于临时存放待上传的图片,deploy.sh即上传图片用到的脚本,local.sh用于预览网站,qshell.exe是利用七牛文档上公开的API实现的一个方便开发者测试和使用七牛API服务的命令行工具。最初使用的时候,需要在命令行中调用一次。

关于qshell的使用,可以参考下图,获取更多信息,还请前往官方文档

配置deploy.sh

deploy.sh中输入以下代码:(其中存储域名请换成你的域名)

./qshell.exe qupload2 --thread-count=5 --src-dir=./blogimg/$1 --key-prefix=$1/ --bucket=lfalive-b1 --check-exists=true --check-hash=true --overwrite=true --rescan-local=true
sed -i "s/..\/..\/blogimg/http:\/\/img.bolun.xyz/g" ./source/_posts/$1.md

第一行命令是调用qshell文件,执行上传文件功能。

命令第二行则是用sed函数,把markdown文件里的本地相对路径调用全部改为调用云空间的图片。参考的资料有很多,注意写的时候斜杠用一下转义符就好。

部署

只需将以下代码加入deploy.sh即可以实现部署:

hexo clean && hexo g && hexo d

故,最终的完整版deploy.sh应该为:

if [ -n "$1" ]
then
    ./qshell.exe qupload2 --thread-count=5 --src-dir=./blogimg/$1 --key-prefix=$1/ --bucket=lfalive-b1 --check-exists=true --check-hash=true --overwrite=true --rescan-local=true
    sed -i "s/..\/..\/blogimg/http:\/\/img.bolun.xyz/g" ./source/_posts/$1.md
fi
hexo clean && hexo g && hexo d

总结

七牛云+PicGo+Typora为我们编写Markdown文档做出了卓著的贡献。

哪里有需求,哪里就有新产品的出现。正是因为这句真理,才促成了我们在生产生活中的进步。

希望自己也能像编写这些软件的大佬一样,用技术来为更多的技术人服务吧😊