搭建markdown圖牀-騰訊雲COS

時間 2019-11-12

原文原文鏈接

背景介紹

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

不過本文將介紹一種方案，把全部本地的圖片存放在一個固定的絕對路徑裏，軟件自動隨機重命名
圖片，不會致使文件名重複，而且利用騰訊雲COS，在騰訊服務器上創建圖牀，完美實現，本地.md
文檔與線上markdown博客，無縫鏈接。github

準備工具

統一把須要準備工具的東西放在這裏，隨後逐步會介紹每項工具的做用。windows

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

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)

效果就像下面這樣markdown

上圖有一個文件名是帶中文明顯與其它文件名不同，這是由於在往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/
便可實現本地圖片與線上圖片無縫鏈接。