Gitee圖牀+PicGo+Typora便捷在博客中使用圖片

爲何要使用圖牀

在hugo中，圖片是以/static爲基準目錄的，例如，設baseUrl爲https://focksor.gitee.io/，圖片文件存放位置是static/img/gitee/123.jpg，那麼，編譯完成後頁面圖片引用的地址就是https://focksor.gitee.io/img/gitee/123.jpg，則在Markdown要引用此圖片應該用![圖片說明](/img/gitee/123.jpg)，可是這樣帶來的問題是，在寫做的時候沒法看到圖片，要通過hugo編譯以後才能看到文檔圖片，這樣的寫做顯然是不友好的。

圖牀指存儲圖片的服務器，使用圖牀存儲文檔中的圖片，那麼在使用圖片的時候只要寫上圖片所在的網絡地址就行了，這樣比較使用靜態圖片體驗顯然要好不少。下面介紹Gitee+PicGo的方法來使用gitee做爲圖牀。

爲何須要PicGo

想象一下，使用markdown編寫你的博客時，插入截圖是什麼流程：將截圖保存到本地文件夾->將圖片文件上傳到網絡服務器中->複製圖片的網絡地址->在markdown中輸入![](圖片的網絡地址)，這個過程無疑是很繁瑣的，並且若是你圖片一多，這種過程將會是魔鬼體驗。

PicGo是一款免費的圖牀管理應用，支持拖拽上傳，剪切板上傳等方式。你能夠用它快捷地將圖片上傳到圖牀並得到網絡連接，並且你能夠設置連接格式爲markdown，這就意味着你只要直接粘貼到markdown編輯器就能夠插入圖片了。

安裝PicGo

訪問PicGo的官方文檔以瞭解PicGo的基本安裝和使用方法。若是不想讀文檔的話，訪問PicGo Releases直接下載你的操做系統對應的安裝包並完成安裝。

注：在安裝的時候安裝目錄千萬不能選C:\Program Files\下的任何地方，若是你不知道安裝在哪裏的話，選擇僅爲我安裝，不然在設置Typora時會出現如下錯誤：

failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

以下圖所示

安裝npm

因爲PicGo的插件須要使用npm進行安裝，若是你的電腦上沒有安裝npm，那麼你是沒法安裝PicGo插件的，而咱們接下來要使用一個額外的插件得到gitee支持，因此在此以前先完成npm的安裝。

訪問node.js的官網，根據官網的指導下載並安裝node.js，確認安裝成功：

PS C:\Users\focks> npm -v
6.13.4

設置PicGo用Gitee做爲圖牀

運行PicGo，單擊插件設置，在搜索中輸入github，安裝搜索結果中的github-plus，以下圖所示。

在等待安裝完成的過程當中，移步gitee並建立一個倉庫，倉庫名隨意，可是必需要是公開的倉庫，這樣圖片才能被外部訪問。我建立的倉庫地址爲https://gitee.com/focksor/giteePagesImgs，下文以該地址舉例。

建立完倉庫後，還要建立一個私人令牌，私人令牌是用來容許PicGo訪問並更新你的倉庫的，這個時候，你已經明白了PicGo的運行原理：PicGo將圖片上傳到你的gitee倉庫，而後返回給你圖片的具體地址，這樣你用該地址即可以訪問到位於倉庫的圖片了。

建立私人令牌步驟以下：訪問新建Gitee令牌，在私人令牌描述中寫上便於你瞭解該令牌用處的文字，並勾選須要的權限，PicGo要使用的私人令牌只須要user_info和projects權限，勾選上後提交，gitee將會返回私人令牌的token，保存該token，由於該token只會出現一次，離開頁面事後再不會出現。

回到PicGo，點擊圖牀設置->githubPlus，在設置中填入repo和token，並選擇origin爲gitee，便可完成設置。其中，repo要填入owner/repoName，例如，倉庫地址爲https://gitee.com/focksor/giteePagesImgs，則repo填入的內容爲focksor/giteePagesImgs。

上傳和管理圖片

單擊上傳區，選擇連接格式，使用點擊上傳或剪貼板圖片上傳，PicGo會自動上傳圖片並將符合連接格式的連接複製到剪貼板，你只要按下Ctrl+v便可粘貼圖片的連接。

單擊相冊，你能夠看到你上傳的全部圖片，你能夠對全部圖片進行複製連接，修改圖片URL與刪除操做，並能夠批量複製或批量刪除。

要注意的是，gitee支持外部連接的文件大小限制爲1M（不過我也沒試過）。

使用Typora+PicGo體驗更便捷的寫博客姿式

若是你使用Typora做爲博客文章編輯器，我建議你使用Typora+PicGo體驗更便捷的寫博客姿式，若是不是，我建議你使用Typora做爲你的博客文章編輯器。若是你不聽建議，你能夠當我沒說。

使用PicGo有效避免了使用圖片時候的上傳->編寫markdown代碼的步驟，可是咱們能不能把添加到PicGo這一步也省略掉呢？答案固然是能夠，Typora內置了使用PicGo自動上傳圖片的功能，也就是說，在須要使用圖片的時候，你只要直接將圖片粘貼到Typora就行了，這樣就跟使用本地圖片的體驗毫無差距了。

設置Typora

• 點擊Typora左上角的文件->偏好設置

• 在彈出的界面中定位到圖像，選擇插入圖片時選項爲上傳圖片，並勾選對網絡位置的圖片應用上述規則

• 設置完成如圖所示

• 選擇上傳服務爲PicGo(app)，點擊驗證圖片上傳選項，若是出現以下圖所示界面，說明配置已成功，而後你就能夠直接在Typora中插入圖片了，Typora會自動上傳並替換圖片地址爲網絡地址。

若是出現以下錯誤，請參考安裝PicGo

failed to launch PicGo app: Command failed: C:\Program Files\PicGo\PicGo.exe
'C:\Program' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

若是出現如下錯誤，點擊PicGo界面左側的PicGo設置->設置Server，並按下圖設置

Failed to fetch