寫了個適用於vscode的minio圖床客戶端外掛 vscode-minio-picman

Laggage發表於2021-12-29

緣起

自己搭建minio做我的個人部落格圖床好一段時間了, 一直用minio自帶的web管理後臺來上傳圖片, 它的介面長下面這個樣子

minio-console

上傳完後, 需要點下檔案列表裡剛剛傳上去的檔案的分享按鈕

image

然後會出來下面這個介面

image

恩, 沒錯, 如果你直接複製這個連結到瀏覽器位址列然後開啟, 當你滿心歡喜的以為能看到你剛才上傳的好看的 風景/小姐姐 圖片了, 結果現實只有一個白底黑子的瀏覽器錯誤報告...

browser error

內心多半是一萬句"xxx"

其實要看到真正的圖片倒也不難, 把http://10.244.1.134/blog/images/1.gif裡面的http://10.244.1.134改成你自己配置的minio域名就行了, 比如 https://minio.example.com

但是這也太麻煩了, 還讓不讓愉快的寫markdown了啊. 於是就萌生了一個寫一個vscode外掛來傳圖片到minio的想法, 因為我主要都是用vscode來編輯markdown的.

vscode-minio-picman

vscode-minio-picman顧名思義, 適用於vscode的minio圖床外掛, 因為版本的顧名思義就是

A vscode plugin used to upload images to your minio server

這個外掛可以讓你將剪貼簿或本地磁碟中圖片通過上傳到minio, 完後可以直接給你正確圖片的連結

放一張演示gif

上傳完成後, 如果你當前正在編輯的是markdown檔案, 那麼外掛會自動幫你生成markdown格式的圖片並插入到編輯器中, 像上面演示的那樣

如果當前沒有正在編輯的檔案或者編輯的不是markdown檔案的話, 則會彈出一個視窗提示你上傳成功啦, 這個彈窗上有一些按鈕, 允許你複製此圖片不同格式的連結, 如下圖

image

終於不用像之前那樣蠢呼呼的在minio自帶控制檯裡點分享按鈕在替換域名那樣麻煩了. 又可以愉快的markdown了! ?

vscode-minio 使用前

使用前需要你有一個minio檔案伺服器, 然後在vscode設定頁面中填好相關的設定

image

⚠️需要確保配置的bucket name在minio中已經建立好了的, 否則無法上傳成功

vscode-minio 快捷鍵

外掛預設:

  • ctrl/cmd+shift+x上傳剪貼簿圖片
  • ctrl/cmd+shift+z從本地選擇一張圖片上傳

也可以自己到vscode相關的設定頁面自定義這兩個命名的快捷鍵(鍵盤按下cmd+shift+p然後搜尋Keyboard shortcuts)

image

vscode-minio 倉庫地址

vscode-minio-picman, 歡迎圍觀吐槽或pr

為什麼不用picgo

看了下picgo是好像需要通過外掛支援minio, picgo的vscode的外掛好像暫時還不支援picgo外掛系統.

不過很感謝vscode-picgo, 獲取剪貼簿圖片的程式碼抄的就是這個專案的, 讓我省了很多時間和精力 ?

相關文章