工具 | Typora + PicGo-Core 自动上传图片到图床
0 前言
Markdown 是现在十分流行的标记式语言,在博客等很多场景中应用十分广泛。众所周知,Markdown 中的图片是以链接的形式存在的,不像 Word 等传统文本编辑器直接把图片嵌入文档中。传统的做法是在写作过程中,先将所需图片上传至在线图床,然后将生成的链接插入文档中;或者先将图片保存在本地,再插入在磁盘中的路径(只能本地查看图片)。这两种方法显然都比较麻烦,体验欠佳。
Typora 在较早的版本中就支持了从剪贴板直接将图片粘贴至文档中,图片被将自动保存到指定的目录中。在本地写作的场景中(只在本地查看、或写完导出为PDF格式分享),插入图片的体验已经明显提升。但对于需要直接在线分享 md 的场景(例如本地写完粘贴到在线的博客 md 编辑器),本地图片链接就不起作用了,依然需要手动上传图片后再更新图片链接。
但在版本 ≥ 0.9.9.32 on macOS or 0.9.84 on Windows / Linux
后,Typora 集成了通过第三方工具自动上传图片的功能。只需进行5分钟的设置,就能极大提升 md 写作体验。下面分享配置过程。
版本信息:
Typora: 0.9.96
PicGo-Core: 1.4.18
1 PicGo-Core
安装
PicGo-Core 是一个开源的命令行图片上传工具。虽然可以在 Typora 的设置中一键下载安装 PicGo-Core,但它是从 Typora 自己的 fork 库中安装的,并不是 PicGo-Core 的官方开源库;因此版本通常较为老旧,存在各种没有必要的 bug、也无法使用更新的 feature。
基于以上理由,强烈建议直接在本地自己安装 PicGo-Core。安装本身也很简单:
# 需要 Node.js 版本 >= 8
npm install picgo -g # 或 yarn global add picgo
配置
安装成功后,可以使用交互式命令行方便地进行配置并自动生成配置文件,无需手动生成和复制粘贴(有的终端支持不太好,可以多换几个试试)。配置好图床后使用 picgo use uploader
选择当前要使用的 Uploader
。
$ picgo set uploader
? Choose a(n) uploader (Use arrow keys)
smms
❯ tcyun
github
qiniu
imgur
aliyun
upyun
我使用的是默认的 SM.MS 图床,选择 smms
选项后要求输入 api token。在注册登录 SM.MS 后,可以在个人中心获取到自己的 token,输入即可完成配置;其他图床也有对应的交互配置选项。
如果由于种种原因无法通过交互命令行完成配置,也可以手动生成配置文件。这里以默认的smms图床为例,更多图床的配置方法详见配置文档。
picgo 的默认配置文件为
~/.picgo/config.json
。其中~
为用户目录。不同系统的用户目录不太一样。linux 和 macOS 均为
~/.picgo/config.json
。windows 则为
C:\Users\你的用户名\.picgo\config.json
。
{
"picBed": {
"uploader": "smms", // 代表当前的默认上传图床为 SM.MS,
"smms": {
"token": "" // 自己的 token
}
},
"picgoPlugins": {} // 为插件预留
}
测试
完成安装和配置后,就可以通过命令行上传图片到图床了。如果执行命令后返回了图床的URL,则说明配置成功。
# 上传具体路径图片
picgo upload /xxx/xxx.jpg
# 上传剪贴板里的第一张图片(上传时会将格式转成png)
picgo upload
2 Typora 设置
配置好 PicGo-Core 后,在 Typora 的偏好设置-图像中进行设置。
上传服务设定
由于我们自己安装了 PicGo-Core,没有使用它自己集成的,所以上传服务选择 Custom Command
(自定义命令),命令使用 picgo u
即可。
设置后点击下方的“验证图片上传选项”,他会自动上传两张图片测试图片上传服务。如果出现如下结果,说明配置成功。
插入图片设置
如果想在插入图片时直接上传,可以按照如上选项设置。然而这样设置存在一个问题,插入图片后需要等待上传完成返回URL才能在文档中看到图片的预览,感觉不够流畅。并且如果反复多次替换图片,图床中会出现很多冗余图片,造成空间浪费。
批量上传图片
由于上述原因,个人建议在插入图片时先保存到本地以实现流畅的即时预览,在完成文章后统一批量上传文章中用到的所有本地图片。
在菜单中选择“格式-图像-上传所有本地图片(Format-Image-Upload All Local Images)即可完成批量上传。
结语&参考文献
以上是我自己配置 Typora 图片上传的过程,希望能对你有所帮助。文中考虑的情况不够全面,可能存在疏漏,欢迎留言指正讨论!
参考文献:
工具 | Typora + PicGo-Core 自动上传图片到图床的更多相关文章
- 关于使用阿里OSS服务搭建图床和使用PicGO上传图片到图床
最近喜欢上了使用markdown来写博客,可是markdown的图片却是本地的,如果我要发博客,那么又要重复截图了.于是干脆弄了个图床,本地截图的时候上传到图床,markdown中的代码结果也是图床里 ...
- 打造一个上传图片到图床利器的插件(Mac版 开源)
写markdown博客如何将截图快速上传到图床--记一个工具插件的实现(windows版 开源)(2017-05-31 20:23) 打造一个上传图片到图床利器的插件 鉴于写博客截图手动上传到图床的步 ...
- Typora + PicGo-Core + Custom Command 实现上传图片到图床
教程参考 Typora+PicGo-Core(command line)+Gitee实现图片上传到图床 主要借鉴 picgo 操作命令 Typora + PicGo + Gitee 实现图片自动上传到 ...
- Typora+Picgo+Gitee实现上传图片
下载picgo和node.js 百度网盘地址: 链接:https://pan.baidu.com/s/1QwbXn4vFuDfSFNOnZU5-Jg 取码:efgc 打开picgo,安装gitee-u ...
- 技术人的福音!教你如何使用Typora+PicGo实现图片自动上传功能
前言 写技术文章的小伙伴,对于 Typora 肯定不陌生,用来编写 Markdown 特别的方便. 但是,有个问题,就是当我们插入一个图片,并且使之可以在公网访问时,操作流程特别的麻烦. 首先,你需要 ...
- 解放双手,markdown文章神器,Typora+PicGo+七牛云图床实现自动上传图片
本文主要分享使用Typora作为Markdown编辑器,PicGo为上传图片工具,使用七牛云做存储来解放双手实现图片的自动化上传与管理.提高写作效率,提升逼格.用过 Markdown 的朋友一定会深深 ...
- 写markdown博客如何将截图快速上传到图床——记一个工具插件的实现(windows版 开源)
打造一个上传图片到图床利器的插件(Mac版 开源)(2018-06-24 19:44) 更新于2018年2月 做了以下改动: 1.修复了一个bug,把服务器区域做成可配: 七牛有华北,华东,华南以及美 ...
- Typora+PicGo+Gitee笔记方案
前言:需要学习的知识太多,从一开始就在寻找一款能让我完全满意的编辑器,然而一直都没有令我满意的.在前两天Typora新版本更新后,总算是拥有了一套我认为很完美的笔记方案:使用Typora编写markd ...
- Typora PicGo Gitee博客写作好搭档
利用Gitee仓库存放图片 1.首先在Gitee上创建一个公开的仓库,我这里创建了一个名叫resources的仓库: 2.在Gitee中获取私人令牌(个人设置界面中): 安装配置PicGo 1.下载自 ...
随机推荐
- Koa & WebSocket inAction
Koa & WebSocket inAction node.js https://koajs.com/ ping / pong socket.io client send 2 as ping ...
- auto open Chrome DevTools in the command line
auto open Chrome DevTools in the command line --auto-open-devtools-for-tabs # macOS $ /Applications/ ...
- VAST上线后,如何提升NGK算力生态的收益和流动性?
自比特币诞生以来,"挖矿"一词就成功地步入了大众的视野,也成为了加密货币领域最重要的组成部分之一.无论是早前基于比特币和以太坊为主的算力挖矿,还是逐步进入大众视野的质押挖矿,亦或是 ...
- C++算法代码——阿克曼函数
题目来自: 题目描述 阿克曼( Ackmann) 函数 A(x, y) 中, x, y 定义域是非负整数, 函数值定义为: 输入 输入两个数,表示m和n. 两个数均不超过10. 输出 输出一个数,表示 ...
- 翻译:《实用的Python编程》02_01_Datatypes
目录 | 上一节 (1.7 函数) | 下一节 (2.2 容器) 2.1 数据类型和数据结构 本节以元组和字典为代表介绍数据结构. 原始数据类型 Python 有一些原始数据类型: 整数 浮点数 字符 ...
- 一些小Tip
导语 个人感悟,持续更新中... 正文 无论NIO还是AIO,都没有在数据传输过程(tcp/udp)作革命性的创新.他们在传输过程的效率和传统BIO是一样的,还是会产生阻塞(网络延迟,Socket缓冲 ...
- ELK的一点认识
为什么需要ELK: 一般大型系统是一个分布式部署的架构,不同的服务模块部署在不同的服务器上,问题出现时,大部分情况需要根据问题暴露的关键信息,定位到具体的服务器和服务模块,构建一套集中式日志系统,可以 ...
- Vue学习笔记-rest_framework_jwt 学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- JAVA 判断一个字符串是否是合法的日期格式?
采用SimpleDateFormat类的parse方法进行判断,如果转换不成功,就会出现异常.另外,还需要判断字符串的长度,若不判断,第二个字符串就会验证通过,实际上也不是合法的.话不多说,且看代码: ...
- SpringBoot(十一): Spring Boot集成Redis
1.在 pom.xml 中配置相关的 jar 依赖: <!-- 加载 spring boot redis 包 --> <dependency> <groupId>o ...