Featured image of post TYPORA 如何上傳圖片(教學 使用Github , imagur作為圖片空間)
教學

TYPORA 如何上傳圖片(教學 使用Github , imagur作為圖片空間)

最近領到薪水後買了TYPORA後，想找如何上傳圖片的教學，發現網路上的教學蠻少的，台灣好像只有一篇，還是For mac的教學，剩下的都是中國的教學，但他們用的圖床，台灣也很多不能用，後來研究了幾天終於搞懂，所以決定寫一篇看看

圖片空間有Github跟imgur，就看你想要用哪個就用哪個吧，其實沒差太多，但imgur會稍微簡單一點點點點點點，以下是步驟

開始

  • 先去安裝node.js，因為會需要裡面的npm

https://nodejs.org/en/download/

安裝好可以用系統管理員身分打開cmd，並輸入

1

node
  • 如果有成功安裝的話應該會顯示

img

接著安裝picGo-core

1

npm install picgo -g

img

說出現錯誤，要我們執行

1

npm audit fix -force

img

執行完之後就安裝好了，接著輸入

1

picgo

來確認是否有安裝成功，有時候可能會出現

1

檔案未經數位簽署這個指令碼將不會在系統上執行

之類之類的句子，這時候可以輸入

1

Set-ExecutionPolicy RemoteSigned

來允許執行，這時候在輸入picgo應該就可以看到這樣子的畫面了

img

到這一步本地端的設定已經完成80%了，接下來就是要選擇要使用哪種圖片空間

Github

  • 首先先到Github創建一個公開的Repository，名字隨意就好

img

  • 接著把這個Repository的URL複製下來
1

https://github.com/Hoxton019030/Typora
  • 右上角個人頭像點開，選擇Settings

img

  • 左側選項最下面有一個Developer settings

img

  • 選擇Personal access tokens

img

  • 選擇 Generate new token

img

  • 輸入這個token的名稱，隨便取就好，Expiration看個人喜好，我很懶，所以我選擇永久，下面的select scopes勾選repo

img

  • 接著會產生一組ghp開頭的token，這組序號只會在這裡以明碼出現一次，接下來永遠都不會再以明碼的方式呈現所以請好好記起來
  • 然後到Typora的偏好設定裡打開開啟設定檔，通常會是用一個文本編輯器打開，通常都是vscode啦

img

  • 接著把這串東西複製貼上去
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
   "picBed": {
     "current": "github",
     "uploader": "github",
     "github": {
       "repo": "Hoxton019030/Typora",  //這串對應的是使用者名稱+Repo名稱，改成自己的
       "token": "ghp_xxxxxxxxxxxxxxxxxxxx", //這邊把剛剛產生的token貼上去
       "path": "data/", //圖片要上傳到哪個資料夾，可以先不用設定，
       "customUrl": "https://raw.githubusercontent.com/Hoxton019030/Typora/main", //把Hoxton019030/Typora改成你自己的repo
       "branch": "main" //應該也不用動
       
     }
   },
   "picgoPlugins": {}
   
 }
  • 完成之後應該長這個樣子，接著按存檔

img

  • 接著回到設定，試著按看看測試圖片上傳

img

如果成功的話就會出現這樣的畫面

img

就代表你成功了！

如果你在按一次測試圖片上傳，由於上傳的圖片檔名一模一樣，會報錯，這樣是正常現象，請不要驚慌

img

imgur

img

  • 接著會跳出畫面，會告訴你你的Client ID是什麼，請複製下來

img

  • 接著到偏好設定裡面打開開啟設定檔，通常會用vscode開啟

img

  • 接著把這段複製貼上上去
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
   "picBed": {
     "current": "imgur",
     "uploader": "imgur",
     "imgur":{
       "clientId": "XXXXXXXXXXX"
     }
   },
   "picgoPlugins": {}
   
 }

貼上去之後應該會長這個樣子

img

  • 然後存檔之後，回到偏好設定，按「測試圖片上傳」

img

img

跳出這個就代表成功上傳了！

小結

這樣子只要在typora裡面貼上圖片，typora就會自動幫我們上傳圖片到圖片空間了。