Typora自动上传文章图片太难折腾？十三行JavaScript代码足矣

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

前言

Typora是我用过最爽的markdown文本编辑器了。但是有一点很让人难受就是在写文章的时候粘贴上的图片是本地路径。这就导致在复制文章到各大博客平台时发表图片无法显示。然后需要各种办法去处理文章中的图片不仅要手动上传到某个图床然后再回来编辑文章总之就是令人非常抓狂。

虽然在Typora>偏好设置>图像>上传服务中有PicGo的选项。我折腾过一次按照官方的教程弄了很长时间还是失败了因此被劝退。

一次偶然我发现了Typora上传服务中的Custom Command可以执行node命令便使用刚学了两天的node.js写了一个脚本完整代码附在本文最后。

先说思路创建一个JavaScript文件每次粘贴图片后使用node.js运行这个js文件。在这个js文件中我们将粘贴的图片放到一个本地git仓库中。然后将其推送到远程git仓库拿到远程仓库中的图片地址放回文章中这样就大功造成。

无需安装下载额外的各种插件软件等。仅仅使用十余行js代码便可完成。如果你使用的是其他编程语言那么我相信你在看完这篇文章后也会有自己的思路。

实现过程

最重要的一点远程的仓库必须要设置为公开状态否则拿到的图片链接无法访问。为什么我会先说这一点因为我最开始的时候选择的gitee码云平台完成之后才发现gitee不让我们这样使用如下图。

所以我最后选择了gitcode平台背靠CSDN不是不知名的小平台可以放心使用。现在这篇文章中你看到的图片就是存放在这个平台。github平台感兴趣的也可以去尝试一下方法也是一样的。

前期准备

1.创建一个JavaScript文件这就是我们的脚本了。文件路径随意命名也没有要求。但是需要记下你的文件在你电脑上的绝对路径比如你在D盘下创建路径就是D:\文件名.js。为了方便文件管理我是放在Typora的安装目录下命名为imgServe.js。绝对路径是D:\software\Typora\imgServe.js创建好后就可以打开Typora>偏好设置>图像按照下图的方式配置:

这里有一个要知道的点根据Typora官网的配置说明只要我们输出的代码最后几行中含有“https://”开头的urlTypora就会识别到并且替换掉我们粘贴的图片这里就是将图片本地路径替换为网络路径。

简单来说我们只要在本地仓库推送到git平台后console.log()一下远程仓库的地址+文件名就行了。

现在开始编写imgServe.js文件

第一步获取本地图片的路径和文件名

在Typora运行我们的imgServe文件的时候实际上的命令为

 node imgServe.js "C:\\xxx\\xxx\\xxx\\图片名称.png"

所以只要我们使用以下代码就能够获取到本地图片的路径和名称

 const argv = process.argv;// 由node.js提供直接使用就好
 
 
 const localImageUrl = argv[2] 
 /* argv是一个数组
 数组的第一项是node.js的路径
 数组的第二项是imgServe.js的路径
 数组的数组的第三项就是我们所需要的粘贴的图片的本地路径*/
 
 
 const fileName= localImageUrl.split("\\")[localImageUrl.length-1]
 /* 将路径按照“\\”切分为数组数组的最后一项就是我们图片的文件名 */

第二步复制图片到image文件夹本地仓库

为什么要使用复制而不是移动因为在git push完成之前使用的还是图片的本地路径。如果直接移动那么效果就是粘贴图片后图片瞬间消失被移动了本地路径找不到文件一会后又显示push完成使用了网络路径。这样使用体验就不太好。

当然如果你还是比较在意电脑的存储空间那么在push完成后使用一条命令将其删除即可。

CMD复制文件到指定文件夹指令我想大家都知道

 copy [要移动的文件] [指定的文件夹]

但是如何在imgServe.js中使用这个指令呢?

答案是node.js的child_process模块中的exec方法。

一行命令即可使用

 const { exec } = require("child_process");

使用exec我们就可以执行复制CMD的指令了后面的git add / git commit / git push也同样是靠这个来执行。

现在就来将粘贴后的图片复制到本地仓库image文件夹下

 exec(`copy ${localImageUrl} D:\\software\\Typora\\image`)

第三步推送本地仓库到远程仓库

注意这一步看似简单但是有两个大坑。

第一个坑按照平时的习惯我们自然是进入到image文件夹执行推送。但是我失败多次后才发现以下的命名走不通

 exec(`cd D:\\software\\Typora\\image`)

这就意味着无法进入到image文件夹我们只能在image文件夹外进行推送操作其实很简单只要在git命令中加上image文件夹的绝对路径就行了

 exec(`git -C D:\\software\\Typora\\image add .`);
 exec(`git -C D:\\software\\Typora\\image commit -m "新增图片"`);
 exec(`git -C D:\\software\\Typora\\image push`);

你是不是以为这样就大功造成了并没有。

第二个坑 以上的三条命令是同步执行的也就是说可能我们还没add或commit完成就已经push了结果可想而知。

解决的方法很简单exec能接收一个回调函数我们在里面执行下一步的命令顺序就不会错乱了

 exec(`git -C D:\\software\\Typora\\image add .`,() => {
 exec(`git -C D:\\software\\Typora\\image commit -m "新增图片"`, () => {
 exec(`git -C D:\\software\\Typora\\image push`);
 });
 });

这样大功造成。

第四步拿到远程git仓库中的图片路径

由于远程仓库的地址是固定的你可以随便在里面放置一张图片。然后点击图片查看到图片的大图复制浏览器上方的url或点击右键复制图片地址去掉文件名之后就得到我们需要的地址了。

注意一定要点开图片得到的才是图片地址不点开得到的是仓库的页面地址拿过来无法展示图片

我拿到的地址是https://gitcode.net/wjunxxx/typora-image-repository/-/blob/master/图片名称.png

前面的路径是固定的我们只需要改变文件名就行了。

现在我们在push操作完成之后输出这个路径+图片名就行了

 exec(`git -C D:\\software\\Typora\\image push`, () => {
 console.log(`https://gitcode.net/wjunxxx/typora-image-repository/-/blob/master/${fileName}`)
 });

这样我们的脚本就正式完成了。

完整代码

 const argv = process.argv;
 const { exec } = require("child_process");
 
 const localImageUrl = argv[2] 
 const fileName= localImageUrl.split("\\")[localImageUrl.length-1]
 
 exec(`copy ${localImageUrl} D:\\software\\Typora\\image`, () => {
 exec(`git -C D:\\software\\Typora\\image add .`,() => {
 exec(`git -C D:\\software\\Typora\\image commit -m "新增图片"`, () => {
 exec(`git -C D:\\software\\Typora\\image push`, () => {
 console.log(`https://gitcode.net/wjunxxx/typora-image-repository/-/blob/master/${fileName}`)
 });
 });
 });
 })