使用 Typora 配合 PicGo app 实现图片自动上传图床

最近刚把博客的框架从 Hexo 迁移到 Astro，想起来还有个叫做 Typora 的玩意，之前因为听说可以自动上传图片到图床就下载了，但是一直没有研究，而且也没找到合适的图床，就一直放在那，现在趁着这个机会重新研究了一下。

准备图床

首先要准备一个图床。我是选择了 Cloudflare 的 R2 做图床，免费的 10GB 存储对我来说应该是足够了，而且国内和国际的访问速度也都不错，每个月 100 万次写操作和 1000 万次读操作对我这个博客来说也是绰绰有余了。不愧是大慈善家 Cloudflare

创建完存储桶后，记得要在存储桶的设置里开启 R2.dev 子域 才能允许公开访问，然后最好是绑定一个自己的域名，不绑定也不是不能用，就是慢了点（存储桶设置

然后创建一个 S3API 令牌用于之后上传图片，权限记得选择 对象读和写 。记下 API 令牌的 AccessKey 和 SecretAccessKey，这两个只会出现一次，之后是没办法再查看的。

配置 Typora 和 PicGo

首先在 Typora 的 文件 -> 偏好设置 -> 图像 -> 上传服务设定 中选择 PicGo 作为上传服务，command line 和 app 都可以，我选择的是 app，有 GUI 配置起来比较方便（

安装好 PicGo app 之后，因为 PicGo 原生不支持上传 Cloudflare，需要额外安装插件，我使用的是 picgo-plugin-cloudflare-r2，根据文档构建完之后导入就可以了，很简单。

成功导入插件后打开插件的设置，将上一步记下的令牌填进去。配置名称可以随便写一个你觉得合适的名称，cloudflare 端点可以在存储桶设置的 S3API 那一栏查看，不过记得把最后的存储桶路径删掉填到下面的存储桶名中。

配置完毕后，打开 Typora 设置，点击 验证图片上传选项 ，顺利的话你就可以拿到图片的访问地址了。如果出错的话可以看看报错，检查一下配置文件有没有填错之类的。

图片处理

其实到上一步为止已经完全实现了我一开始的需求，不过事已至此，我们还有很多优化的空间。

在第二步的基础上，我安装了 picgo-plugin-compress 插件和 picgo-plugin-super-prefix 插件。

第一个插件可以在上传图片之前自动对图片进行压缩，具体配置可以看插件的文档。

第二个插件可以在上传图片之前对图片进行添加前缀以及重命名操作，我主要用到的就是重命名操作，将图片自动命名成 YYYYMMDDHHmmssSSS 的格式。其实 PicGo 自带了图片使用时间重命名的功能，但是自带的重命名每次上传图片时都要弹框确认文件名，而且设置里也没有关闭弹窗的选项，我觉得有点麻烦，于是还是选择安装插件实现这个功能。

快速新建文章

虽然实现了插入图片自动上传图床，但是要新建一篇博客文章还是比较麻烦，直接在 Typora 里面新建文章容易因为文章的格式问题让构建出错，那有没有什么方便的方法新建一篇博客呢？

有的兄弟，有的

我稍微修改了一下这个博客主题的 new-post 脚本，加了两段代码，能在创建完新文章后直接在 Typora 中打开新文件以及打开 PicGo app

javascript

// 打开 Typora 并加载新创建的文件
exec(`"C:\\Program Files\\Typora\\Typora.exe" "${fullPath}"`, (error) => {
    if (error) {
        console.error(`打开 Typora 失败: ${error}`)
    } else {
        console.log('Typora 已打开')
    }
})

javascript

// 打开 PicGo
exec(`"C:\\Program Files\\PicGo\\PicGo.exe"`, (error) => {
    if (error) {
        console.error(`打开 PicGo 失败: ${error}`)
    } else {
        console.log('PicGo 已打开')
    }
})

顺便还修改了一下创建文章时的提示，能够在创建文章的时候直接输入分类，标签和文章简介。

最后在项目根目录放了一个批处理文件，执行 npm run new-post 命令，然后把批处理文件拖到 utools 快捷启动里，这样就可以快速新建一篇博客了。