MarkDown + VSCode + PicGo:搭建简约的写作平台

前言

---

这几年一直在用markdown写博客,讲真的,看到在线编辑Markdown的几个平台还是喜欢使用来进行写作,但是其实对Markdown语法做了很多的容错处理,虽然看似很方便,但是一旦转移到其他平台就很麻烦了,所以接下来的时间我将会使用 VSCode 来进行写作. 然后分发到各个平台之上.

其实转战使用 VSCode 写作的方式,我主要是因为以下几点.

1. 现在的文件审核对于程序员来说过于苛刻,虽然屏蔽了很多那种培训机构的宣传文章,但是像我这样的小白随意的一个外链就直接进行究极审判 文章锁定, 讲真的,还真是难受.
2. 像掘金的MarkDown编辑器完全是拿过来的插件,没有那种拖拽即可上传图片的方便快捷的操作.
3. 先前写的文章图片都是传到了上,但是现在给图片添加了防盗链,所以外网使用这些图片想薅羊毛不太容易.
4. CSDN的MarkDown有很多提示,但是在写作区过于杂乱, 字体大小不一,虽然能与预览区快速对应,但是假设着实太过于杂乱,对于强迫症晚期的我来说绝对是接受不了的.
5. VScode 我在平常开发中都有用到过,再加上VSCode中的插件较多,更新频繁,组合性强.
6. 对于图床这块,以前做项目的时候使用过阿里云的OSS存储,感觉还可以,自己正好有一个空闲的OSS,阿里云的OSS的图片处理也还可以,建立好规则之后就可以愉快的玩耍了.

哔哔了这么多,我们就来说一下如何搭建我们的VSCode写作平台吧.

VSCode

---

VSCode的下载过程就不过多叙述了,直接去VSCode官方 下载就OK了.

[图片上传失败...(image-f70bda-1610861778656)]

VSCode 默认就是支持MarkDown的,但是我们需要下载以下的插件来提高我们的写作幸福感.

ICON	插件	作用
	Markdown All in One	Markdown的快捷方式操作大集合
	Markdown Preview Github Styling	Markdown在编辑器内进行GitHub样式的实时预览
	Markdown PDF	Markdown文档转换成各种格式
	PicGo	Markdown图床的插件
	Markdown Shortcuts	Markdown的快捷方式键

如果你的VSCode没有设置自动保存功能,那么使用起来将会非常的难受,因为可能有时候忘记使用 ctrl + s 进行保存, 导致你费时费力写的博客需要重头再来一遍,这时候你很有可能就直接原地起飞了....

OK, 我们看一下我们该如何设置自动保存功能吧,点击VSCode右下角的设置按钮,然后点击 Setting/设置 进行设置.

image

然后搜索 auto save, 如下设置 Auto Save → afterDelay / Auto Save Delay → 1000 , 具体如下图所示.

Photo

---

上面说了一些VSCode的设置,接下来写博客中的图片应该如何添加,其实我现在从网上找到的方案,无非就是如下的几种方式.

1. 直接把图片上传的对应的博客平台上,这样的做法虽然简单方便且免费,但是存在一个致命的缺陷,那就是受限于平台,如果平台一旦规则发生了改变,例如现在添加了图片的防盗链,所以你就不能多能进行多平台转发了,受限于平台.但是也不是说一无是处啊,例如免费白嫖图床不香吗?

2. 这种方案是我从 markdown终极教程 找到了,其实就是把图片转为Base64格式,然后添加到文章中就OK了.这种方案的好处就是图片不依赖于网络,但是操作起来步骤繁琐,而且这种做法会让文章过于繁杂,Base64的那长度让人望而却步呀~

• 首先把需要的图片转为Base64格式,这里我就直接拿到上面文章提到的 图片转Base64 网站了. 然后右键复制图片的地址,如下图所示.

  image

• 然后把图片地址填写到下面的图片地址位置.

• 具体的效果如下所示.(是不支持这种形式的.)

• 如果觉得Base64 图片链接过程,在VSCode中是可以进行标签折叠的,折叠起来之后,编辑器变得干净多了.

