Markdown图片神器:PicGo-让你爱上笔记与分享

发布时间:2021-11-03 阅读 319

作者: 初虹(公众号「虹鹄山庄」创办人)
E-mail: chuhong@mail.sdufe.edu.cn


目录


0. 写在前面

我们在写文章时,通常需要单独存储图片资源,不仅占用磁盘空间,而且不好管理。自从全面使用 Markdown 进行个人文件记录后,深感其在图片处理的无力。

但是,用了图床之后,一切都不一样了 : )

看这篇文章的朋友们,相信你对 Markdown 都有了较深的了解。除了掌握语法之外,Markdown 比较棘手的问题便是图片管理。如果是不解决这个「拦路虎」,Markdown 的使用效果则会大打折扣。

最近连享会团队在开视频会议的时候,有小伙伴提到没有使用过 Markdown,也不了解相关的语法和软件,我在想 Markdown 的语法并不难学,但其对于图片的管理却是值得好好说一说。虽然连老师有自己的图床、也共享给团队伙伴们使用,但将平时个人笔记的图片也上传到连老师的公用图床,总觉得不太合适。所以,搭建好一个个人能够长久使用、安全便捷的图床很有必要。

目前对于 Markdown 处理图片的方法主要有两种,一是使用本地图片,二是使用图床。第一种方法会使你的图片管理杂乱无章,并且在分享的时候尤为不便。

图床,将本地图片上传到云端的同时、返回一个 URL 链接地址,你可以凭借该 URL 看到你的本地图片(是的,就是这么神奇)。当然图床也不是万能的,它胜在便捷、却有安全性的风险,同时需要网络的加持,不过现在已经早已不是流量「贵如油」的时代了,这点顾虑完全可以「抛之脑后」了。

相信如果你解决了图片管理这一难关,在 Markdown 上的使用又会近一大步。凭借 Markdown 的简洁性、美观性、易用性和传播性,你定会爱上记录

本文第一版 v1.0 发布于 少数派,单从流量上看,文章还算受欢迎。除了上面的原因之外,还有第一版中推荐的免费服务、近期有些不稳定。所以,我在第一版的基础上「增删改查」,形成了这个 v2.0 版本。

Markdown 是一款好工具、好帮手,我也希望在它帮助过我很多之后、能够尽快与你分享,尽力用文字为你解决在使用过程中的问题,让互联网对面的你也享受到写作记录的乐趣。这也是为什么本文在第一版仅仅发布三个月之后就进行更新的重要原因吧。

⭕ 文章很长,若没耐心读完,移至文末先看看「结语」部分、或许能让你对本文的主题有更深地认识~~

1. 何为图床?

图床,顾名思义就是进行图片存储的服务器,同时允许对外连接网络,所有人可以访问。

在写一篇 Markdown 文章时,如果待上传的是本地图片,则会显示文件的本地路径,那既然是本地路径,分享文件时就显得极不方便了。除了要将文章中的图片一并发送外,接受者还要配置与你图片路径一致的本地环境才能看到,或者根据自己的目录、修改文中的图片存放路径,而不是看到一行行路径地址。因为 Markdown 语法处理图片返回的是一个 URL 链接。

使用 Markdown 而未正确配置的本地图片,显示的是该图片的本地路径地址
使用 Markdown 而未正确配置的本地图片,显示的是该图片的本地路径地址

如果使用的是图床工具显示的是外链,可以「随时随地」查看,并不需一并发送图片,也无需自行配置本地环境。

或许上面说的对你过于抽象,我们设想这样一个场景:

你在 Typora 里写好一篇图文文章(为了显示差异,这篇图文采用本地图片和图床链接两种形式),然后发送这个.md文件给协作者进行编辑修改。

第一张图片为本地链接,第二张图片为外链
第一张图片为本地链接,第二张图片为外链

必定不久你的协作者就会一脸疑惑,说 Ta 根本就看不到第一张图片,因为在 Ta 那里,是这样的:

仅保留了第二张图,第一张图片「消失」了
仅保留了第二张图,第一张图片「消失」了

如果你又不小心删除了第一张图片,那么连你也无法在 Typora 看到它了。而你试着删除第二张图片的本地存放位置时,你发现仍然能够使用,实际效果和上图仍然一样。

想必好奇的你一定会惊喜为什么图床会如此方便?!

2. 好用图床推荐

图床服务分为免费和付费两种。如果你对图片资源管理和版权要求不是很高,或者仅是偶尔写写文章的话,免费的图床也是足够了。如果你想更有效地掌握自己的图床资源,还是建议采用付费云服务(尤其是半年多的使用体验下来)。

