摘要:
  本文主要讲述了windows中Typora及PicGo的安装配置,并介绍了如何与Gitee相结合,上传图片到Gitee。

1.Gitee配置

1.1注册账户

  • 网址如下
1
https://gitee.com/
  • 正常注册即可

1.2 进行配置

  • 新建仓库

  这里要注意一下,在Gitee中仓库名称跟路径名称好像有点区别,仓库名称中的大写字母前都被换成了-,这里也不清楚为什么,不过后便发现自己删了这里的-之后,后边的Markdown文章不能加载已经上传成功的图片,所以这里还是只输入仓库名称,路径保持默认就可以了,在后边配置PicGo的时候需要注意这一点,另外这个仓库要设置成公开的,否则图片是不能被文章访问的。

  • 生成令牌

  这个令牌数字只有生成成功的时候出现一次,后边是不能查看的,这里需要保存一下。

2.安装node

  后边安装gitee插件会用到node,这里需要提前进行安装。

2.1 下载安装

  • 下载地址
1
https://nodejs.org/en/download/
  • 查看版本,确认是否安装成功
1
2
npm -v
node -v
  • 更换下载源,否则下载插件会很慢
1
npm config set registry https://registry.npm.taobao.org
  • 测试换源是否成功
1
npm config get registry
  • 在安装目录下新建两个文件夹

  我的路径分别为

1
2
D:\nodejs\node_global
D:\nodejs\node_cache
  • 指定插件存放和日志及缓存的存放文件夹
1
2
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
  • 配置环境变量
1
2
系统环境变量:NODE_PATH = D:\nodejs\node_global\node_modules
用户环境变量:path中C:\Users\用户名\AppData\Roaming\npm 改为 D:\nodejs\node_global
  • 测试插件是否能够安装到相应的文件夹
1
npm install express -g

3.PicGo安装配置

3.1 下载

1
https://github.com/Molunerfinn/PicGo

3.2 安装

  • 安装完毕如图所示:

3.3 配置

  • 插件设置:搜索gitee并选择第一个进行安装
  • PicGo设置:选择Gitee图床
  • 图床设置
参数 说明
owner 为自己的用户名,就是自己注册的时候的账户名
repo 为仓库名称,repo要写自己仓库页面下搜索引擎中的仓库名称,否则可能会出现提示上传,但是从来不会上传成功,也不会提示失败的情况。
path 为上传的文件存储的目录,图片文件都会上传到path中去,其中根目录的话就不用填写了,根目录就是和readme文件同一级的目录。
token 在Gitee中生成的个人令牌,该token只会在生成的时候显示一次,所以要注意保存。
  • 设置日志文件

  选择记录错误和警告

  • 定义链接格式

  选择默认即可

  • 打开几个设置

  可以关闭更新,这里其实可以打开上传前重命名,这样就可以自定义上传的名称,后来我还是打开了,这样命名后可以写上图片的大致内容,比较容易找一些。

4.Typora设置

  • 下载安装
1
https://www.typora.io/#windows
  • 自动上传插件typora-plugins-win-img下载
1
https://github.com/Thobian/typora-plugins-win-img
  • 安装插件
      复制文件window.html、pluginsresources\app文件夹中,对于window.html文件不要进行覆盖,覆盖后可能会出现偏好设置打不开的情况。其实可以不复制该文件,按以下方式操作也可以解决
1
2
3
4
<!--搜索该语句-->
<script src="./app/window/frame.js" defer="defer"></script>
<!--在后边加上如下语句-->
<script src="./plugins/image/upload.js" defer="defer"></script>
  • 更换插件中的图床接口

  打开plugins/image/upload.js文件,找到最后一行$.image.init() ,按以下配置(其他配置可以查看插件的github地址中的说明进行配置)进行配置

1
2
3
4
5
6
7
8
9
10
11
12
$.image.init({
target:'gitee',
gitee: {
message: "From:https://github.com/Thobian", // 必须参数,提交消息
branch: "master", // 要提交到的分支(默认为:master)
token: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", // token
userName: "userName", // 用户名
repositorie: "repositorie", // 仓库名
Folder: "image", // 可以把上传的图片都放到这个指定的文件夹下
BucketDomain: "https://gitee.com/api/v5/repos/", // 这个是不用变的,直接copy就好
}
});
  • 验证图片上传选项
  • 若成功,则如下图所示

  可以看到图片已经自动生成了链接

5.报错处理

  • 验证图片上传选项出现Failed to fetch

  此时可以查看PicGo的端口是否是默认的36677,若不是,修改为默认即可。