動機

Markdown的圖片插入一直都是一個比較麻煩的事情。因為不可能把圖片都放在本地存取,所以之前也試過用國內的免費圖床,但從獲得圖片到實際插入要經過以下麻煩過程: * 截圖 * 手動上傳圖床 * 從圖床獲取連接 * 複製到Markdown內文

一來需要手動干很多事情,二來再管理其他的圖床網站也會要多花些功夫,況且可能哪天圖床網站就跑路了@@。所以在查閱資料後決定用github倉庫作為圖床,結合PicGo即可實現一個快捷鍵直接完成上述動作。


Github倉庫圖床建立

  • 新建倉庫(Public)
  • 點擊頭像->setting->Developer settings->Personal access tokens->Generate new token->如下圖備註note並僅勾選repo即可
  • 保存生成的token

Vscode之PicGo插件配置

  • 在vscode Extension中搜尋PicGo並安裝

  • 配置PicGo插件的setting 點擊左下角manage(小齒輪)->點擊setting ->搜索PicGo ->左側篩選欄中選擇extension中的PicGo-> 填入以下項目:

    Path:你即將上傳的圖片在Github倉庫存儲的位置

    Repo:Username/Repo

    Token:剛剛保存的token在此填入

    Custom Url:因為大陸地區訪問Github速度堪憂導致圖片在大陸地區顯示緩慢,所以需要用到CDN加速,以JSDelivr為例配置為:https://cdn.jsdelivr.net/gh/用戶名/倉庫名@分支名

    Custom Output Format:筆者有將hexo的渲染器改為pandoc,該渲染器在處理圖片時會將圖片注釋渲染上去,影響美觀,應在picgo上傳階段取消自動注釋,故該項應設置為: "picgo.customOutputFormat": "[](${url})"


使用方法

簡單來用就把圖片複製,然後在MD中要插入圖片的地方按下Ctrl+Alt+U(Windows/unix)即可將剪貼板的圖片自動上傳到Github圖床倉庫並獲得URL到待插入圖片處。


雜記

小東西解決大麻煩,讓Markdown的撰寫更方便快捷,Github免費也不會跑路。

  • PicGo插件更多信息: https://marketplace.visualstudio.com/items?itemName=Spades.vs-picgo