為什麼要選擇VSCode+PicGo+Gitee 主要是平時寫文章的平臺,要麼是收會員費用,要麼是本站圖片鏈接只能在本站網站訪問,換一個平臺,圖片就裂了,圖片問題困擾我很久,也是經過很多試用,最終選定這個工具組合,之前圖片倉庫使用的是Github,但是在國內,Github的訪問速度簡直感人!所以後來... ...
目錄:
目錄1. 為什麼使用vscode+gitee+picgo實現完美圖床
為什麼要選擇VSCode+PicGo+Gitee
主要是平時寫文章的平臺,要麼是收會員費用,要麼是本站圖片鏈接只能在本站網站訪問,換一個平臺,圖片就裂了,圖片問題困擾我很久,也是經過很多試用,最終選定這個工具組合,之前圖片倉庫使用的是Github,但是在國內,Github的訪問速度簡直感人!所以後來就把Github替換成了Gitee,Gitee在國內,訪問速度快多了,之前的寫文章使用的是Typora,但是現在收費了,就改用VSCode。
2. 安裝VSCode
2.1 安裝VSCode軟體及相關插件
- 進入VSCode軟體官網:https://code.visualstudio.com,然後下載VSCode。
- VSCode安裝後,下載中文插件並安裝。
- 安裝Markdown插件:
- Markdown All in On
- Markdown Preview Github Styling
- Markdown PDF
- 安裝PicGo插件
3. 安裝picgo
-
進入PicGo官網: PicGo官網
-
點擊免費下載按鈕
-
找到一個正式版本, 比如現在最高的正式版是2.3.1, 找到這個版本的資源, 然後展開所有資源.
-
現在一般都是64位的系統, 可以下載這個軟體.
-
下載好後, 打開軟體安裝, 點擊下一步.
-
切換安裝盤符和安裝文件夾, 我這裡是安裝在 E:\PicGo, 換好後點擊安裝.
-
安裝完成後, 點擊完成打開PicGo
-
點擊插件設置, 搜索gitee, 然後安裝gitee-uploader 1.1.2
-
點擊安裝後發生錯誤, 主要是由於PicGo軟體是基於node.js, 用electron-vue開發的客戶端, 這裡我要去node.js 官網下載安裝一下.
-
打開node.js官網: node.js官網, 下載左邊的正式版(LTS版本), 然後按著引導進行安裝.
-
勾選我同意, 然後下一步
-
切換盤符, 我放在E:\nodejs,點擊ok, 然後一直點擊next
-
點擊Install進行安裝.
-
等待的時候會有個彈窗, 點擊是
-
點擊Finish, 到這nodo.js就安裝完成了, 然後重啟一下PicGo, 右下角右鍵重啟PicGo
-
再回到插件設置, 搜索gitee, 然後安裝gitee-uploader 1.1.2
-
安裝中, 安裝後會顯示已完成
4. 準備Gitee圖床
-
首先你要有一個Gitee賬號, 沒有的可以去官網創建一個. Gitee官網
-
登陸後點擊右上角的 + 號, 新建一個倉庫
-
設置倉庫用戶名, 比如我這裡叫: pic_bed, 倉庫設置為 開源 , 然後勾選初始化倉庫, 模板文件設置為 ReadMe文件, 最後點擊創建按鈕.
-
出現這個頁面就說明倉庫創建成功了.
5. 配置相關設置
- 配置PicGo插件
-
repo:用戶名/倉庫名稱,比如我自己的倉庫yatok/picture-bed,找不到的可以直接複製倉庫的url,複製瀏覽器的倉庫地址,而不是頁面左上角顯示的,容易出現大小寫問題
-
branch:分支,這裡寫上master
-
token:填入碼雲的私人令牌
-
path:路徑,一般寫上img,我預設沒填
-
customPath:提交消息,這一項和下一項customURL都不用填。在提交到碼雲後,會顯示提交消息,插件預設提交的是 Upload 圖片名 by picGo - 時間
- 獲取自己的token , 點擊右上角找到設置點擊
- 點擊私人令牌, 然後生成新令牌.
- 選擇和我相同的許可權, 然後提交, 這裡會驗證一下賬號密碼(也就是登錄密碼).
- 生成的私人令牌只會顯示一次,一定要保存好, 如果丟失的話就需要重新生成.
- 然後設置為預設圖床後點擊確定.
- 測試一下是否有效, 截一張圖, 按快捷鍵: Ctrl+shift+P, 右下角顯示上傳成功, 可以使用Ctrl+v 把圖床的鏈接粘貼到Markdown文檔.
- 下麵這張是獲取網路圖床顯示的圖片.
- 去Gitee倉庫看看上傳的圖片
尾聲
- 到此教程就結束了, 但是學習無止境, 祝大家在知識的海洋中勇往直前.
- 轉載: 請附上本文鏈接