什么是picgo
picgo是一款免费的图床管理工具,简单点就是管理你的图片的工具
非常适合写博客使用。它支持github,阿里云,腾讯云,七牛等存储服务器
markdown痛点
众所周知,在markdown中插入图片是很蛋疼的一件事
上传麻烦
在markdown中上传图片,原生的就是自己手动写标签,然后指定一下图片地址
那这些图片从哪来呢,肯定要先上传
但是一般写markdown的都是本地拿个记事本都能写的人
去哪弄服务器上传图片,然后再把地址贴进来?
如此麻烦,还不如打开有道云笔记,直接截图复制粘贴多简单
迁移麻烦
如果markdown图片是本地的,那么以后你要迁移到其它地方
比如放在有道云里面,这就很麻烦了。你原来的图片地址都要改掉
事实上有道云对markdown的支持真的挺不错的
但是markdown中上传图片是收费的。。。
所以我找到了picgo
picgo的好处
图床服务丰富
支持的图床服务实在是太多了,最重要的是它支持github
免费的~
上传方便
- 你可以点击上传
- 你可以拖进去上传
- 你可以直接上传剪贴板中的图片
- 你可以最小化成一个小图标放在电脑任意位置上传、
- 你可以使用快捷键上传
- 最重要它还有vscode插件,而本文就是用vscode写的
自定义图片URL格式
你上传完后会,默认会生成一个链接在你的剪贴板
在上图中可以看到,这个链接支持5种格式
你要做的只有2步:
- 上传
- 粘贴URL
简单得不能再简单了
妈妈再也不用担心我用markdown写博客贴图
so easy~
本文用的是最后一种自定义格式,为什么呢
比如第一种格式markdown写法是这样的![图片示例](https://note.youdao.com/favicon.ico)
有人说这样不是挺好的么,挺markdown的
但是它有一个致命的缺点,没有css
除非你自己写一套markdown渲染和css一直带着
比如我用的是gitee
自定义格式配置的如下:
那么它生成的图片是这样的
1 | <img src="https://gitee.com/lizhuang/blog-images/raw/master/blog/ |
自定义格式有什么好处
它可以设置宽高,也可以添加css样式。
有些博客图片可能是一张壁纸,如果你不设置宽高
那你等着看好戏吧,你的文章内容会被撑爆
而且每个博客里面的图片,不同的位置图片大学往往不一样
比如本博客中的首页缩略图、正文内容、相册
相册管理
picgo还有一个相册管理功能,你上传后的图片在这里可以轻松管理。
但是有一点你需要注意的是,这些相册都是你用picgo上传到对应的图床的
如果不是用picgo上传的,是看不到的。你对本地相册做得删除,也只是对本地的相册操作而已。
注意并不是所有的图床都是这样。
比如githubplus和gitee插件就实现了本地和服务器之间的图片同步,删除也是同步的,请谨慎操作。
我为什么要写picgo的gitee插件
- github太慢,经常抽风无法访问
- 阿里云、腾讯云之类的收费产品没有兴趣
- gitee是开源中国旗下的代码托管工具,在国内用起来还挺不错的
正好它也有pages服务,并且提供了openApi
gitee的来源
gitee是我用githubplus这个插件修改来的
它实现了github和本地图片的同步以及删除操作。感谢作者!
不过他的源码中github是使用nodejs版本的api实现的
而gitee并没有nodejs相关的封装,只有openApi
本来我是给picgo作者提了issue的,但是作者不打算加再入其它图床
其实可以理解,毕竟这需要太多精力和时间了
无奈之下,硬起头皮自己干
开发此插件你需要了解什么
- nodejs npm安装、打包、发布
- picgo和picgo-core的官方文档
- typescript
- nodejs && typescript如何发送请求
- gitee oauth和openApi文档
正好以上这些我都会一点。偏偏我不熟悉的vue,插件用不到
天时地利人和,于是我花了3天的时间研究和看文档
顺便从githubplus源码中学到了不少东东,比如
- conventional-changelog
- npx
- request-promise
- 等等其它一些小玩意儿
虽然我是JAVA WEB后端开发,但是我对前端兴趣一直很大
我个人非常喜欢Angular,至于vue我一直没去学习
是因为vue界面里面一坨的代码,对我一个代码洁癖的人来说
无法接受
可惜的是当年AngularJS1.x和Angular2之间断了太长时间
导致后来市场已经被vue和react占领了
目前天朝vue更火一些(我觉得原因主要是上手简单、中文文档丰富,国内生态更好)
而国外则是Angular很火
不过vue3.0,尤大说准备用typescript重写
尤大:typescript真香 知乎原文
所以我准备等3.0出了再学~
预计年底发布
未来可期