前言

Typora是一个十分好用的 markdown 编辑软件,我们都知道 markdown 中的图片是以链接形式指向本地或是云端的图片。因此为了使 markdown 文档具有可移植性,我们会选择将图片存放到云端(即图床),这样即使在别人电脑上打开 markdown 文档也能正常显示图片。

而使用 markdown 写文档,插入图片时手动上传云端十分繁琐。试想一下,你要先打开图床网站,上传图片,然后手动复制图片链接,再插入到 markdown 文档中,这个过程太让人觉得枯燥乏味。

实际上,Typora在较新的版本中已经实现了“图片上传”功能。引用Typora中文站的一段原文:

在 Typora 的新版本中(≥ 0.9.9.32 on macOS or 0.9.84 on Windows / Linux),我们增加了一个 “上传图片 “的功能,通过第三方应用程序或脚本将图片上传到云图像存储。

它的动机是,由于 markdown 文件只是纯文本文件,当你嵌入图片时,markdown 文件并不 “拥有 “那些图片,而只是保留一个对所使用的外部图片文件的弱引用。当你移动或分享 markdown 文件时,那些图像也应该被移动或分享,这就带来了维护成本。但是,如果这些图像是在网上托管的,你就可以自由地移动或分享 markdown 文件,而不需要维护纯文本和它所使用的图像之间的参考。

Typora 现在支持 iPic, uPic, PicGo 等应用程序,能够将你的图片上传到 Imgur, Flickr, Amazon S3, Github, 或其他图片托管服务。

借助Typora内置的图片上传将图片自动上传到阿里云对象存储OSS上有着不错的体验,OSS提供了存储和访问服务。它的优点是高速、稳定,缺点是需要按量计费(按存储大小和访问流量实时计费),不过对于个人而言费用很低(例如在某一年我的OSS存储了约50张图片,访问量在几百次每月,费用是0.02~0.04元/月)。

废话不多说,教大家如何配置。

Typora的下载

Typora的官方中文网站:https://typoraio.cn/ ,可以下载正版的Typora软件,但是要钱(大概几十块钱)。

如果你不想付钱,我提供你一个破解版的Typora(version: 1.10.8),下载链接:Typora-1.10.8.exe,安装完打开后会弹出 15 天试用弹窗,点击试用即可,之后不会再弹窗。安装完就能正常使用了。

Typora写文档非常丝滑,在我心中它是最优秀的 markdown 编辑器。

阿里云OSS对象存储

购买OSS资源包(非必需)

没有阿里云账号的先注册账号,这个照着阿里云的要求进行注册即可。

阿里云OSS对象存储网址:https://oss.console.aliyun.com/ ,访问这个网址进入到OSS页面。

阿里云的OSS产品默认按量计费,同时提供了OSS资源包供用户购买,资源包就相当于具有一定存储额度的套餐。由于我的OSS并未使用多少空间(用了这么久不到100MB),因此我没有买资源包,直接按量计费。

如果你未来要存储的图片较多且占用空间较大,可以考虑购买资源包,找到“资源包管理”,创建资源包后,资源包类型选“标准-本地冗余存储”,如下图所示:

OSS资源包购买

最少40G空间、一年价格9元(价格可能有浮动,以你所见页面为准)。

创建并配置Bucket

不论你买没买资源包,接下来都点击“Bucket列表”,随后创建Bucket,下图是创建Bucket的配置页面,名称和地域根据你自己的意愿进行编辑和选择。

Bucket配置

按图上选择好后,点击完成创建即可。注意,按量计费的产品,阿里云账号上要有一定的余额。

这样创建的Bucket仍是个私有网盘,生成文件链接后是无法访问的,因为阿里云默认阻止公共访问。为了能起到图床的效果,我们进入到这个Bucket的概览,找到读写权限,点击前往编辑:

新建的Bucket概览

关掉 阻止公共访问

关掉阻止公共访问

之后再读写权限中设置成“公共读”,这样日后存入的图片就能通过链接来访问。

配置阿里云AccessKey

阿里云账号的 AccessKey 是访问阿里云 API 的密钥,具有该账户完全的权限。

将鼠标光标移动到阿里云网站页面的右上角个人头像处,可以看到有个AccessKey的按钮,点击。

创建AccessKey。

弹出的东西不管三七二十一都点确定就行,为了安全起见,更建议使用子账号进行上面的操作。

阿里云OSS部分就此配置完成。

Typora配置

行内公式自动渲染配置

