Windows下Typora使用gitee做图床

Windows下Typora使用gitee做图床

在macOS下，Typora有uPic这样比较好用的图床工具。Windows上面，默认只支持picgo作为图床工具。这里使用picgo来配置gitee作为图床。

一、创建gitee图床仓库

1. 注册账户
2. 新建仓库
3. 新建token（令牌），后面配置插件需要用到。

这些步骤比较简单，看着界面内容就能操作。另外建议创建仓库的时候，勾选初始化仓库选项。仓库未初始化，不知道第一次上传图片的时候会不会有影响。

二、安装picgo-core

1. 安装nodejs

2. 安装picgo

   npm install picgo -g
   

三、配置picgo-core

1. 安装gitee插件

   picgo install gitee-uploader
   

2. 配置config文件

   先使用命令

   #设置配置文件    
   picgo set uploader  
     
   1.按上下键找到gitee，回车    
   2.repo：用户名/仓库名 （打开自己的仓库，浏览器里的网址username/reponame）    
   3.token：刚才生成的token    
   4.path:路径，仓库中文件夹的名字，例如img   
   5.customPath:不用填，回车   
   6.customURL:不用填，回车    
   
   #使用配置好的文件（配置文件在~/.picgo/config.json）    
   picgo use uploader
   

   config.json

   {
     "picBed": {
       "current": "gitee",
       "gitee": {
         "repo": "你的用户名/仓库名称",
         "branch": "master",
         "token": "你的token",
         "path": "img",
         "customPath": "",
         "customUrl": ""
       }
     },
     "picgoPlugins": {
       "picgo-plugin-gitee-uploader": true
     },
     "picgo-plugin-gitee-uploader": {
       "lastSync": "2021-07-22 10:15:23"
     }
   

四、使用问题

1. 想上传的图片根据日期分类，而不是都在一个img文件夹下。例如img/20210710这样的目录。

2. 同名文件上传冲突报错问题

   

五、问题解决

1. 文件日期分类

这个可以通过配置customePath处理。

官方文档介绍：Mr.Q/picgo-plugin-gitee-uploader - 码云 - 开源中国

这里详细介绍下配置过程。

首先，customePath可选的配置有

1. year 文件夹为：年份
2. yearQuarter 文件夹为：年份+"/"+季度
3. yearMonth 文件夹为：年份+"/"+月份

其次，path配置中需要添加$customePath占位。

示例配置：

{
  "picBed": {
    "current": "gitee",
    "gitee": {
      "repo": "demo/demo",
      "branch": "master",
      "token": "你的token",
      "path": "img/$customPath",
      "customPath": "yearMonth",
      "customUrl": ""
    }
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2021-07-22 10:15:23"
  }
}

# 这样在仓库中图片文件会在img/2021/07这样的文件夹中

测试一下，确实可以了

其实这样并没有达到我想要的效果，我希望的格式是文件名为yyyyMMdd的格式，例如20210701。这个后面再说怎么解决。

2. 同名文件报错

这个应该算是插件就不支持的功能，自动重命名。好像只有安装picgo.app才能支持。但是据说picgo.app需要本地启动服务端一直提供服务，觉得还是有点浪费资源，所以我决定换个方式：修改插件代码，增加自动重命名功能。

其实方案有2种：

1. 如果出现冲突在重命名
2. 每次上传将文件名中增加随机数

为了简单，我使用的是第2种，随机数选择的就是时间戳。基本上同一时间上传文件重名的概率很小，而且基本也就自己一个人使用，概率就是0。如果有机会，后续尝试实现第1种方式。

直接上代码，找到插件代码的upload(img) 函数，增加对文件名的处理。

这样上传同名文件，就不会报错了。

六、自定义customPath

前面说了，customerPath只支持三种格式，没有我想要的格式。这里也是通过修改插件代码的方式进行调整。

找到customePath处理的方法。

function getPath(path, customPath) {
    if (customPath === '') {
        return path;
    }
    else {
        let date = new Date();
        let year = date.getFullYear();
        let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        if (customPath === 'year') {
            return path.replace('$customPath', year + '');
        }
        else if (customPath === 'yearQuarter') {
            let quarter = 'spring';
            if (month >= 4 && month <= 6) {
                quarter = 'summer';
            }
            else if (month >= 7 && month <= 9) {
                quarter = 'autumn';
            }
            else if (month >= 10 && month <= 12) {
                quarter = 'winter';
            }
            return path.replace('$customPath', year + '/' + quarter);
        }
        else if (customPath === 'yearMonth') {
            return path.replace('$customPath', year + '/' + month);
        }
        else {
            return path;
        }
    }
}
exports.getPath = getPath;

修改如下

function getPath(path, customPath) {
    if (customPath === '') {
        return path;
    }
    else {
        let date = new Date();
        let year = date.getFullYear();
        let month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
        if (customPath === 'year') {
            return path.replace('$customPath', year + '');
        }
        else if (customPath === 'yearQuarter') {
            let quarter = 'spring';
            if (month >= 4 && month <= 6) {
                quarter = 'summer';
            }
            else if (month >= 7 && month <= 9) {
                quarter = 'autumn';
            }
            else if (month >= 10 && month <= 12) {
                quarter = 'winter';
            }
            return path.replace('$customPath', year + '/' + quarter);
        }
        else if (customPath === 'yearMonth') {
            return path.replace('$customPath', year + '/' + month);
        }
        //增加自己的模式处理
		else if (customPath === 'yearMonthDay') {
		    let day = date.getDate() < 10 ? '0' + date.getDate(): date.getDate()
		    return path.replace('$customPath', year + month + day +'')
		}
        else {
            return path;
        }
    }
}
exports.getPath = getPath;

配置文件做对应调整

{
  "picBed": {
    "current": "gitee",
    "gitee": {
      "repo": "demo/demo",
      "branch": "master",
      "token": "你的token",
      "path": "img/$customPath",
      "customPath": "yearMonthDay",
      "customUrl": ""
    }
  },
  "picgoPlugins": {
    "picgo-plugin-gitee-uploader": true
  },
  "picgo-plugin-gitee-uploader": {
    "lastSync": "2021-07-22 10:15:23"
  }
}

测试一下