1. 程式人生 > >解放雙手,markdown文章神器,Typora+PicGo+七牛雲圖床實現自動上傳圖片

解放雙手,markdown文章神器,Typora+PicGo+七牛雲圖床實現自動上傳圖片

> 本文主要分享使用Typora作為Markdown編輯器,PicGo為上傳圖片工具,使用七牛雲做儲存來解放雙手實現圖片的自動化上傳與管理。提高寫作效率,提升逼格。用過 Markdown 的朋友一定會深深愛上這種優雅的寫作方式,比起慘不忍睹的 Word 簡直要帥氣得多了。 Typora 是一款簡單、高效而且優雅的 Markdown 編輯器,它提供了一種所見即所得的全新的 Markdown 寫作體驗。它把原始碼編輯和效果預覽兩者合二為一,在輸入 Markdown 程式碼的時候即時生成預覽效果。Typora 的一切都圍繞純粹的生產效率而設計。 Typora一直是我最喜歡的 markdown 編輯器,寫部落格、記筆記的首選軟體。相信大部分朋友也在使用 Typora 這款軟體,最新的Typora終於支援圖床功能。 ## 1、建立並上傳檔案到儲存空間 ### 1.1、註冊七牛賬號,並且實名認證 ### 1.2、建立儲存空間 開啟側邊欄,選擇物件儲存 ![建立儲存空間](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154507437-991383636.png) 選擇新建空間 ![新建空間](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154531657-712328104.png) - 儲存空間名稱:按規則隨便取 - 儲存區域:選擇離靠近的地區 - 訪問控制:選擇**公開**,否則**外網無法訪問,沒法作為圖床** ### 1.3、上傳檔案 ![上傳檔案](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154559954-682619648.png) - 選擇檔案管理,點選上傳檔案即可上傳 - 不繫結私有域名時預設外鏈域名即為官方分配的30天有效臨時域名, 如果繫結私有域名可以選擇私有域名 - 點選詳情即可預覽圖片 - 點選更多,選中複製外鏈即可獲得圖片外鏈 獲取外鏈之後直接輸入瀏覽器網址欄,或者在程式碼裡引用就行了! ## 2、建立二級域名並解析到七牛雲CNAME 七牛雲預設會每隔30天重新分配一個臨時的測試域名,也就是說,過了30天域名重置以後,之前的外鏈就全部失效,為了預防這種情況,我們需要繫結一個自己的私人域名。 ### 2.1、設定儲存空間域名繫結 ![設定儲存空間域名繫結](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154627073-2067714940.png) - 選擇自定義域名,新增一條你要繫結的子域名,其他設定不需要動,新增完儲存即可 子域名格式需要為:主機記錄.域名,比如`img.xxxxx.com`這樣 - 配置完成後滑鼠移至CNAME按鈕上,複製`CNAME` 比如我的配置就是`***.rdi***work.net.qiniudns.com` ### 2.2、前往域名服務商建立二級域名 這個就省略了,自行建立即可。 ## 3、下載並安裝圖床管理工具PicGo 在前面我們已經搭建了用於存放圖片的雲端儲存,我們如何高效快速的把圖片儲存到七牛雲上呢? 相信許多自己做網站動靜分離的童鞋一直苦於繁瑣的圖片上傳操作,以七牛云為例,上傳一張圖片需要登入七牛雲,然後手動上傳圖片,再自己編輯連結,然後複製到 markdown 裡四個步驟,當然我們自己的部落格系統Copy圖片時自動就會上傳到對應的雲端儲存中,接下來介紹的 PicGo 就是將這繁瑣的操作簡化。 有時我們不單單維護一個部落格系統,有可能有多個,全使用MarkDown語法 編寫,這時使用Typora來統一的編寫工具那就非常的方便管理了。 PicGo用於免費搭建個人圖床,並且跨平臺支援 Windows、macOS 和 Linux 系統,它的使用非常簡單,只需先設定好圖床網站 / 雲端儲存服務的賬號之後,用滑鼠將圖片拖放到 PicGo 主視窗的圖片上傳框,即可完成圖片的上傳並返回一個url連結到剪下板。 現在圖床基本可以使用了,但是為了能更方便的管理,最重要的是能跟Typora無縫銜接,我們還需要PicGo輔助, PicGo[下載地址](https://github.com/Molunerfinn/PicGo/releases),選擇版本並且根據自己的作業系統選擇對應的安裝包即可。 ![下載並安裝圖床管理工具PicGo](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154648984-1064922117.png) 安裝好後開啟介面如下所示: ![PicGo主介面](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154730721-1277980596.png) 在左側的圖床設定中,有非常多的圖床可供選擇,大家可以根據自己的使用進行選擇,這兒我們選擇“七牛圖床” ![七牛圖床設定](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154749636-1241615035.png) **需要填寫的配置項:** - 設定AK和SK:前往七牛雲個人中心 ->密匙管理複製黏貼即可 ![設定AK和SK](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154807671-1373453794.png) - 設定儲存空間名:和七牛儲存空間名稱一致 - 設定訪問網址:即你的二級域名,這裡**需要在域名之前加上http://** ![設定訪問網址](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154853669-452508819.png) - 建立空間時,選擇的儲存區域,從z0到z1,依次對應:華東、華北、華南、北美、東南亞。七牛雲的儲存物件的地區對應表如下: ![建立空間](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154913388-696508062.png) ![儲存區域](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154932755-688539966.png) 然後點“確認”按鈕,儲存設定,回到上傳區選項即可上傳圖片到圖床。 - 上傳圖片成功後剪貼簿會自動獲取圖片引用的外鏈 - 在相簿可以檢視通過PicGo上傳過的圖片 我們拖動一張圖片到下圖區域就會自動上傳到七牛雲中 ![拖動上傳](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112154951185-1717529713.png) 單擊“相簿”,可以檢視已上傳的圖片。 ![相簿](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155009733-1528169775.png) 要實現Typora中圖片自動的上傳,我們需要設定PicGo Server,如下圖所示。 ![PicGo Server](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155023233-2105284176.png) ![設定PicGo-Server](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155033570-859771812.png) 預設配置即可,只要保證埠沒有被佔用。 ## 4、Typora配置圖片上傳 ### 4.1、配置上傳服務設定 設定好PicGo後來到Typora進行配置,開啟Typora的檔案選單,選擇“偏好設定”,選擇“影象”,如下圖所示。 ![配置上傳服務設定](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155055086-2118749880.png) - 上傳服務:選擇PicGo - PicGo路徑:選擇PicGo安裝根目錄的.exe檔案 配置好後,可以單擊上圖中的“驗證圖片上傳選項”,來確定配置的正確性,如下圖所示。 ![驗證圖片上傳選項](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155112519-1731356804.png) ### 4.2、上傳圖片 上傳圖片有三種方式: - 加入圖片時直接上傳 在偏好設定 --》影象 --》插入圖片時 設定 - 對圖片右鍵上傳 - 在格式 --》影象 --》 上傳所有本地圖片 圖片上傳成功,會在右下角顯示提示資訊。 ![圖片上傳成功提示](https://img2020.cnblogs.com/blog/157572/202101/157572-20210112155127956-124907785.png) 如果出現報錯,一般是埠被佔用,可以開啟PicGo的server看看埠是否還是36677,改變了的話改回來就好了。 以上我們就完成了圖片的自動上傳,編寫文章非常的方便了。 ----- 一路走來數個年頭,感謝RDIFramework.NET框架的支持者與使用者,大家可以通過下面的地址瞭解詳情。 RDIFramework.NET官方網站:[http://www.rdiframework.net/](http://www.rdiframework.net/) RDIFramework.NET官方部落格:[http://blog.rdiframework.net/](http://blog.rdiframework.net/) 特別說明,框架相關的技術文章請以官方網站為準,歡迎大家收藏! RDIFramework.NET框架由海南國思軟體科技有限公司專業團隊長期打造、一直在更新、一直在升級,請放心使用! 歡迎關注RDIFramework.NET框架官方微信公眾號(微訊號:**guosisoft**),及時瞭解最新動態。 使用微信掃描二維碼立即關注 ![微訊號:**guosisoft**](https://img2020.cnblogs.com/blog/157572/202101/157572-20210111113503341-2082613