一个需要图床(image hosting
)的典型情景:在书写博文的时候,经常遇到要插入图片的情况,markdown
中对图片的URL,如果只是弄一个相对路径来存放图片,不仅维护不便,而且容易出错。使用gitee
等远程仓库,搭建一个图床用来存放图片,直接书写图床中的URL是更加实际的选择,使用图床工具也会让这个过程更方便
标题:基于Gitee和Typora的图床应用
远程仓库构建图床
这里,为了在大陆的访问速度,选择从gitee
上搭建一个图床,并使用markdown
编辑器Typora
支持的picgo
组件来在插入图片时自动上传图床
在
gitee
上构建一个图床仓库并初始化(初始化是为了方便后面使用picgo
测试)生成私人令牌(
Personal Access Token
),从而让图床应用可以在通过令牌更新自己的图床仓库时保护隐私。点击
gitee
页面的个人头像,选择”设置“->”私人令牌“,创建一个私人令牌来让下文的picgo
能够访问并更新图床仓库,权限选择user_info
和projects
即可,要包含”查看、创建、更新你的项目“,从而不会泄漏其他信息。记得保存好令牌,
gitee
这样的远程仓库生成后不会再次显示
图床应用配置
诸如picgo
这样的应用,可以自动完成向图床仓库进行提交,并获取更新后图片的URL的操作,而markdown
编辑器Typora
支持的picgo
组件更是可以在插入图片时自动上传图床,让过程更加轻松
通用情景
可以选择安装GUI版的picgo
,安装picgo-plugin-github-plus
插件并进行配置,适用于各种情景的图床上传与URL获取。具体参考这篇教程;
专用于Typora
背景:win10
和ubuntu
上的markdown
编辑器Typora
内置了PicGo-Core(command line)
支持
打开
Typora
的”File“->”Preferences“->”Image“,将”Image Uploader”设置为PicGo-Core(command line)
,点击“Download or Upgrade”进行安装安装后进行配置。点击“Test Uploader”测试,一开始必然失败,但会显示
PicGo-Core(command line)
的安装路径,找到并执行安装插件./picgo install smms-user ./picgo install gitee-uploader ./picgo install github-plus
如果是
win10
系统,这里的可执行文件要加上.exe
回到
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
配置的模板也写在其中备用配置完成后,可以再次尝试2中的测试,提示成功,图床中也可以看到上传的文件,将界面中的“When Insert”,也就是插入时的行为修改为“Upload Image”,下面的小选项卡可以选择“Apply above rules to local images”和“Use relative path if possible”。以后向文档中粘贴图片就会自动上传到图床,并修改URL了