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. 同名文件上传冲突报错问题

    微信截图_20210722101459

五、问题解决

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这样的文件夹中

测试一下,确实可以了

微信截图_20210722095210

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

2. 同名文件报错

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

其实方案有2种:

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

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

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

image-20210722140406786

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

微信截图_20210722133527

六、自定义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"
  }
}

测试一下

微信截图_20210722095844

posted @ 2021-07-22 15:04  鸡米饭  阅读(199)  评论(0编辑  收藏  举报