Hexo + Typora + PicGo-Core 写作三件套

前言

使用 Hexo 写博客已经很久了，各方面体验还算顺滑，唯一感觉不是那么爽的地方在于图床的使用。

如果在写作的过程中需要插入图片，我需要先中断写作，打开图床 web 页面，上传图片，复制图片链接，再回到编辑器粘贴图片链接。整个过程极其繁琐，令人苦不堪言。直到我遇到了 PicGo-Core。

PicGo-Core 可以和 Typora 无缝连接，在几乎无感的情况下完成图片的上传与 markdown 格式的转换，极大得提高了写作的流畅程度。

本文将结合我的自身实践，讲述 Hexo + Typora + PicGo-Core 的联合配置过程，希望能够对你有所帮助。

文章适合已经把玩过 Hexo 或者对 Node 有所了解的用户理解，如果您没有接触过对应知识，还请自行补充。

文中 “Hexo + Typora 联动” 章节与 “Typora + PicGo-Core 联动” 章节并无关联，可以只阅读自己感兴趣的部分。

环境说明

本文讲述的所有操作均在以下环境中完美运行，其他环境大同小异，烦请看官自行钻研。

操作系统：Ubuntu 20.04
node：v12.16.3
yarn：1.22.5
hexo： ^5.0.0
Typora：version 0.9.98(beta) for Linux
PicGo-Core: 1.4.12

Hexo + Typora 联动

默认情况下 hexo new ${post} 命令只会创建一个名为 ${post}.md 的 markdown 文件，我们需要自行使用编辑器打开这个文件，然后才可以进行编辑写作。Hexo 提供的 Scripts 能力可以合并这两个步骤，在创建文件之后自行调用编辑器打开文件供我们编辑。

操作步骤非常简单，只需要在 Hexo 博客根目录的 “scripts” 文件夹下新建一个 editArticle.js 文件并写入如下内容即可：

// 新建文档之后用 typora 打开文件
var spawn = require('child_process').spawn;
hexo.on('new', function(data){
    spawn('${path-to-editor}', [data.path]);
});

其中：

${path-to-editor} 代表编辑器可执行文件的位置，可以根据实际情况更改，比如我这里写的是 /usr/bin/typora；

Typora + PicGo-Core 联动

安装 Typora

直接在 Typora 官网下载安装即可。
安装 PicGo-Core

Typora 支持一键安装 PicGo-Core 和一键打开 PicGo-Core 的配置文件，位置如图：

如果你喜欢手动安装 | 参考文档，执行以下命令即可：
1
yarn global add picgo

配置 PicGo-Core | 参考文档

PicGo-Core 官方支持 sm.ms，七牛，腾讯云 COS，阿里云 OSS，Github 图床，又拍云，imgur 等图床。选择自己喜欢的图床并按照文档进行配置即可。

如果你使用的图床不在 PicGo-Core 支持列表中，也可以使用插件 picgo-plugin-web-uploader 来实现自定义图床。

安装插件 | 参考文档
1
picgo install web-uploader

配置插件 | 参考文档

编辑 PicGo-Core 的配置文件，写入以下内容：

{
  "picBed": {
    "current": "web-uploader",
    "web-uploader": {
      "customBody": null,
      "customHeader": null,
      "url": "https://www.ladydaily.com/tools/upload/${token}",
      "paramName": "file",
      "jsonPath": "data.o_url"
    }
  },
  "picgoPlugins": {
    "picgo-plugin-web-uploader": true
  }
}

我这里使用的是多吉图床，${token} 表示多吉图床的 token，其他图床大同小异，自行配置即可。

设置 Typora

在 Typora 中依次点击 “文件” - “偏好设置” - “图像”：
- 在 “插入图片时” 设置中选择 “上传图片”，并勾选 “对本地位置的图片应用上述规则”，“对网络位置的图片应用上述规则”，“允许根据 YAML 设置自动上传图片”，“插入时自动转义图片 URL” 等选项；
- 在 “上传服务” 设置中选择 “PicGo-Core (command line)” ；
然后点击 “验证图片上传选项” 按钮，出现 “验证成功” 提示即可。

后记

至此，写作三件套的联动配置已经全部完成。如果您有更好的想法或者实践，欢迎与我交流，万分感谢！

One More Thing

如果你也在从事微信公众号写作，相信你会喜欢这个可以帮你排版的工具：MarkDown Nice。

参考文档

PicGo-Core 官方文档
Typora配合上传插件picgo自动上传图床chevereto — umr