在用markdown写文档时,行内公式通常用 $$ 包裹起来显示,这种行内公式称为“内联公式”。而通过我上面那个链接下载的Typora刚打开时是无法自动渲染内联公式的,如下图所示:

我们需要设置成自动渲染公式,首先点击偏好设置:

在偏好设置中选择“Markdown”部分:

勾选“内联公式”选项即可:

图片上传配置

打开Typora软件,点击偏好设置:

在偏好设置中选择“图像”部分:

其他部分按图中红框部分配置,配置完后,点击“下载或更新”

之后打开配置文件:

在配置文件中按以下代码进行配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"picBed": {
"uploader": "aliyun",
"aliyun": {
"accessKeyId": "你的AccessKeyID",
"accessKeySecret": "你的AccessKeySecret",
"bucket": "你的bucket名称",
"area": "oss-cn-beijing", //换成你自己的Endpoint(地域节点)
"path": "img/", //bucket下的文件夹,之后Typora上传的图片都将放到这个文件夹下
"customUrl": "https://<你的bucket名称>.oss-cn-beijing.aliyuncs.com", //OSS概览里的Bucket域名(开头要加https://)
"options": ""
}
},
"picgoPlugins": {
"picgo-plugin-super-prefix": true
},
"picgo-plugin-super-prefix": {
"prefixFormat": "",
"fileFormat": "YYYYMMDD-HHmmss"
}
}

super-prefix插件配置

在上面的代码中有配置super-prefix插件的参数,这个插件主要是为了自动生成图片目录,名称等,需要安装super-prefix插件。

在你的电脑上找到picgo.exe可执行文件,这个文件一般在 C:\Users\你的用户名\AppData\Roaming\Typora\picgo\win64目录下,在这个目录下打开终端执行下面这个指令:

1
.\picgo.exe install super-prefix

回到之前的配置代码,其中 prefixFormat 表示 bucket 子目录的位置,fileFormat 表示图片命名规则。像上面这样配置最终会生成的图片链接是这样的:https://<你的bucket名称>.oss-cn-beijing.aliyuncs.com

配置完成后,点击“验证图片上传选项”:

如下图所示,代表配置成功了:

到此配置完成,之后你每次在Typora上写文档时,直接Ctrl+C复制某张图片,然后在文档中粘贴,就能自动将图片上传到OSS并插入到文档内了,非常方便。并且,如果你有自己的博客网站,使用这样的方式也能减轻你的服务器的带宽压力,因为图片资源的加载压力交给了OSS。

OSS对象存储设置自定义域名(可选)

你是不是感觉到阿里云OSS对象存储提供的默认链接又臭又长?如果想要让你的网站更加个性化,可以考虑绑定自己的域名。

设置自定义域名需要满足以下几个条件:

  • 域名已备案;
  • 未在图片处理绑定;
  • 未在当前Bucket绑定;
  • 未在其他Bucket绑定。

域名可以直接去阿里云或者其他云服务平台购买。备案的话阿里云和其他云平台都提供了备案服务。阿里云域名备案链接:https://beian.aliyun.com/ 。

域名备案有一些事项需要注意,可以百度搜索如何备案,根据步骤来完成备案。

备案需要通过相关部门的审核,根据我的经验来看,大概是5-30天完成备案。

域名完成备案后,找到你的存储图片的bucket,找到”域名管理“选项:

点击”绑定域名“后,输入你所想要的完整链接,可以自定义三级域名,比如pic.<你的域名>

然后域名解析将pic.<你的域名>以CNAME方式解析到阿里云给你分配的OSS链接,比如解析到<你的bucket名称>.oss-cn-beijing.aliyuncs.com

待解析生效后,此时你就已经可以用自己设置的域名访问到对应的图片了。但是此时只能以http方式访问,如果想要能够以https前缀的链接访问的话,还需要一个SSL证书。

SSL证书掏钱是可以买的,一般是几百块上千块一年,但是对于我们个人而言,花钱买SSL证书实在是太贵了。可以去 OHTTPS-免费HTTPS证书(SSL证书)、自动化更新、部署、监控 申请免费的证书,虽然每次只能申请三个月,但是好在它可以自动帮你续签,并且支持泛域名,十分适合我们没钱的个人玩家。直接为*.<你的域名>申请SSL证书,这样能支持所有的三级域名,十分方便。

SSL证书到手后,可以先将证书上传到阿里云上,然后在OSS的域名绑定页面加上证书,这样就能使用https了!