白嫖了個免費圖庫,竟然還能讓 Typora 自動上傳圖片

目前免費圖庫有 七牛雲、又拍雲等,但一般都有限制,比如存儲空間的大小、每月訪問流量等,如果想找個容量大和訪問快的,好像有點難。

但其實這不是不可能的, github 和 gitee 就能實現。

下面介紹各自的方案,並配合 Typora 食用

方案1 github + PicGo-Core(command line)

方案2 gitee + PicGo-Core(app) + NodeJS

哪個方案好一點?

先說結論,推薦方案2,原因是能訪問,且速度快多了。

附:

Mac 上的 Typora 支持將本地圖片或者截圖先上傳到服務器,生成訪問鏈接後再保存到 markdown 文件中。

win 黨哭了。

下面詳細說說。

推薦方案2,原因是訪問速度快多了.

Mac 上的Typora 支持將本地圖片或者截圖先上傳到服務器,生成訪問鏈接後再保存到 markdown 文件中。

方案1 github + PicGo-Core(command line)

1 配置PicGo-Core(command line)

打開 文件 -> 圖像 -> 上傳服務,選擇 PicGo-Core(command line) ,然後點擊下方的 下載或更新,下載 PicGo-Core(command line)

(這裏還需要關注其他兩個,驗證圖片上傳選項 和 打開配置文件)

image-20200607171759185

此時會自動下載

image-20200607171934938

下載完成後無任何提示,此時打開 文件 -> 圖像 -> 驗證圖片上傳選項,顯示如下

image-20200607172707857

說明已安裝,需要配置下(默認在 C:\Users\用戶名\.picgo\config.json),我的則是在C:\Users\wang\.picgo\config.json,文件內容如下

{
  "picBed": {
    "current": "smms"
  },
  "picgoPlugins": {}
}

修改後的格式如下,現在缺的就是 github 的配置

{
  "picBed": {
    "github": {
      "repo": "${github-repo}",
      "token": "${github-token}",
      "path": "img/",
      "customUrl": "",
      "branch": "master"
    },
    "current": "github",
    "uploader": "github"
  },
  "picgoPlugins": {}
}

2 配置 github

登錄github,點擊右上角 + 新建倉庫

image-20200607174034199

這裏新建倉庫 cloudimage 用來當圖庫用,點擊 Create repository 創建。

注意,設置爲 Public 纔可以訪問,最好也點擊創建README文件

image-20200607174447544

此時自動跳轉,記下倉庫名 “bottomheater/cloudimage”

image-20200607174719664

點擊右上角頭像,Settting -> Develop settings 進入

也可直接訪問 https://github.com/settings/tokens

image-20200607175042409

創建 token ,然後點擊最下方的 Generate token 即可。

注意,只勾選 repo 即可。

image-20200607175413534

此時會自動跳轉,顯示 token 的具體值,記下此時的值。

注意,當再次刷新時就會隱藏,所以第一次沒記下就再也看不了,就要重新創建纔行。

或者重新進入,等提示。

image-20200607175545328

提示,可重新建。

image-20200607175854567

此時回到 Typora ,修改配置。

image-20200607180057490

修改後驗證下,如果成功,則會顯示 成功上傳圖片並獲得新的URL

image-20200607180157926

此時訪問 https://github.com/bottomheater/cloudimage ,圖片上傳到 img 目錄

image-20200607180316185

方案2 gitee + PicGo-Core(app) + NodeJS

1 配置 gitee

登錄gitee,點擊右上角 + 新建倉庫

image-20200607182055975

這裏新建倉庫 cloudimage 用來當圖庫用,點擊 創建。

image-20200607182152777

記下用戶名和倉庫地址 bottomheater/cloudimage

創建令牌

image-20200607182455266

只選擇 projects 即可

image-20200607182542259

記下令牌

image-20200607182642602

2 配置npm

下載 npm

下載地址:http://nodejs.cn/download/

image-20200607222442029

下載後直接安裝即可。

3 配置 PicGo(app)

下載PicGo

PicGo下載鏈接:https://github.com/Molunerfinn/picgo/releases

選擇穩定版的 2.2 exe文件

image-20200607182934905

下載後一直點ok,安裝後,搜索 gitee 插件,選第一個即可

(更多可用圖牀的插件,可搜索 https://github.com/PicGo/Awesome-PicGo )

image-20200607183618496

安裝後,配置 gitee,並設置爲默認圖牀

image-20200607183921697

回到 Typora,配置 PicGo 並驗證

PicGo 的路徑爲 C:\Users\用戶名\AppData\Local\Programs\PicGo),我的則是在C:\Users\wang\AppData\Local\Programs\PicGo

https://gitee.com/bottomheater/cloudimage/raw/master/img

注意,上傳重複的文件會失敗!!

遇到的問題

1 Failed to fetch

之前重啓 picgo ,發現重啓後一直上傳失敗。

看日誌,分析下,是原來的端口自動換成 36681

日誌路徑:PicGo設置->設置日誌文件(點擊設置)->日誌文件(點擊打開)

image-20200607231548734

看了現在的端口,果然變成了 36681,typora 默認是使用 36677 的,所以修改爲 36677

image-20200607231914991

2 {“success”:false}

測試typora上傳功能時出錯了。

image-20200607232423999

看日誌,發現是文件名重複了,所以上傳失敗。

image-20200607232501540

只要再 gitee 上刪除同名文件即可。

上傳測試的相關文件爲 typora-icon.png 和 typora-icon2.png

總結

方案2 好點。

考慮到github訪問慢,其實 gitee 是更好的,圖片訪問速度快很多,當然方案2搭建起來比方案1麻煩,而且只適用於中文版的Typora(聽說是這樣?)。

筆者測試過,通過右鍵->上傳圖片,兩個方案效果差多了。

方案1不建議用,因爲最終生成的訪問地址爲 raw.githubusercontent.com (這個地址不配置下,訪問不了),如

https://raw.githubusercontent.com/bottomheater/cloudimage/master/img/b4c806dd-caa2-43f4-82d9-796ce6716267.svg,訪問有點問題==。

方案2 最終生成的訪問地址 gitee.com ,如 https://gitee.com/bottomheater/cloudimage/raw/master/img/image-20200607184211725.png,訪問速度快。

參考資料:

設置Typora自動上傳圖片到github https://blog.csdn.net/xiaozecheng/article/details/105197126

Typora+PicGo+Gitee實現圖片上傳功能 https://blog.csdn.net/wugenqiang/article/details/105644905

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章