经过前面两弹的介绍,相信大家对图床都不陌生了吧,但是小魔童觉得这样做法还是不方便,使用 github
的仓库来存放图片,如果不能上外网的话是不能展示图片的,自己可以上外网还不行,需要别人上外网才可以看到我文章中的图片,这也太难了。。。
另外使用 github issue
的方式确实会好了很多,至少不需要外网了,直接在国内网络中就可以解决该问题,可是问题来了,小魔童比较懒,觉得这种方式每一次都要拖拽图片到 issue
中,且自己还要备份一下图片,还是觉得不优雅,不喜欢,我想实实在在的做个懒人
那行,那就满足你的要求,今天我们来介绍和实际操作一个高雅的使用图床的方式
Typora+PicGo+Gitee + node.js 打造个人高效稳定图床
-
推荐指数
五颗星
-
实用指数
五颗星
-
易操作指数
五颗星
-
宜人性
五颗星
部署PicGo
- 访问
picgo
官网,进行下载
image
<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226221307800</figcaption>
一定不要安装在 C:\Program Files\
下,否则后面 PicGo
上传图片的时候一定会失败,因为 PicGo
无法解析这一路径,例如我的安装路径为
E:\picgo\PicGo
安装node.js
-
PigGo
需要使用插件的方式才可以将图片上传到gitee
,需要安装node.js
,点击如下链接进行下载
- 安装成功之后,可以选择使用命令的方式更换镜像源(也可以不做此步操作)
window 进入 cmd,执行如下语句
npm config set registry https://registry.npm.taobao.org
安装github-plus插件
-
运行
imagePicGo
,单击插件设置
,在搜索中输入github
,安装搜索结果中的github-plus
<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226223257358</figcaption>
-
若在点击安装时,
PicGo
弹出需要安装node.js
并重启PicGo
,则直接重启电脑,即可解决此问题 -
等待安装
github-plus
的过程中,可以继续执行如下步骤
部署Gitee
-
在
imagegitee
上建立一个仓库专门用于存放图片,例如我的:<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222200113</figcaption>
-
获取自己账号的token
点击右上角自己的头像 -> 设置 ->
image<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222425832</figcaption>
点击左侧私人令牌 ->
image<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222504818</figcaption>
-
生成新令牌 ->
image<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222644727</figcaption>
-
勾选权限,
imagePicGo
只需要user_info
和projects
的权限 -><figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222745679</figcaption>
-
保存
token
,该token只会出现一次,离开页面后就不会再出现了
继续设置PicGo
-
回到
imagePicGo
,点击图床设置->githubPlus
,在设置中填入repo
和token
,并选择origin
为gitee,即可完成设置。其中,repo
要填入owner/repoName
例如上图中的仓库名,填入红框中的字符串即可<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226222200113</figcaption>
-
如图
image<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226223743460</figcaption>
部署Typora
-
下载
Typora
,网上随便一搜则可下载得到 -
点击
Typora
左上角的文件
->偏好设置
-
在弹出的界面中定位到
图像
,选择插入图片时
选项为上传图片
,并勾选对网络位置的图片应用上述规则
-
设置完成如图所示
image<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226224209182</figcaption>
-
选择
image上传服务
为PicGo(app)
,点击验证图片上传选项
,如果出现如下图所示界面,说明配置已成功,然后你就可以直接在Typora中插入图片了,Typora会自动上传并替换图片地址为网络地址。<figcaption style="margin: 10px 0px 0px; padding: 0px; line-height: inherit; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">image-20210226224336681</figcaption>
自己写文档的时候上传图片
- 只需要将图片复制到
Typora
里面,PicGo
会自动帮你上传图片到Gitee
上,且可以自己重命名
这下子,有了 Typora+PicGo+Gitee \+ node.js
大法,写文章写博客就会更加专注了
作者:小魔童哪吒
感谢各位的观看,若你能实际操作,收获会更大,麻烦帮忙点个在看哟!
网友评论