picgo + aliyun给typora增加图床功能

非洲农业不发达
789 阅读7分钟

typora的markdown同一视图即时编写即时预览的功能简洁优雅，写起笔记来十分顺手。但是遗憾的是没有自带云端同步的功能，对于有跨平台多设备需求的用户来说，实在是非常大的痛点。

对于markdown文件的云端同步，typora需要配合其他云端同步的软件来使用，比如坚果云，用法也非常简单，将typora的md存储目录设置为坚果云的同步目录就行了。具体的教程有：[Typora+坚果云 实现多平台同步markdown]

文件的问题解决了，但是图片的问题并没有得到解决。我们在typora中插入的图片，typora会默认保存在本地。当我们希望将markdown文档复制到其他网站进行发布的时候，本地的图片就没有办法复制了，又不想一张张上传到网站上如此麻烦。所以今天要分享的是，如何使用aliyun的oss作为typora的图床。

如何上传

在typora中，支持通过第三方插件来对图片进行上传并插入到md文档中，picgo就是官方推荐的图片上传插件。

设置typora

打开typora的设置，我们在图像菜单中的插入图片时上传图片，这样我们就可以在截图粘贴的时候或者直接插入本地图片的时候就可以将本地图片上传到我们得图床上。

image-20201219214354166

picgo可以通过gui图形界面或者命令行进行调用，喜欢gui界面的可以将上传服务切换到picGo.app，下载picGo.app进行安装使用，安装方法也法非常简单易用。

但是作为一个专业的程序员，gui这种东西是非常没有必要且消耗资源的，我们选择命令行调用picGo-Core这个更为底层的库的方式进行上传图片。

picgo安装

picgo命令行的调用依赖node的picgo库，所以要求我们需要再本地部署好node环境。

# 全局安装picgo
cnpm install picgo -g

上传到哪

图床的选择

picgo目前支持smms，七牛云，腾讯云，又拍云，github，阿里云oss，imgur七个图床，通过插件还可以支持gitee图床。本来想着还可以使用gitee白嫖，结果发现非常麻烦，gitee主要存在几点问题

	1. 免费仓库文件单个500M大小的限制，用于图床空间太小
	2. 图床文件不对外，无法公开访问
	3. 上一个问题可以通过gitee pages解决，但是每次上传新图片之后需要重新部署才能访问，极度麻烦

阿里云oss储存一年套餐才8.4块，无论从速度和稳定性来说，都是比较好的选择，所以最后还是选择了阿里云oss。

阿里云oss套餐开通

此处略过。。。

picgo配置

picgo 的默认配置文件为~/.picgo/config.json。其中~为用户目录。不同系统的用户目录不太一样。

linux 和 macOS 均为~/.picgo/config.json。

windows 则为C:\Users\你的用户名\.picgo\config.json。

步骤一

# 自动生成配置
# 若后期需要手动修改配置可以手动修改.picgo/config.json文件
# 选择aliyun
$ picgo set uploader
? Choose a(n) uploader (Use arrow keys)
  smms
  tcyun
  github
  qiniu
  imgur
❯ aliyun
  upyun
(Move up and down to reveal more choices)

# 接下来会进入交互式命令行

在交互式命令行中需要填入的配置，关于如何查看这些配置，请查看👉 阿里oss配置获取

  "accessKeyId": ""
	
  "accessKeySecret": ""
  
  "bucket": "" // 存储空间名
  
  "area": "" // 存储区域代号
  
  "path": "" // 自定义存储路径,默认为空即可
  
  "customUrl": "" // 自定义域名，注意要加 http://或者 https://，默认为空即可
  
  "options": "" // 针对图片的一些后缀处理参数 PicGo 2.2.0+ PicGo-Core 1.4.0+，默认为空即可

步骤二

### 设置使用什么上传图床
picgo use uploader? 
Use an uploader (Use arrow keys)
  smms
  tcyun
  github
  qiniu
  imgur
❯ aliyun
  upyun

经过以上的配置，picgo会在.picgo/config文件中写入刚刚的填入的配置，如果刚刚的配置有什么问题，可以直接修改此文件。

需要注意的点

  1. 如果在上传服务设定中选择了picGo-Core (command-line)，在检查配置也没有问题的情况下上传不成功，有可能就是typro执行上传命令时无法读取到picgo npm扩展的环境变量。我们可以选择Custom Command 来调用picgo上传。
image-20201219223848621
  1. 命令中填入 {node path} {picgo path} u, u为picgo的上传指令
# 通过which命令获取到node命令的绝对路径
which node

# 通过which命令来获取到picgo的绝对路径
which picgo
image-20201219224846908

至此，picgo已经配置完毕，配置正确的话，插入图片时会出现Uploading的样式，表示正在上传。上传完之后，图片的本地地址会被替换为oss的线上地址。

image-20201219225516567

我们也可以通过命令行的方式来测试上传是否正常, 如果出现异常，picgo给出异常提示

picgo u ~/test.jpg
  1. 如果你在验证图片上传选项中出现 env: node: No such file or directory，则是因为你没有填写node的执行路径，command line 的格式必须是这样的 {node path} {picgo path} u。

WX20220131-113006.png

图片管理优化

我们如果是直接根据图片原文件上传到oss，那么我们得oss文件就变得非常不好管理了，全部文件都堆在根目录下。我们可以通过插件来重命名文件名，在文件名中增加{y}/{m}/{d}此类的目录层级，oss会自动根据文件路径层级归类文件，这样我们就可以非常方便地根据图片的日期来归类文件，便于查找迁移。

# 安装rename-file插件
picgo add rename-file

# 配置rename-file插件,进入交互式配置
picgo config plugin rename-file

# 默认为以下配置
fix-dir/{localFolder:2}/{y}/{m}/{d}/{h}-{i}-{s}-{hash}-{origin}-{rand:6}: ()

# 我们只要按年/月/日/hash的方式即可
{y}/{m}/{d}/{hash}

配置成功后，文件上传到oss就会变成 {y}/{m}/{d}/{hash}.js这样的目录层级去储存文件

图片压缩

在mac上截图，因为mac屏幕的分辨率高，所以我们产生的截图也会变得很大，对于我们oss流量的消耗也不小。所以我们需要在上传oss的时候，通过插件对图片文件进行一定比例的压缩。

# 安装compress插件
picgo add compress

# 选择compress作为转换器使用
picgo use transformer

如果当前插件一直处于安装状态卡住不动，可能是picgo默认调用npm安装的缘故。可以进入.picgo目录，删除node_modules目录，然后使用cnpm重新安装即可。更多问题请查看该插件issues👉 github.com/JuZiSang/pi…

总结

一路折腾下来，坑还是挺多，主要在熟悉picgo插件体系，安装插件方面(npm坑爹货)需要花费时间。在配置完成之后，在线图片在typora中就可以无感使用，非常方便。

同时也感受到了nodejs为前端开发者带来了更加广阔的应用空间，让前端开发者跳出浏览器框架，在工具链开发上，围绕某个应用点进行体系化插件化。这种软件的开发模式可以让更多人参与进来，不断完善软件的功能，大家的需求也可以通过开源的插件得以满足，甚至可以自己去开发符合自己使用场景下的插件，再通过开源的方式分享给有需要的人。代码，让生活变得更美好，希望这句话距离我们越来越近。

参考资料：

avatar
文章
阅读
粉丝