0604更新
Typora系列出第二篇啦,第二篇是這篇的延伸,主要解決的是用picgo上傳圖片時會直接使用本機檔名,很建議大家可以去跟著改喔,這樣上傳的檔名比較整齊、不會重名造成上傳失敗、也比較沒有隱私的問題。
(本篇文章使用之token為範例token,你實際拿去用是沒辦法用的喔!)
這篇要來介紹我平常使用的markdown筆記軟體 -- Typora,Typora對我來說最大的優點就是畫面乾淨,相比之下Notion的介面就很花俏,使用時會覺得有各種按鈕在干擾我,如果喜歡寫筆記時不要有太多干擾的人可以試試。
今天要特別介紹的圖片上傳功能,則是因為我寫完文章後會貼到wordpress上傳,但若直接複製到wordpress編輯,圖片會壞掉,需要一張一張上傳再插入到文章對應的位置,這個過程很繁瑣,而且我的圖片經常只是畫面截圖,根本沒有特別記檔名是什麼。
所以我今天要來教大家如何在Typora中直接把圖片上傳到github,並自動把markdown中的路徑取代為github圖片網址,讓你貼到wordpress時不用再一次上傳!
順帶一提我選擇github只是因為方便加上我不喜歡大陸的圖庫,不喜歡github的人也可以自行選擇其他圖庫。
Step 1. 下載PicGo-Core
可以使用npm或yarn安裝PicGo-Core,如果你兩個都沒有的話,先裝個Node.js就會有npm了。
npm全域安裝picgo
$ npm install picgo -g
如果是mac使用者的話需要先輸入下面這行開權限才能全域安裝
$ sudo chown -R $USER /usr/local/lib/node_modules
安裝完路徑會在
/usr/local/lib/node_modules/picgo/bin/picgo
也可以測試一下有沒有安裝成功
$ picgo -v
1.4.19
Step 2. 產生config文件
可以參考這篇,大概步驟如下:
-
用
picgo set uploader
產生config選哪一種uploader都可以,反正等等會整個config檔案覆蓋
$ picgo set uploader
? Choose a(n) uploader (Use arrow keys)
smms
tcyun
❯ github
qiniu
imgur
aliyun
upyun
(Move up and down to reveal more choices)
-
打開
config.json
路徑如下圖,例如我的config檔案位置是在
/Users/lisa/.picgo/config.json
-
貼上下面這段
打開並改成下面這樣,那裡面的repo和token可以先留空,待會我們才要建github repo和產生token來填入這些欄位。
{
"picBed": {
"github": {
"repo": "<github-repo>",
"token": "<github-token>",
"path": "img/",
"customUrl": "",
"branch": "main"
},
"current": "github",
"uploader": "github"
},
"picgoPlugins": {}
}
Step 3. 開GitHub repo
開一個新的GitHub儲存庫,記得選public,不然其他人看不到圖片。
建好後剛剛上面config裡的repo就可填入[username]/[repo name]
,例如我的是 bighsuan/blog
。
Step 4. 產生token
從個人資料的 Settings > Developer settings > Personal access tokens,點選Generate new token:
隨意給個token名字,下面勾選repo,就可以產生token了。
記得把token複製起來,貼到剛剛config裡的token那欄(圖片是範例token)。
Step 5. 最終config
最後的config會長這樣,這裡要稍微注意一下branch是不是和你github上的一樣,還有"path": "img/"
是指上傳的圖片會傳到bighsuan/blog的img資料夾,若不希望多一層資料夾的可以改成"path": "/"
{
"picBed": {
"github": {
"repo": "bighsuan/blog",
"token": "你自己的token",
"path": "img/",
"customUrl": "",
"branch": "main"
},
"current": "github",
"uploader": "github"
},
"picgoPlugins": {}
}
Step 6. 測試圖片上傳
從Typora的偏好設定 > 圖片,Image Uploader選擇"Custom Command"
Command的部分填入
[node] [picgo] uplaod
注意node和picgo須給完整路徑,例如我的是
/usr/local/bin/node /usr/local/lib/node_modules/picgo/bin/picgo upload
確定config和command沒問題後可點擊Test Uploader來測試上傳圖片是否成功。
Step 7. 完成!
可以在圖片點擊右鍵,選Upload Image上傳到github了。
也可以在偏好設定選插入圖片時自動上傳圖片,不過我自己常常會對圖片修修改改,如果自動上傳就會上傳太多沒用到的圖片,所以我比較習慣等整篇文章寫完後一口氣用右鍵上傳。
補充-改字體
另外補充一個我新裝typora時必做的設定--改字體,尤其是在Windows時預設好像是新細明體,簡直讓人一打開就想關掉。
改字體可參考這篇文章,我是改成思源黑體,並且在header的地方加粗,然後字體大小改18px。
就算你沒那麼在乎字體,我也強力推薦起碼改成微軟正黑體。