以下列举了几个常见的和相对好用的图床服务。

2.1 免费图床

白嫖的代价:众多免费图床服务注册条款里均有禁止商用说明,万一哪天你使用的服务挂掉了或者关闭了图片外链,那你所有的链接都无法访问了,对你造成的损失或许不小。比如,前几年的微博图床。

  • SMMS:稳定且快捷,是不少人主力图床的选择,同时开放 API,虽然已经推出付费套餐,但免费版本已经足够能用,不过公众号无法识别 SMMS 图床链接。

  • ImgURL:对游客有限制,每日最多上传 10 张,单张图片不能超过 5M,偶尔用用还是挺好用的~

  • GitHubGitee:代码托管云服务网站,帮助开发者存储和管理其项目源代码,且能够追踪、记录并控制用户对其代码的修改。不同的是,GitHub 服务器在国外,Gitee 服务器在国内,访问速度更快。甚至你可以更简单粗暴地把它理解为一个巨型网盘,可以存储任何东西。

    • 如果想要白嫖,推荐使用这两款服务,毕竟跑路的可能性极小。
    • 这里 | Github这里 | Gitee 你可以更详细地了解它们。

2.2 付费图床

  • 阿里云:目前国内最大的云计算服务商,这里 是阿里云 OSS 的定价单。

  • 七牛云:提供的免费额度还挺高,是不少博主的选择。这里查看 七牛云定价

虽然比较来看,七牛云价格可能稍便宜些,但作为图床的云存储来说,一年或许也就几十块钱,没太大差距。而且腾讯云对于微信公众号的运营来说会更流畅些。

真的不贵。除非你使用自己的图床进行公开分享,又恰是优质文章、浏览量巨大,流量耗费多,否则花费微乎及微。

这是我今年五月和六月份上腾讯云对象存储的账单
这是我今年五月和六月份上腾讯云对象存储的账单

更多图床的介绍可以移步 无需注册、打开即用,这 8 个免费好用的图床工具值得一试

3. 图片上传器:PicGo

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具 ——来自官网的自述

有了图床,我们可以将图片(或 GIF 等)返回一个 URL 链接,而不需要专门编辑、存放、管理众多杂乱无章的图片,直接复制,粘到 Markdown 编辑器里就能显示出来。

嗯挺好,但不舒服。

一篇文章,尤其是教程文章,势必会用大量图片,一张张上传、复制、粘贴,不断切换应用和浏览器,不仅繁琐的流程让人烦,打断的思路更难以寻回。

此时就需要一款图片上传工具了,支持全平台的有 PicGo、仅限 macOS 系统的有 uPic

