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

news2024/12/24 21:42:53

前言

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.jschild_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`); 

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

第二个坑: 以上的三条命令是同步执行的,也就是说,可能我们还没addcommit完成,就已经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}`)
 });
 });
 });
 }) 

总结

以上的方法已经足够正常使用了,如果你想更优雅一点,可以获取一下当前的日期,使用其为文件夹命名。这样就能将你仓库中的图片按照日期归档了,想要查找或修改某一张图片的时候就能有更好的体验啦!

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/164296.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【学习笔记】【Pytorch】十、线性层

【学习笔记】【Pytorch】九、线性层学习地址主要内容一、前言二、Pytorch的线性层三、Linear类的使用1.使用说明2.代码实现学习地址 PyTorch深度学习快速入门教程【小土堆】. 主要内容 一、前言 在神经网络中,我们通常用线性层来完成两层神经元间的线性变换。 …

【C++】面向对象---继承(万字详解)

目录前言一、继承的定义及概念二、继承方式三、基类和派生类之间的转换四、切片五、继承中的作用域六、派生类中的默认成员函数七、继承中的友元与静态成员继承与友元继承中的静态成员八、棱形继承和虚继承棱形继承虚继承总结前言 继承是面向对象的一个重点,而继承…

活动星投票医疗保障案例推介网络评选微信的投票方式线上免费投票

“医疗保障案例推介”网络评选投票_线上免费投票系统_功能齐全的微信投票_在线免费投票用户在使用微信投票的时候,需要功能齐全,又快捷方便的投票小程序。而“活动星投票”这款软件使用非常的方便,用户可以随时使用手机微信小程序获得线上投票…

图形编辑器:标尺功能的实现

大家好,我是前端西瓜哥。今天我们来实现图形编辑器的标尺功能。 项目地址: https://github.com/F-star/suika 线上体验: https://blog.fstars.wang/app/suika/ 标尺指的是画布上边和左边的两个有刻度的尺子,作用让用户知道他正在编…

java 探花交友day2 项目简介,环境搭建 登录验证码

技术方案: 项目结构: 项目概述 通过接口文档(API文档)定义规范 开发工具安装与配置 Linux虚拟机 YAPI 账号 tanhuaitcast.cn 密码123456 安装个安卓模拟器,然后安装APK 开发环境说明 初始工程搭建 阿里云短…

Leetcode:235. 二叉搜索树的最近公共祖先(C++)

目录 问题描述: 实现代码与解析: 递归: 原理思路: 精简版: 迭代: 原理思路: 问题描述: 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先…

1589_AURIX_TC275_PMU_Flash的基本特性以及操作

全部学习汇总: GreyZhang/g_TC275: happy hacking for TC275! (github.com) 关于这部分,感觉能够看到的比较有实践指导价值的信息不多。这里关于是否支持cache的信息,之前在内核手册等地方其实也看过了。 DFlash不支持buffer命中的功能&#…

21.Isaac教程--GEMS 导航堆栈简介

Isaac GEMS 导航堆栈简介 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 导航堆栈必须执行以下高级功能: Mapping 映射用于自动创建操作环境的地图。 该地图既用于定位,又用于路径规划。 它可以由具有附加功能的人进行注…

deap遗传算法 tirads代码解读

deap遗传算法 tirads代码解读写在最前面Overview 程序概览参考deap框架介绍creator模块创建适应度类Types定义适应度策略创建个体类Toolbox类创建种群(个体、策略以及粒子)Initialization1. 创建 attr_int 运算符2. 创建 individual_guess() 运算3.创建新…

学会python后:收集每天热点内容信息,并发送到自己的邮箱

嗨害大家好鸭!我是小熊猫~ 实现目的 本篇文章内容主要为如何用代码,把你想要的内容,以邮件的形式发送出去 内容可以自己完善,还可以设置一个定时发送,或者开机启动自动运行代码 代理注册与使用 注册账号并登录 生成ap…

使用TDengine时序数据库的介绍以及系统整合

目录 一、 如何使用 安装目录介绍 数据文件查看和备份 客户端连接 sql使用 二、 系统整合 Java连接配置 Demo示例 三、 对采集点、超级表、子表和设备等关系进行维护 一、 如何使用 安装目录介绍 目录/文件 说明 /usr/local/taos/bin TDengine 可执行文件目录…

css笔记2

目录 选择器进阶 1、复合选择器 1.1后代选择器:空格 1.2 子代选择器: > 2、并集选择器:, 3、交集选择器 4、hover伪类选择器 Emmet语法 背景相关属性 1.1背景颜色 2.1背景图片 3.1背景平铺 4.1背景位置 5.1背景相关属…

linux中断机制

目录 1.中断机制 1.1.中断流程图 1.2.代码结构图 2.中断代码 2.1.硬件中断 2.2.asm.s 2.3.trap.c 2.3.1.trap_init函数 2.3.2.die函数 2.4 .sys_call.s 2.4.1._system_call.s 3.总结 1.中断机制 何为中断,中断里面各种名词的区分,请看下面这几篇…

安装VSCode图文版(附安装所需插件)

安装VSCode安装地址下载安装安装成功安装所需插件安装go插件安装中文简体安装地址 VSCode 安装地址 https://code.visualstudio.com/ 下载 在下面两个地方都可以下载,左侧下载可以根据自己的需要进行版本或者系统的选择下载。 安装 同意协议 选择附加项 为什…

基于python知识图谱医疗领域问答系统实现(完整代码+数据可直接运行)

直接上结果展示: “让人类永远保持理智,确实是一种奢求” ,机器人莫斯,《流浪地球》 项目概况 本项目为一个使用深度学习方法解析问题,知识图谱存储、查询知识点,基于医疗垂直领域的对话系统的后台程序 运行效果:

【阶段四】Python深度学习04篇:深度学习项目实战:深度神经网络预测客户流失率(分类模型)

本篇的思维导图: 深度神经网络预测客户流失率(分类模型) 项目背景 应用Keras框架构建单隐层网络和深度神经网络进行金融客户流失率的预测,以及模型的优化。主要用来熟悉Keras全连接层网络的使用。 数据获取 本次建模数据来源于网络,数据项统计如下: 编号

uni-app Vue3实现一个酷炫的多功能音乐播放器支持微信小程序后台播放

前言 本文存在多张gif演示图,建议在wifi环境下阅读📖 最近在做网易云音乐微信小程序开源项目的时候,关于播放器功能参考了一些成熟的微信小程序,如网易云音乐小程序和QQ音乐小程序,但是发现这些小程序端的播放器相对于…

【寒假每日一题】洛谷 P7471 [NOI Online 2021 入门组] 切蛋糕

题目链接:P7471 [NOI Online 2021 入门组] 切蛋糕 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述 Alice、Bob 和 Cindy 三个好朋友得到了一个圆形蛋糕,他们打算分享这个蛋糕。 三个人的需求量分别为 a,b,c,现在请你帮他们切蛋糕…

Linux文件的默认权限、软硬链接和属性

✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:Java案例分…

Java-FileInputStream和FileOutputStream的使用,txt文件及图片文件的拷贝

Java-FileInputStream和FileOutputStream的使用什么是IO流?流是什么?IO流的类图流的分类字符与字节的区别FileInputStream的使用1.构造器2.常用方法3.使用FileInputStream来读取txt文件FileOutputStream的使用1.构造器2.常用方法3.使用FileOutputStream写…