前言
这几年一直在用markdown写博客,讲真的,看到在线编辑Markdown的几个平台还是喜欢使用简书来进行写作,但是简书其实对Markdown语法做了很多的容错处理,虽然看似很方便,但是一旦转移到其他平台就很麻烦了,所以接下来的时间我将会使用 VSCode 来进行写作. 然后分发到各个平台之上.
其实转战使用 VSCode 写作的方式,我主要是因为以下几点.
- 简书现在的文件审核对于程序员来说过于苛刻,虽然屏蔽了很多那种培训机构的宣传文章,但是像我这样的小白随意的一个外链就直接进行究极审判 文章锁定, 讲真的,还真是难受.
- 像掘金的MarkDown编辑器完全是拿过来的插件,没有简书那种拖拽即可上传图片的方便快捷的操作.
- 先前写的文章图片都是传到了简书上,但是现在简书给图片添加了防盗链,所以外网使用这些图片想薅羊毛不太容易.
- CSDN的MarkDown有很多提示,但是在写作区过于杂乱, 字体大小不一,虽然能与预览区快速对应,但是假设着实太过于杂乱,对于强迫症晚期的我来说绝对是接受不了的.
- VScode 我在平常开发中都有用到过,再加上VSCode中的插件较多,更新频繁,组合性强.
- 对于图床这块,以前做项目的时候使用过阿里云的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没有设置自动保存功能,那么使用起来将会非常的难受,因为可能有时候忘记使用<kbd> ctrl </kbd> + <kbd> s </kbd> 进行保存, 导致你费时费力写的博客需要重头再来一遍,这时候你很有可能就直接原地起飞了....
OK, 我们看一下我们该如何设置自动保存功能吧,点击VSCode右下角的设置按钮,然后点击 Setting/设置 进行设置.
image
然后搜索 auto save, 如下设置 Auto Save → afterDelay / Auto Save Delay → 1000 , 具体如下图所示.
Photo
上面说了一些VSCode的设置,接下来写博客中的图片应该如何添加,其实我现在从网上找到的方案,无非就是如下的几种方式.
-
直接把图片上传的对应的博客平台上,这样的做法虽然简单方便且免费,但是存在一个致命的缺陷,那就是受限于平台,如果平台一旦规则发生了改变,例如简书现在添加了图片的防盗链,所以你就不能多能进行多平台转发了,受限于平台.但是也不是说一无是处啊,例如免费白嫖图床不香吗?
-
这种方案是我从 markdown终极教程 找到了,其实就是把图片转为Base64格式,然后添加到文章中就OK了.这种方案的好处就是图片不依赖于网络,但是操作起来步骤繁琐,而且这种做法会让文章过于繁杂,Base64的那长度让人望而却步呀~ 😂 🤣 😂
-
首先把需要的图片转为Base64格式,这里我就直接拿到上面文章提到的 图片转Base64 网站了. 然后右键复制图片的地址,如下图所示.
image
-
然后把图片地址填写到下面的图片地址位置.
<p>
<img width="50" src="图片的地址">
</p>
- 具体的效果如下所示.(简书是不支持这种形式的.)
- 如果觉得Base64 图片链接过程,在VSCode中是可以进行标签折叠的,折叠起来之后,编辑器变得干净多了.
- 最后一种方式就是图床,所谓图床就是找到一个可以上传图片的互联网空间,然后再拿到图片的链接进行使用,像现在的很多图床,例如很多人用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
-
然后这里你可以使用导入样式,或者直接创建样式,我把我常使用的样式分享给童鞋们,童鞋们只需要导入样式就可以了.
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
网友评论