我仅使用过的 PicGo,这里就推荐他了。(如果你对 uPic 对同样感兴趣,可以看看 少数派的这篇文章

PicGo 不仅是图片上传工具,同时也提供简易的图床相册管理功能。PicGo 开源且免费,跨平台支持 Windows、macOS、Linux 系统,使用起来也极为简单。

可以在 这里 下载软件安装包,或者通过包管理器 ScoopChocolateyHomebrew 一键安装。

  • Chocolatey:choco install picgo
  • Scoop:scoop install picgo
  • Homebrew:brew install picgo --cask

有关包管理器的知识,可以移步我之前的文章 Windows 系统缺失的包管理器 Chocolatey高度灵活和定制的「包管理器」:Scoop

下载之后,界面是如下:

初始配置好存储方案,PicGo 支持 SMMS、腾讯云、阿里云、七牛云、GitHub、又拍云、Imgur 等,同时支持 Gitee、青云等第三方图床服务。使用时,拖放图片到主窗口或 mini 窗口(macOS 为顶部状态栏),PicGo 会自动上传至云服务器并返回链接到剪贴板,直接粘贴即可使用。

3.1 快速上手

PicGo 的 UI 界面不算好看,但也不难看。虽设计普通简洁,却上手容易,小白也能理解。

选择图片上传,PicGo 会自动返回链接到剪贴板,只需要在相应编辑器里粘贴即可。

当然,除了该有的功能,PicGo 也有不少用心的地方。

  • 「快捷上传」:支持直接将剪贴板图片或 URL 一键上传。

  • 丰富的链接格式 PicGo 支持 MarkdownHTMLURLUBBCustom 五种格式的链接,对于 Markdown 写作者而言,最常用的就是「Markdown」格式,当然也支持自定义「Custom」。

  • 多样的的上传方式 PicGo 支持的上传方式也比较丰富。除了主窗口上传之外,Windows 和 Linux 用户支持 Mini 小窗上传,macOS 用户则还可选择顶部状态栏上传,使用更加便捷。

顶部栏上传@官网 GIF
顶部栏上传@官网 GIF

3.2 图片管理

PicGo 不仅是图片上传工具,同时也提供简易的图床相册管理功能。

打开「相册区」,可以看到当前图床中所有的图片集合。支持复制、修改 URL 和删除的操作,分别对应每张图片左下方的三个小按钮。

同时,也支持批量复制、删除或全选操作。如果你同时使用多个图床,还可以单独显示每个图床的情况。

值得注意的是,「删除」操作仅仅删除本地数据,从而不在相册区展示,但不会影响图床存储。

3.3 插件

PicGo 支持丰富的插件系统,这里是 官方插件 页面,截止 2021 年 6 月底,已经推出了 32 款插件应用,其中支持 GUI(图形用户界面,与之相对应的是 CLI —— 命令行界面)的插件共 30 款,涵盖「图床上传器」、「图片压缩」、「图片编辑」、「图床迁移」等多方面。

3.3.1 下载使用

2.0 版本之后,你可以简单通过插件设置页面,搜索安装插件。安装完成后,可以点击插件右下方齿轮图标,进行更新、禁用、卸载、配置及使用等功能。

注意:由于 PicGo 要使用npm来安装插件,所以用户必须先安装 Node.js

3.3.2 推荐的插件

  1. 进入 PicGo 插件设置,点击右下角齿轮图标,配置 pic-migrater
  • 文件名后缀:生成转换后的文件名后缀。比如,要转换test.md,则当前目录下转换后的文件名为test_new.md
  • 只包含/不包含:仅(不)转换包含自定义设置的图床链接
  1. 上传文件(文件夹)。等待转换完成。片刻即可在当前目录生成自定义文件名后缀的转换后的文件了。

下面是 picgo-migrater 具体使用的动图演示,文章以Zotero:如何定制参考文献样式——以《世界经济》中文期刊为例为例。

截止目前,picgo-migrater 已经成为了我使用频率最高的 PicGo 插件。我平时写的笔记、推文等使用的都是个人腾讯云图床,而在部分写好的稿件提交给连老师之前,均会使用该插件一键将图床转换为连老师及团队在用的阿里云图床。

3.3.3 其他设置

进入PicGo 设置,你可以自定义个人使用习惯。

比如,修改快捷键。默认快捷键 Ctrl+Shift+P 在键盘上距离太远,实现单手快速上传的可能性不大,所以我将其改成了 Ctrl+Shift+Alt+Z,截图后直接左手盲按即可。

还能够进行链接样式的自定义、选择是否上传前重命名、是否开机自启、是否接受更新等,还可以进行代理设置、Server 设置等。

4. 图床配置

打开 PicGo 设置 -> 选择显示的图床 一栏,可看到默认的 7 个图床,如果有其他需求,比如使用 Gitee 或 青云图床等,可以使用第三方插件自行配置~~

PicGo 本体支持如下图床:

  • 七牛图床 v1.0
  • 腾讯云 COS v4\v5 版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS V2 v2.3.0-beta.0
  • 阿里云 OSS v1.6.0
  • Imgur v1.6.0
  • 本体不再增加默认的图床支持。你可以自行开发第三方图床插件。详见 PicGo-Core ——来自官网介绍

每个图床配置虽然看起来不同,但实际上大同小异。具体配置信息可以查看 这里

本文仅挑选 SMMS、GitHub、腾讯云三个典型图床为例。

  • SMMS
{  
 "token": "" # 通过 SMMS 后台获取的 api token 值  
}
  • GitHub
{  
 "repo": "",      # 仓库名,格式是 username/reponame  
 "token": "",     # github token  
 "path": "",      # 自定义存储路径,比如 img/  
 "customUrl": "", # 自定义域名,注意要加 http://或者 https://  
 "branch": ""     # 分支名,默认是 main  
}

Gitee 图床配置与 GitHub 几乎相同。不过,PicGo 没有默认提供 Gitee 选项,所以需要通过插件开启第三方服务。首先在插件市场打开搜索Gitee,点击任意一个,即可完成安装和所有配置。

  • 腾讯云(阿里云图床与腾讯云几乎一致)
{  
 "secretId": "",  
 "secretKey": "",  
 "bucket": "",     # 存储桶名,v4 和 v5 版本不一样  
 "appId": "",  
 "area": "",       # 存储区域,例如 ap-beijing-1  
 "path": "",       # 自定义存储路径,比如 img/  
 "customUrl": "",  # 自定义域名,注意要加 http://或者 https://  
 "version": "v5" | "v4"  # COS 版本,v4 或者 v5  
}

4.1 付费服务:PicGo 与 腾讯云

付费服务没有体积大小的要求,也没有每日使用次数的限制,一切「按量计费」或者购买套餐,便显得从容多了。

具体计价表在上面已经给出链接。只要数据没有销毁,费用就要继续,不过确实足够便宜。

对于付费服务,这里以腾讯云为例,演示在 PicGo 中的配置。

  • 在腾讯云产品列表中找到「对象存储」,注册开通腾讯云对象存储 COS 服务。
  • 点击存储桶列表 -> 创建存储桶,名称和地域自定,访问权限设置为公有读私有写
  • 基础配置中,记住存储桶名称地域代码访问域名,以后要用到。
  • 在设置用户信息中,输入用户名,点击用户权限,搜索「QcloudCOSFullAccess」,勾选并确定,之后点击创建用户
  • 记住这里的 SecretIDSecretKey

此时,进入 PicGo -> PicGo 设置,勾选显示腾讯云 COS,然后进入详细的腾讯云设置界面,点选使用v5版本,再按照提示依次填入个人账号信息。自行选择勾选是否设为默认图床。

4.2 免费服务:Gitee + SMMS

我使用腾讯云 COS 作为主力图床的也有半年了,最开始也是对 Markdown 的图片管理摸索了好久。在使用腾讯云服务之前,有很长时间在折腾着免费方案,最终探索出了一套当时用起来很「爽」的套餐 —— Gitee 作为主力图床,搭配 SMMS 使用。

为什么会这么选择呢?主要原因是想着 Gitee 作为国内最大的代码托管平台,已然成为 GitHub 最大的替代品,相比于其他免费服务,风险性应该更低。现在看来,仍然是低估了 Gitee 的风险性,也高估了自己的判断力。最近 Gitee 的审查变得莫名奇妙,明明只是一张教程图,也会给你封掉。当然这只是少数。

之所以选择组合 SMMS 使用,不仅是因为其在 PicGo 中可直接开启服务,还有 Gitee 对于单张图片限制在 1M 以内,所以一些体积较大的 GIF 文件,可能不够用,而 SMMS 的限额更高,为 5M。

此方案虽有一定风险,但我犹豫了好久,在更新到 v2.0 版本时最终还是选择保留它。(原因会在文末一并说明。)

4.2.1 Picgo 与 Gitee

既然是免费服务,首先需要建立自己的 Gitee 图床库,详细步骤如下。

  • 注册个人 Gitee 账号
  • 新建图床仓库
  • 获取 token

点击头像,进入 个人设置 -> 点击左侧私人令牌 -> 生成新令牌 -> 修改私人令牌权限 -> 简单私人令牌描述 -> 提交即可生成私人令牌token

注意:token只会明文出现一次,注意保密,尽量不要丢失,否则又要重新生成

回到 PicGo。因为 PicGo 没有默认提供 Gitee 选项,所以需要通过插件开启第三方服务。首先在插件市场打开搜索Gitee,点击任意一个,即可完成安装和所有配置。

4.2.2 Picgo 与 SMMS

进入 SMMS 图床官网,注册登录之后,点击右上角User -> Dashboard,在APItoken中可以查看个人专属Secret Token

PicGo 中,打开插件设置,搜索SMMS,即可安装,然后将 token 复制过来,完成配置。

5. 与其他软件的联动使用

5.1 PicGo + VScode

VScode 是微软推出的一款轻量级文本编辑器,常年位居「最受欢迎的编辑器」前三甲。使用人数众多、扩展丰富、社区活跃、生态良好。

不少人将 VScode 作为「All in One」生产力和效率工具,不光用来写程序,它同时还具备写作(Markdown)、做计划(看板)、画流程图、查阅 PDF 或 Office 文件等不同功能,甚至还有插件可以用来看知乎、小霸王游戏机、查股票等「高级操作」。

我也在常在 VScode 写 Markdown 文章,所以也希望可以配置好图床,上传图片后,直接在光标处粘贴。

VScode 有 PicGo 插件,需要在扩展市场先安装再配置。

插件安装完成之后,进入设置界面,搜索picgo,默认使用 SMMS 图床,如果有其他不同需求,可以更改。

比如,下面是我配置的腾讯云图床示例,与 PicGo 界面几乎别无二致。

安装完成之后,即可使用快捷键Ctrl + Shift + U完成上传。看起来这与不配置插件并无区别,同样是截图 -> 快捷键上传 -> 粘贴,流程一步没少,没区别啊。

实际上,这款插件主要是给那些没有安装 PicGo 客户端。却又使用 VScode 写 Markdown 文章的读者有用,通过插件,可以实现与客户端相同的功能。

5.2 PicGo + Typora

在 Windows 平台,我也会用的 Markdown 编辑器就是 Typora 了。

Typora 是一款简洁高效、功能全面、执行优雅的全平台 Markdown 编辑器,也是目前最受欢迎本地 Markdown 编辑器之一(尤其是在 Windows 下)。它将源码编辑和实时预览合二为一,真正实现了「所见即所得」的渲染效果,给予作者极高的沉浸体验。

除了上述功能,Typora 搭配 PicGo 可以实现比 VScode(或者其他笔记工具) 写 Markdown 文章更流畅的体验了。

直接拖拽或直接将剪贴板图片粘贴进 Typora,便可实现自动上传到 PicGo 图床。实现的效果是这样的:

打开 Typora,使用快捷键 Ctrl + , 进入偏好设置,找到图像修改相应设置选项。

  1. 「插入图片」菜单
  • 选择上传图片
  • 勾选对本地图片应用规则对网络图片应用规则插入图片自动转义
  1. 「上传服务设定」选单
  • 上传服务:选择 PicGo(app)
  • PicGo 路径:自己主机中安装的 PicGo.exe 存放路径。
  1. 点击验证图片上传,便可完成设定。

此时,PicGo 里多出两张图片,就说明连接成功了。

在这篇文章 还在用 Word 做笔记?Markdown 开启你更高效工作的第一步! 中,我介绍了 Typora 的下载安装、基本界面与使用,如果你对这部分感兴趣,不妨先读读它~~

6. 结语

用过图床的人都知道,图床胜在便捷,所有图片存在云端,没有了本地管理的压力,尤其是在配合 Markdown 写教程文章和个人笔记时,格外好用。但随之而来的安全问题,更需要特别注意。为我们的「数字资产」找到一个足够安全、足够长久的存储空间,或许是你在看完本文后与图床的「便捷性」之间权衡的地方。

早在 2012 年,美国政府的 US-CERT(United States Computer Emergency Readiness Team )就在一份报告中介绍了备份的「3-2-1 原则」。

  • 3:存储 3 份完整文件,一份原件加上两份拷贝。这意味着三份同时损坏的可能性极小。
  • 2:将文件起码保持在两种不同的介质上。本地硬盘、移动硬盘、网盘,多个介质会使安全性大大提高。
  • 1:将一份拷贝保存在异地。不要在同一块硬盘上做备份,因为一旦你的这块硬盘挂了,备份便也不存在了。

按照这个原则,图床可能确实不够安全,或许你会说,听你这一讲那我还是不用了吧,不使用的结果就是一直通过本地路径管理 Markdown 图片?放心,这种可能性不是很大。除非你对文中插入图片分享的需求几乎没有,否则,我猜慢慢地你会放弃 Markdown 阵营,转移到你的「老东家」—— Word。

反过来你再想,存放在本地的「资产」就没有丢失风险吗?或许风险会更高。所以,做好备份一直都很重要(甚至愚人节的前一天还是世界备份日)。

我想说的是,绝大多数自己写的个人笔记、教程文章都完全可以找一家靠谱的云服务厂商、尽情使用图床,对于个人照等私密图片(文件等)可以通过上文提到的「3-2-1」法则,进行多介质备份。

在本文第一版的末尾中,我还在推荐如果你是新手、又在观望是否要搭建一个属于自己的图床,可以先试试我摸索出的免费服务方案 Gitee + SMMS。如今仅仅过去了三个月,我犹豫了,要给新手推荐哪个方案?新手的定义是什么,可能对「大佬」来说,我们每个人都是新手。如果你不自己折腾折腾,那你可能永远都是新手。就像写文章一样,你写了第一篇,才会有第二篇、第三篇 …… 但如果「不动手」,就永远没有从一到无穷大

如果你想「一步到位」,那就折腾一个,开启你的 Markdown 极速之旅吧!如果你仍在观望,又顾虑付费服务的费用(就像当时的我一样、其实真没必要),建个 Gitee 仓库,先试一试也成。或许图床的功能没用上,倒也顺便熟悉了码云、未尝不是件坏事。

当然,你在使用过程中遇到的问题,都可以和我联系,我们一同「无限进步」~~

7. 参考文献

8. 相关推文

Note:产生如下推文列表的 Stata 命令为:
lianxh Markdown
安装最新版 lianxh 命令:
ssc install lianxh, replace