Typora自动转换图片链接

December 09, 2023
测试
测试
测试
测试
2 分钟阅读

Typora将本地图片上传到图床

  • Typora将本地图片上传到图床
    • 前言
    • 工具
    • 创建仓库
    • 配置PicGo
    • Typora配置PicGo服务
    • 验证

Typora将本地图片上传到图床

养成习惯,先赞后看!!!

前言

最近因为忙公司的项目,已经好长时间没有更新文章了.最近刚好抽出了点时间,就想着还是写一篇文章吧.

今天的这篇文章没有涉及到技术方面,只是我生活中刚好发生过的一个小问题,这里刚好就分享出来,顺便看看大家都是怎么解决的.

不知道大家在写文章的时候,一般都是通过什么工具写的?我自己一般都是用CSDN自带的编辑器来写的,但是就在我之前还在更文章的那段时间里,出现了这么一个让我恶心的事,那就是我的谷歌浏览器很鬼畜的将我的文章中的内容全部翻译成了中文.我试着重新翻译回来但发现已经于事无补了.

因为这次翻译不仅是把我的文字翻译成了中文,更要命的是它把我文章中的那些标点符号也全部换成了中文状态下的标点符号,这就导致我的那些Markdown语法的标记就全部失效了.我写了快一个星期的稿子说实话也就直接废了.那时候自己还发了个朋友圈.

image-20210426143856129
image-20210426143856129

朋友们也给我提了不少的建议,我自己也顺便深入思考了一下这个问题.差不多有下面这些总结以及问题.

  • 在CSDN自带的编辑器上写稿子的前提是我们的电脑是能够联网的,否则我们就无法使用CSDN自带的编辑器来写稿.
  • 我们可能有时候给谷歌浏览器安装了自动翻译的插件,我的原因可能就是这个,这个插件本身是有点灵敏过头的.他有时候直接不管你要不要翻译它都会直接帮你翻译,我的情况应该就是这种.

再考虑完这些问题之后我就准备重新开始在本地的编辑器Typora上面编写,但是在Typora上面写稿的话,又有一个问题那就是,Typora上面存储的图片的路径是以你电脑的绝对路径进行存储的,就如下图所示:

image-20210426144526492
image-20210426144526492

很显然当我们将我们的稿子发布到我们的各大平台时,很显然我们的图片链接是识别不出来的,所以我们的这些图片都是直接失效.所以这时候我们就需要我们的图床工具了.这里我之前就已经推荐过一款图床工具-(聚合图床),如下图:

image-20210426145104040
image-20210426145104040

但是我后来又想了想,总不能我每截一张图我就上传一次图床吧,这样岂不是太麻烦了.于是我就想着能不能直接让Typora自动生成图片的HTTP链接呢.其实之前我自己也看过Typora中图像的设置,但是那时候我的Typora的版本还比较的老,根本就没有显示如下图圈出来的功能:

image-20210426145412728
image-20210426145412728

于是我就本能的以为是不存在这样的方法的,但是最近我又重新Google了一下发现其实是有的,于是今天就把这个分享出来,当然了大家可能也有自己对应的解决方案都可以在评论区说出来.

工具

这里我们需要的主要就是这个几个工具或者说是平台吧

  • 码云(gitee)

Gitee主要就是在gitee上面建立我们专门用来存放图片的仓库

  • PicGo

PicGo是本机用来上传到对应图片仓库的工具,可以支持多种图床仓库

  • gitee-uploader

这是PicGo用来将图片上传到gitee上面的插件

创建仓库

Gitee地址:https://gitee.com/

我们首先需要登录Gitee,然后创建我们对应的仓库

image-20210426152602813
image-20210426152602813

之后填写相关的信息即可

image-20210426152823528
image-20210426152823528

之后我们就需要创建我们自己的令牌即Token,这个Token主要就是让我们接下来配置的PicGo能够识别我们的身份让我们能够访问我们的Gitee仓库.

image-20210426154250510
image-20210426154250510
image-20210426154351759
image-20210426154351759

之后我们点击创建即可,但是这里我们要注意一定要记得复制该Token,因为之后Token就不会通过明文的方式显示了,而是显示加密之后的字符串了.到这里我们关于仓库的大家就已经结束了,接下来我们就需要来配置我们的PicGo了.

配置PicGo

PicGo下载地址:https://github.com/Molunerfinn/PicGo/releases

之后我们下载以.exe结尾的即可.

image-20210426154759146
image-20210426154759146

下载完成之后点击下一步傻瓜式安装即可.

之后我们进入插件设置页面

image-20210426154846764
image-20210426154846764

一般情况下我们直接在这里面搜索gitee-uploader插件即可,但是不知道为什么我的不行,所以只能自己手动下载了.但是这里下载的话我们需要用到npm,所以我们首先需要安装npm再来下载我们的gitee插件.

image-20210426155100523
image-20210426155100523

之后我们需要切换到PicGo的系统路径下来下载我们的插件,记住这里并不是在安装路径下,基本路径都是这样的C:\Users\用户名\AppData\Roaming\picgo

之后运行该命令:npm install picgo-plugin-gitee-uploader 即可.

之后我们打开PicGo,如果能够看到该页面就说明已经安装成功了.

image-20210426165129059
image-20210426165129059

之后我们就只需要在配置一下我们的插件即可.

image-20210426165500598
image-20210426165500598
  • repo:码云上面我们的仓库路径一般是这样的格式:用户名/仓库名
  • branch:分支名,因为我们初始化的时候直接就是master分支,所以直接填master即可
  • token:就是我们上面创建的token令牌
  • path:这是之后我们的图片生成之后的HTTP链接的一级目录的名字
  • customPath:为了防止图片名重复覆盖,所以需要选择图片的命名方式,这里我选择的是年月的时间戳格式
  • customUrl:这个可以不填

最后我们点击确认,我们的PicGo图床服务就已经配置结束了.

Typora配置PicGo服务

低版本的Typora是不支持定义上传图片的功能了,所以需要我们更新到一定的版本,Up自己就是这样的,更新完成之后,我们点击文件->偏好设置->图像.我们就会看到下面的界面

image-20210426170218508
image-20210426170218508

这时候我们只需要配置一下即可

  • 上传服务:这里就选择我们上面刚刚配置过的PicGo即可
  • PicGo路径:这里就是我们软件的安装路径了,注意和上面的系统路径进行区分

最后我们在测试一下上传图片的功能,点击验证图片上传选项,

image-20210426170518337
image-20210426170518337

如果出现上面的页面就说明已经配置成功了.

验证

最后我们再来验证一下我们的图片上传是否已经真的配置成功.

我们随便通过微信截图截一张图然后粘贴到Typora里面,看看图片的连接是怎样的的.

image-20210426170728162
image-20210426170728162

可以看到图片的链接已经从原来的绝对路径转换成了HTTP链接了,并且我们可以发现链接地址指向的就是我们的码云仓库,并且仓库后面的一级地址就是我们上面定义的blogimg,图片的名字也就是对应的时间戳.这就说说明我们已经配置成功了.

并且我们打开我们的仓库也可以发现的确多了很多的图片:

image-20210426171400665
image-20210426171400665

到这里,以后就能更加方便的写稿了,就不用再担心图片链接地址的问题了.

原创不易,码字不易,如果觉得UP写的还可以的话,可以关注一下我的公众号:萌萌哒的瓤瓤

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多