搭建markdown圖床-騰訊雲COS


背景介紹

書寫markdown筆記時,如何處理圖片,實在是有些棘手的問題。每一張圖都保存在當前文件夾?
每張圖都自己重命名?每次上傳到cnblogs博客都需要一張一張拖動?markdown已經非常成功
的實現了樣式與內容的分離,但是圖片是二進制文件,說什么也不可能嵌入到純文本文件里的。

不過本文將介紹一種方案,把所有本地的圖片存放在一個固定的絕對路徑里,軟件自動隨機重命名
圖片,不會導致文件名重復,並且利用騰訊雲COS,在騰訊服務器上建立圖床,完美實現,本地.md
文檔與線上markdown博客,無縫連接。

准備工具

統一把需要准備工具的東西放在這里,隨后逐步會介紹每項工具的作用。

vnote(markdown編輯器) https://github.com/tamlok/vnote

COSBrowser https://cloud.tencent.com/document/product/436/11366

vnote圖片路徑配置

首先下載並安裝vnote,在設置界面里設置好圖片存放的外部文件夾(絕對路徑),如下圖所示。可以看到雖然是
windows平台但是文件的路徑分割符,不是用撬棍(),而是正常的斜線D:/as4k/xmd-img/_v_images/,這樣
配置以后,不論是使用類似QQ截圖軟件,還是直接在資源管理器中復制粘貼圖片到vnote編輯器中,我們所有的圖
片都會自動放到我們配置好的絕對文件路徑中,在編輯器中生成的路徑是下面這樣

![](D:/as4k/xmd-img/_v_images//1535811877_16848.png)  

效果就像下面這樣

上圖有一個文件名是帶中文明顯與其它文件名不一樣,這是因為在往vnote中復制圖片的時候,
修改了文件名導致,建議最好直接使用隨機文件名即可,如果需要自定義圖片標識,可以放到
圖片的中括號里。

到這里,想必有markdown使用經驗的讀者都會感受到,單憑強大的復制粘貼圖片到編輯器中的功能,
這款vnote編輯器有尤其使用價值了,畢竟我們移動.md,再也不用擔心里面的圖片因為路徑
不正確,從而無法正常顯示的問題了,當然這還不是本篇文章的重點,不使用vnote編輯器也無妨,
重點是接下來的騰訊雲COS的應用。

使用騰訊雲COS搭建圖床

大家不要一看到圖床就蒙圈了,圖床就是一張圖片使用網址的形式來表示而已。
打開https://cloud.tencent.com/product/cos,創建一個自己騰訊雲COS儲鐵桶,功能是免費的,
只是有流量限制,使用自己的QQ號登錄即可,大致流程如下圖

在騰訊COS上創建完畢自己的存儲桶之后,就相當於已經擁有了一個在線存儲文件的平台,就像百度網盤一樣,
所不同的是每個文件都對應一個URL網址。我們知道,在markdown編輯器中,添加圖片使用本地文件和網絡圖片
地址都是可以的。在線往騰訊COS上傳圖片就是鼠標點點點的操作,不多說了,大家可以自行體驗下,可以想象
如果每個文件都需要打開瀏覽器在線上傳,麻煩程度不言而喻,因此我們使用COSBrowser,這款騰訊官方提供的
上傳工具來上傳文件。

使用COSBrowser同步本地和服務器上的圖片

首先在這里https://console.cloud.tencent.com/cam/capi,獲取API密鑰,就是用來驗證用的。

打開COSBrowser軟件,輸入密鑰后,成功登錄。下面重點來了,到目前位置我們的圖片都在本地,格式如下

![](D:/as4k/xmd-img/_v_images//1535813612_9080.png)  

現在只要把圖片通過COSBrowser軟件,簡單的復制上傳到存儲服務器上,最重要的是圖片文件名不變,在我們把文檔
發布到 線上博客的時候,使用替換功能即可簡單的把本地圖片替換成網絡URL地址形式的圖片。如果用的是vnote編
寫markdown的, 只需進入閱讀模式,一張張拖放到COSBrowser軟件,即可實現上傳,也可以定位到圖片到目錄,
按時間排序圖片,批量上傳 圖片到COSBrowser軟件上。

圖片在騰訊COS上的地址如下圖所示

本篇博客即是我第一次使用,騰訊COS同步圖片到服務器上,本篇博客的圖片都在這里

粘貼到服務器上效果如下

對比之后可以看到,線上圖片與本地圖片唯一的不通之處就在於,前綴不同。
只需把本地D:/as4k/xmd-img/_v_images//前綴
替換成https://md-img-1252230138.cos.ap-beijing.myqcloud.com/
即可實現本地圖片與線上圖片無縫連接。

參考資料

騰訊雲對象存儲(COS)官方文檔
https://cloud.tencent.com/document/product/436/7751

COS 標准存儲的用戶免費額度
https://cloud.tencent.com/document/product/436/6240


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM