图床,顾名思义,就是存放图片的地方

一个需要图床(image hosting)的典型情景:在书写博文的时候,经常遇到要插入图片的情况,markdown中对图片的URL,如果只是弄一个相对路径来存放图片,不仅维护不便,而且容易出错。使用gitee等远程仓库,搭建一个图床用来存放图片,直接书写图床中的URL是更加实际的选择,使用图床工具也会让这个过程更方便

标题:基于Gitee和Typora的图床应用

远程仓库构建图床

这里,为了在大陆的访问速度,选择从gitee上搭建一个图床,并使用markdown编辑器Typora支持的picgo组件来在插入图片时自动上传图床

  1. gitee上构建一个图床仓库并初始化(初始化是为了方便后面使用picgo测试)

  2. 生成私人令牌(Personal Access Token),从而让图床应用可以在通过令牌更新自己的图床仓库时保护隐私。

    点击gitee页面的个人头像,选择”设置“->”私人令牌“,创建一个私人令牌来让下文的picgo能够访问并更新图床仓库,权限选择user_infoprojects即可,要包含”查看、创建、更新你的项目“,从而不会泄漏其他信息。

    记得保存好令牌,gitee这样的远程仓库生成后不会再次显示

图床应用配置

诸如picgo这样的应用,可以自动完成向图床仓库进行提交,并获取更新后图片的URL的操作,而markdown编辑器Typora支持的picgo组件更是可以在插入图片时自动上传图床,让过程更加轻松

通用情景

可以选择安装GUI版的picgo,安装picgo-plugin-github-plus插件并进行配置,适用于各种情景的图床上传与URL获取。具体参考这篇教程

专用于Typora

背景:win10ubuntu上的markdown编辑器Typora内置了PicGo-Core(command line)支持

  1. 打开Typora的”File“->”Preferences“->”Image“,将”Image Uploader”设置为PicGo-Core(command line),点击“Download or Upgrade”进行安装

  2. 安装后进行配置。点击“Test Uploader”测试,一开始必然失败,但会显示PicGo-Core(command line)的安装路径,找到并执行安装插件

    ./picgo install smms-user
    ./picgo install gitee-uploader
    ./picgo install github-plus
    

    如果是win10系统,这里的可执行文件要加上.exe

  3. 回到Typora进行配置,点击步骤1的界面中的“Open Config File”,对配置文件进行修改让其能正确上传图床,如下所示:

    {
      "picBed": {
        "current": "gitee",
        "uploader": "gitee",
        "githubPlus": {
          "branch": "master",
          "customUrl": "https://cdn.jsdelivr.net/gh/用户名/项目名",
          "path": "img/",
          "repo": "github用户名/github仓库名",
          "token": "自己的token"
        },
        "gitee": {
          "branch": "master",
          "customPath": "yearMonth",
          "customUrl": "",
          "path": "img/",
          "repo": "gitee用户名/gitee仓库名",
          "token": "自己的token"
        },
        "smms-user": {
          "Authorization": "替换成你自己的token"
        },
        "transformer": "path"
      },
        "picgoPlugins": {
        "picgo-plugin-gitee-uploader": true,
        "picgo-plugin-smms-user": true,
        "picgo-plugin-github-plus": true
      }
    }
    

    由于图床位于gitee,因此只要修改gitee下面的value值即可,"path""customPath"可以为空

    细心观察可以发现,github配置的模板也写在其中备用

  4. 配置完成后,可以再次尝试2中的测试,提示成功,图床中也可以看到上传的文件,将界面中的“When Insert”,也就是插入时的行为修改为“Upload Image”,下面的小选项卡可以选择“Apply above rules to local images”和“Use relative path if possible”。以后向文档中粘贴图片就会自动上传到图床,并修改URL了

参考教程

使用Gitee+PicGo搭建Hexo博客图床

Typora+PicGo-core插入图片自动上传,gitee,gitgub,sm.ms三种免费图床