使用Typora + PicGo 圖牀 + jsDelivr CDN實現高效 Markdown 創做

本文來自 悟塵紀，獲取更新內容可查看原文： https://www.lixl.cn/2019/1201...

本文提到兩種插件組合方式，iPic及PicGo，支持Github、SM.MS、阿里OSS、騰訊COS、微博等主流圖牀。經過工具的搭配使用，咱們能輕鬆地完成在 Markdown 中插圖的工做，發佈到多個內容平臺。

對於Typora + iPic方式，是Typora默認支持的。尤爲在一次性粘貼帶有多個圖片的圖文混合內容時，超級方便。不過iPic是收費軟件，可使用PicGo來替代，只是這樣就沒法實現一次性粘貼多個圖片的圖文混合內容了。

1、iPic方式

目前，Markdown 編輯器 Typora 已經接入 iPicUploader，經過兩款工具的搭配，咱們能輕鬆地完成在 Markdown 中插圖的工做。

自動上傳圖片至圖牀

打開 Typora 中的「系統偏好設置 - 圖像 - 經過iPic上傳圖片」選項，在 Typora 中插入本地圖片時，i會自動將圖片上傳圖牀並使用 Markdown 語法替換文內地址。

使用快捷鍵

若是你的主力 Markdown 工具不是 Typora，在選中圖片或截圖以後，使用 ⌘ + U 快捷鍵上傳，而後直接在編輯器中粘貼也是一個不錯的選擇。

2、PicGo方式

PicGo是一款開源的圖牀軟件，該軟件與iPic的不分伯仲，文檔支持中文，支持插件開發。

安裝PicGo

下載地址 https://github.com/Molunerfinn/PicGo/releases ，選擇下載與系統匹配的安裝包，正常安裝便可。

配置圖牀

Github圖牀配置如上圖，參數說明：

• 倉庫名：按照 帳戶名/倉庫名的格式填寫
• 分支名：通常填寫 master 便可
• Token：到 https://github.com/settings/t... 去生成，而後黏貼在這裏
• 存儲路徑：如圖配置，會在倉庫根目錄建立 images/2019 的文件夾
• 自定義域名：圖片成功上傳後，PicGo會將 自定義域名+上傳的圖片名 生成的訪問連接，放到剪切板中。

使用GitHub倉庫做爲圖牀，存在的問題是國內訪問github的速度很慢，能夠利用 jsDelivr CDN 來加速訪問。jsDelivr 是一個免費開源的 CDN 解決方案，該平臺是首個打通中國大陸與海外的免費CDN服務，擁有中國政府頒發的 ICP 許可證，無須擔憂中國防火牆問題而影響使用。使用jsDelivr加速訪問，須要將自定義域名設置爲 https://cdn.jsdelivr.net/gh/用戶名/圖牀倉庫名/。

這裏有一個大小爲 700多K 的圖片，能夠體驗一下速度差別：Github原始地址　　　　jsDelivr CDN加速地址

阿里雲OSS圖牀配置如上圖，參數說明：

• Keyii及KeySecret：到 阿里雲控制檯AccessKey管理 申請並輸入
• 倉庫空間名：在對象存儲中建立的Bucket的名稱
• 存儲區域：建立Bucket時所選區域的英文標識，查詢地址：OSS開通Region
• 存儲路徑：如圖配置，會自動在OSS存儲空間根目錄建立 2020 文件夾
• 網址後綴：這是阿里雲OSS的一個很好用的功能，用於圖片處理（如縮略圖）。須要去OSS的 圖片處理規則 中建立樣式。如下是我設置的規則，後綴 w1280表明將圖片等比縮放到寬度<=1280

  

• 自定義域名：圖片成功上傳後，PicGo會將 自定義域名+上傳的圖片名 生成的訪問連接，放到剪切板中。

快捷鍵及相關配置

支持快捷鍵command+shift+p（macOS）或者control+shift+p（WindowsLinux）用以支持快捷上傳剪貼板裏的圖片（第一張）。 PicGo 支持自定義快捷鍵，使用方法見 配置手冊。

經過自定義連接格式，能夠直接生成符合須要的Markdown代碼，方便粘貼。如我喜歡經過OSS將原始圖片等比縮放到寬度<=1280px，並將圖片縮放50%來優化顯示效果及速度，配置以下：

複製或截圖後，經過快捷鍵上傳，而後直接粘貼，便可得到以下可直接粘貼到Markdown文檔中的代碼：

<img src="https://pic.lixl.cn/2020/20200114222126.png/w1280" alt="" style="zoom:50%;" />

補充：自動生成的代碼包括了圖片縮放設置，您也能夠經過設置自定義連接格式爲 ![]($url) ，生成標準的Markdown代碼: ![](https://pic.lixl.cn/2020/20200114222126.png/w1280)

3、免安裝圖牀插件方式

若是使用 Hexo 來搭建本地博客，能夠不安裝 iPic、PicGo 等圖牀插件，經過 Typora 將圖片保存在本地，基於 hexo-deployer-cos-cdn 插件一鍵自動部署，詳情可參考博文：hexo-deployer-cos-cdn 插件安裝使用指南。

參考

• iPic + Typora，方便快捷地在 Markdown 中插圖
• Molunerfinn/PicGo
• Github+jsDelivr+PicGo 打造穩定快速、高效免費圖牀