Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

筆者是幾乎每天都需要使用 Typora 來做筆記的人,做筆記的過程中難免會需要使用到圖片。之前的我只會在本地上查看以及撰寫筆記,因此從未對圖片保存在哪有任何需求,但最近當我想把筆記發給別人時才發現,我還需要額外手動把圖片保存到跟筆記同個資料夾中再發給其他人,非常不便,而且若圖片丟失也就找不回來了,所以想著有沒有辦法讓能圖片在插入時就自動保存在別處。

幸運的是 Typora 有提供 PicGo-Core 的圖片上傳服務,只需要撰寫一個設定檔並綁定token就可以讓 picgo 替你把圖片上傳到 Github 上。

使用 Github 作為圖床的優點

  1. 無限容量
  2. 遠端保存圖片:不需要再複製來複製去,也不用擔心不見。(除非哪天 github 終止服務…)

創建 Github 私人token

settings -> Developer settings -> Personal access tokens -> Generate new token 新增一個私人token,token 只會出現一次所以必須先存起來。

github setting Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學
developer settings 1 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學
github token Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

Note 隨意填,權限勾選 repo 和 user 就可以了:

personal access token 1 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

建立完成後會獲取 Token,這個 Token 只會出現一次,所以需要先保存起來:

personal access token2 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

安裝 PicGo-Core

打開 Typora 點擊檔案 – 偏好設定 – 圖片

typora 圖庫1 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學
typora 圖庫2 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

When Insert 選擇 Upload image,勾選前兩個選項:

typora 圖庫3 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

下方 image uploader 選擇 PicGo-Core (command line)

typora 圖庫4 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

然後點擊「Download or Upgrade」,等待下載完畢。

image 3 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

配置 PicGo-Core

安裝完之後需要修改 config.json,路徑為:

  • Windows:C:\Users\.picgo\config.json
  • Linux / macOS:~/.picgo/config.json

config.json 預設內容為:

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

PicGo-Core 官方文檔有提供多個平台的配置文件範例,這邊因為我們是使用 Github ,所以如果也是用 github 作為圖床的話可以參考以下配置內容:

{
"picBed": {
    "uploader": "github",
    "current": "github",
    "github": {
          "repo": "", // repo 名,格式為 username/<repo name>
          "token": "", // github token
          "path": "", // 自定義存儲路徑,比如 img/
          "customUrl": "", // 自定義域名,注意要加 http://或者 https://
          "branch": "" // 分支名,默認是 main
    }
}

測試圖片上傳

回到 Typora 的偏好設定中,左下角可以進行上傳測試:

image 4 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

上傳成功會獲得圖片地址,回到你的倉庫看應該就會多出兩個 typora 的 icon 圖片。

typora 圖庫5 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

上傳圖片到 Github

格式-圖片-當插入本地圖片時,選擇 Upload Image,這樣一來之後只要插入圖片就會自動傳上 github :

定義預設為 upload image Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

單個圖片上傳

如果是新的圖片,直接拖移或者對著圖片點擊右鍵-Upload Image 就可以。

upload image Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

全部批量上傳

如果你是有很多圖片,不想一次一次傳太過麻煩的話,格式-圖片-Upload all images 就可以將當前檔案中的所有本機圖片一次傳上 github。

upload all images Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

使用 super prefix 為圖片名稱加上前綴

目前我們都是根據圖片當前的名稱上傳,但有些時候圖片名稱可能會重複,導致區分不出來是哪張圖片,針對這種情況可以使用一個叫做 super-prefix 的插件:

進入 C:\Users\AppData\Roaming\Typora\picgo\win64 後打開 cmd 輸入指令:

.\picgo.exe install super-prefix
super prefix 1 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

接著打開 picgo-core 的配置文件 (C:/Users/user/.picgo/config.json)

剛剛安裝時已經自動為你加上 "picgo-plugin-super-prefix": true ,現在我們只需要配置 super-prefix 的設定就好:

{
  "picBed": {
    // ...
  },
  "picgoPlugins": {
    "picgo-plugin-super-prefix": true
  },
  "picgo-plugin-super-prefix": {
    "prefixFormat": "YYYY/MM/DD/",
    "fileFormat": "YYYYMMDDHHmmss"
  }
}
  • prefixFormat:檔案名稱個性前綴格式(以/結尾)
  • fileFormat:檔案名稱個性格式
super prefix 2 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

如果將 prefixFormat 設為 YYYY/MM/DD/ 的話,會將同一天的圖片存在名為 YYYY/MM/DD 的資料夾中。

super prefix 3 Typora + PicGo-Core 使用 Github 作為筆記免費圖床的詳細圖文教學

super-prefix repo:https://www.npmjs.com/package/picgo-plugin-super-prefix

0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論