Typora自动转换图片链接

简介: Typora自动转换图片链接

Typora将本地图片上传到图床


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


前言


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


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


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


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


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


在CSDN自带的编辑器上写稿子的前提是我们的电脑是能够联网的,否则我们就无法使用CSDN自带的编辑器来写稿.

我们可能有时候给谷歌浏览器安装了自动翻译的插件,我的原因可能就是这个,这个插件本身是有点灵敏过头的.他有时候直接不管你要不要翻译它都会直接帮你翻译,我的情况应该就是这种.

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


cd813131b6d72c5a90a9cbf72eba92ba.png


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


dd38c22faaf2834dfd332254a7e84d9d.png


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


f06b3252bb0a46b4aa41c0916c6d4a57.png


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


工具


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


码云(gitee)

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


PicGo

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


gitee-uploader

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


创建仓库


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


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


cf9800dc2d124f394eec91ca1a28f15c.png


之后填写相关的信息即可


02d2be3a5fd5620f0033ae17064f4e14.png


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


16824d492f1bdd0c105fa9f06a948198.png

dc109ff9db94bddb474e4e0ffe406b39.png


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


配置PicGo


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


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


c9142692c329a6d778ca81ccc3059978.png


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


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


0615495ae644120b54d98f63a6965f9e.png


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


cbf61ebc539fe756f289b76e9ce1bc9a.png


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


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


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


d990802afc4ef76d30dab62d28b69e87.png


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


59bcd99d9517c3ef4077ec5dedac3f5c.png


repo:码云上面我们的仓库路径一般是这样的格式:用户名/仓库名

branch:分支名,因为我们初始化的时候直接就是master分支,所以直接填master即可

token:就是我们上面创建的token令牌

path:这是之后我们的图片生成之后的HTTP链接的一级目录的名字

customPath:为了防止图片名重复覆盖,所以需要选择图片的命名方式,这里我选择的是年月的时间戳格式

customUrl:这个可以不填

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


Typora配置PicGo服务


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


e609433bcebc402e25999482059b56ff.png


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


上传服务:这里就选择我们上面刚刚配置过的PicGo即可

PicGo路径:这里就是我们软件的安装路径了,注意和上面的系统路径进行区分

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


bee912f8a914feaacb2c7b136a3f6015.png


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


验证


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


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


304205003297f65d5d2be06724fe61a5.png


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


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


02f4ab161f62cb21a19138fefe84717f.png


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


相关文章
|
Docker 容器
Docker安装稳定版及指定版本
Docker安装稳定版及指定版本
2719 0
|
自动驾驶 5G
5G技术中的时分双工(TDD)与频分双工(FDD)的应用区别
5G技术中的时分双工(TDD)与频分双工(FDD)的应用区别
2109 63
|
JavaScript 容器
vue element plus Infinite Scroll 无限滚动
vue element plus Infinite Scroll 无限滚动
431 0
|
传感器 算法 安全
蓝牙中频率跳变技术的原理及其应用
蓝牙中频率跳变技术的原理及其应用
894 9
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
JavaScript 前端开发 UED
Vue 组件设计:构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点,提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点,展示出丰富的视觉效果。组件还支持动态布局和缩放,确保灵活的界面展示和用户体验。文章提供了详细的代码实现,包括 HTML、JavaScript 和 SCSS,帮助开发者快速集成和定制自己的树形结构组件。
964 0
Vue 组件设计:构建生动多彩的树形结构组件
|
机器学习/深度学习 算法 自动驾驶
深度学习之分布式智能体学习
基于深度学习的分布式智能体学习是一种针对多智能体系统的机器学习方法,旨在通过多个智能体协作、分布式决策和学习来解决复杂任务。这种方法特别适用于具有大规模数据、分散计算资源、或需要智能体彼此交互的应用场景。
747 4
|
前端开发 Java 数据库
SpringBoot解析指定Yaml配置文件
最近在看某个开源项目代码并准备参与其中,代码过了一遍后发现多个自定义的配置文件用来装载业务配置代替数据库查询,直接响应给前端,这里简单记录一下实现过程。
677 0
|
自然语言处理 PyTorch 算法框架/工具
CLUE社区最新神器!PromptCLUE:大规模多任务Prompt预训练中文开源模型
CLUE社区最新神器!PromptCLUE:大规模多任务Prompt预训练中文开源模型
763 0
|
算法 搜索推荐 Python
推荐算法的Python实现——ItemCF(基于物品的协同过滤)
推荐算法的Python实现——ItemCF(基于物品的协同过滤)