3. 最后一种方式就是图床,所谓图床就是找到一个可以上传图片的互联网空间,然后再拿到图片的链接进行使用,像现在的很多图床,例如很多人用CSDN做图床,但是这种白嫖的图床不太稳定,而且近几年来像一些七牛云,腾讯云OSS,阿里云OSS价格上都很美丽,而且还有很多新手优惠活动,所以可以选择一个平台进行图床的搭建.对于VSCode图床插件,我这里就使用 PicGo ,它支持的平台较多,而且不单单在 VSCode 可以使用,它也支持多平台的客户端,是比较简单的. 接下来我们就看一下基于阿里云OSS我们该如何搭建我们的图床吧.

• 首先,我们需要去 阿里云官网 登录我们的账号,进入控制台,在左侧位置点击对象存储OSS,或者通过产品与服务选项找到对象存储OSS进行开通.由于我已经开通过了,我买的就是一个40G空间的OSS,比较便宜,童鞋们可以根据自己实际使用情况自行选择.

image

• 如图选择创建一个Bucket,Bucket名称自己定就好了.

image

• 读写权限改为公共读 就OK了.

  image

• Bucket创建完成之后,我们先不忙着操作Bucket,我们需要添加一个Bucket管理账号.首先选择 Access Key ,如下图所示.

image

• 然后选择 子用户Access Key ,如果所示.

image

• 创建用户如图填写就OK了,注意要选择 编程访问 的形式.

image

• 创建完成之后,AccessKey ID 和 AccessKey Secret 要保存好,注意:一旦离开当前页面你就再也看不到这些数据了.到时候只能重新创建新的账号了.

image

• 创建完成授权管理账号之后,我们进入到Bucket内部如图创建一个文件夹,当然了,你可以创建多个文件夹进行不同的不同的管理.

  image

• 假设我们创建了一个blog的文件夹,创建完成如下所示.

  image

• 创建完成之后我们需要做一些简单的配置工作,首先是授权管理账号的配置,如图选择 Bucket授权策略.

image

• 点击设置,然后新增授权 ,添加新的授权账号. 如下图所示.

image

• 然后如图进行配置添加自己先前的账号. 如下图所示.

image

• 这时候我们其实就已经完成了阿里云OSS的基本配置,但是为了让使用起来更加的方便,例如一张图片设定不同的尺寸,我们还需要对图片处理进行.如图 数据处理→图片处理 进入图片处理模块.

image

• 然后这里你可以使用导入样式,或者直接创建样式,我把我常使用的样式分享给童鞋们,童鞋们只需要导入样式就可以了.

  样式传送门 密码:ul30

  image

• 导入完成之后,如下图所示.

20210117121849-2021-01-17-12-18-49

• 那么我们该怎么使用呢?例如我们上传一张图片.然后获取到链接,这时候我们可以如下定制图片的宽度.假设原图链接如下所示.

http://saodongblog.oss-cn-beijing.aliyuncs.com/blog/5.png

• 想设置图片为200宽度的话,只需要在后缀添加 /w200 即可,如下所示.

http://saodongblog.oss-cn-beijing.aliyuncs.com/blog/5.png/w200

• 上述的阿里云的oss相关设置已经完成了,接下来我们就对 VSCode 中的 PicGo 进行配置.仍然是打开用户设置.如图所示.

image

• 然后选择 扩展 → PicGo,首先先配置阿里云OSS,这里我的Bucket名称是 dongdongblog, AccessKey ID 和 AccessKey Secret 就是我们先前保存的,然后 Pic Bed: Current 设置为 aliyun ,具体如下所示.

image

• 然后为了图片名称的唯一性,我们在上传图片的时候尽量添加时间戳,这里我们需要设置 Custom Upload Name,具体如下所示.

${fileName}-${dateTime}${extName}

image

• 设置完成之后,我们该如何快速上传我们的图片呢? 具体操作如下,这些官方已经给出了,具体如下所示.

OS	上传截图	上传文件(通过文件选择器)	上传文件(通过本地路径)
Windows/Unix	Ctrl + Alt + U	Ctrl + Alt + E	Ctrl + Alt + O
MacOS	Cmd + Opt + U	Cmd + Opt + E	Cmd + Opt + O

结束

---

Ok, 文章写到这里基本就结束了,这篇博客也是我第一次尝试使用VSCode进行的写作,整体的感觉还是非常的舒服的,如果喜欢文章欢迎点赞评论,骚栋在这里谢谢各位童鞋了. [手动狗头]

image