MarkDown软件Typora图片上传解决方案：Typora+PicGo图床

MarkDown软件Typora图片上传解决方案：Typora+PicGo图床

一、问题描述

今天在网上学习Java开发环境配置，想在CSDN上写篇博客记录安装及环境配置过程。

经过在网上的调研，相当一部分的程序员都喜欢用一款名为"Typora"的MarkDown编辑软件来记录学习过程或者撰写博客草稿。于是我也开始使用这款软件

Typora官方下载网址：Typora — a markdown editor, markdown reader.

打开网站后往下滑到底，选择你操作系统下载安装即可。

我先用markdown编辑软件Typora编辑好了内容，如下图所示：

但当我想着直接复制到CSDN上时，却发现图片没有办法一起复制过来：

1.1 问题的原因

仔细观察图片转存失败的信息，很容易就发现：Typora中的图片插入并不是像Word那样直接嵌入文档中的，而是调用图片保存在本地的路径地址。所以就不难理解，当跨平台转存图片时，是没有办法调用你的计算机的本地图片的。

二、解决方案

2.1 PicGo简介

这里介绍一款非常好用的图片转存软件：PicGo

这款软件和Tpora结合使用能实现：在Typora上插入图片时，自动转存到一个名为"图床"的云图片库中 (类似图片网盘的概念)。

这样，你的Typora文档中的图片地址不再是本地路径，而是图床的网络地址，这样跨平台上传文档能够直接复制粘贴，不必再重新一个个复制粘贴图片了。

使用PicGo前的图片：

使用PicGo后的图片：

2.2 PicGo的安装

官方下载地址：PicGo (molunerfinn.com)

注：安装包在Github上，可能需要"科学上网"，关于如何"科学上网"，本篇文章里不详细介绍。

打开网站后。拉到最下方，点击图片中的链接即可下载PicGo安装包。

下载好后双击图标进行安装：

安装步骤如下图所示：

这里我选择安装在E盘，各位随意。点击"安装"，即可安装成功。

安装成功后，在任务栏上点击此图标，打开主界面：

2.3 PicGo图床设置

PicGo安装完成后，此时还不能直接用，需要点击右击图床设置，对已有的图床库进行绑定，才能正常使用。

PicGo里给了很多图床选项，原本我时打算使用"GitHub图床"，但实际使用下来会出现以下两个问题：

①相册缩略图不显示；

②Typora文档中图片加载失败，不显示图片

在网纱翻阅了：使用了包括但不限于：①修改hosts；②把图床仓库从私有改成公开；③卸载重装PicGo

等方法还是无法解决。无奈之下只好选择Gitee图床。

默认的PicGo图床设置里是没有Gitee图床的，必须通过安装插件来安装Gitee图床。使用PicGo插件安装功能之前必须先安装Node.js

2.3.1 Node.js安装及环境配置

Node.js官方下载网址：Node.js (nodejs.org)

下载好安装包后双击打开：

一直按"Next"，傻瓜式安装

选择安装位置这里，我这里装在E盘下。

安装成功。文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不

方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache

我这里是以管理员身份新建文件夹

因此需要以管理员身份启动命令行。按住Win+X，点击"Windows PowerShell (管理员)（A)"

然后在cmd命令下执行如下两个命令，注意双引号里是你的电脑里这两个文件夹的地址，我这里是E盘下的，你需要根据你实际安装路径修改

npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"

执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“E:\Program Files\nodejs\node_modules”，如下图：

鼠标右键点击"此电脑"，点击"属性"

右侧点击"高级系统设置"

点击"环境变量"

在"系统变量"下点击"新建"

变量名输入：NODE_PATH

变量值输入：E:\Program Files\nodejs\node_modules

注意：此处仍然是根据你的nodejs安装位置修改是什么盘，我这里是E盘

最后编辑用户变量里的Path，将相应npm的路径改为：E:\Program Files\nodejs\node_global，如下：

更改前：

更改后：

环境变量配置完成。

2.3.2 Node.js环境配置测试

按住Win+X，点击"Windows PowerShell (管理员)（A)"

在cmd命令下执行

npm install webpack -g 

然后安装成功后可以看到自定义的两个文件夹已生效。

webpack 也已安装成功，执行

npm webpack -v 

可以看到所安装webpack的版本号：

2.4 PicGo插件安装

现在可以安装Gitee插件了，有两种方法，一种不行就使用另外一种。

2.4.1 方法一

直接在PicGo右侧点击"插件设置"，搜索"gitee"，选择下图的"gitee"和"gitee-uploader"，点击安装即可

2.4.2 方法二

使用管理员命令行进行安装。按住Win+X，点击"Windows PowerShell (管理员)（A)"，输入：

npm -v

能显示 版本号，说明你npm可以使用:

然后 转到 Windows 配置目录在C:\Users\XXX\AppData\Roaming\picgo 下 ，XXX 为 电脑的用户名，根据自己的情况修改即可。

cd C:\Users\XXX\AppData\Roaming\picgo		# XXX输入你的电脑的用户名

最后在该目录下，使用npm手动安装gitee图床，命令如下：

npm install picgo-plugin-gitee-uploader

安装成功，然后重启PicGo即可。

重启后打开PicGo主界面的"插件设置"，会发现刚刚的"gitee-uploader"插件已经安装好了：

"图床设置"里也多了"gitee"图床的选项：

注意，点击"设置Server"：

确保Server是打开的，并确保"监听地址"和"监听端口"如下图所示：

2.5 Gitee注册及图床创建

Gitee可以理解成国内版的GitHub

Gitee官网网址：Gitee - 基于 Git 的代码托管和研发协作平台

注册一个属于你的账号。

注册完成后，登录账号。

2.5.1 新建仓库

右上角点击加号，点击"新建仓库"：

我这里已经创建过了，忽略警告，按照下面图片填写和勾选即可：

点击"创建"，一个用来存放图片的图床仓库就创建好啦。

2.5.2 创建私人令牌

右上角点击头像，点击"设置"：

点击"私人令牌" ----> “+生成新令牌”

填写好描述后提交即可：

注意：私人令牌仅在提交后只出现一次，切记复制到别的地方。要是忘了，删除再新建另一个就好了。私人令牌事关个人数据安全，请妥善保管。

2.5.3 Gitee图床创建

打开PicGo的"图床设置"，点击"gitee"：

“repo"是刚刚新建仓库的地址，格式必须按"持有者/仓库名"填写，且必须是小写，若不知道可以点"个人主页”–>PicBed仓库，到浏览器网址上复制过来：

“brance"填写"master”。

"token"填写刚刚复制的私人令牌。

其他选填。

最后，点击"确定"，并"设为默认图床"。

2.6 PicGo与Typora的链接

到这里最后一步，就全部设置完毕啦。

打开Typora，点击"文件"下的“偏好设置…”：

PicGo路径，根据你安装的路径填写，我这里是E盘。

按图片设置好后，点击"验证图片上传选项"：

出现以上提示信息，设置成功！

再回到Typora编辑界面，当插入图片时会自动上传图片，就可以愉快地开始你的Typora之旅了~