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

本文主要分享使用Typora作為Markdown編輯器,PicGo為上傳圖片工具,使用七牛雲做存儲來解放雙手實現圖片的自動化上傳與管理。提高寫作效率,提升逼格。用過 Markdown 的朋友一定會深深愛上這種優雅的寫作方式,比起慘不忍睹的 Word 簡直要帥氣得多了。

Typora 是一款簡單、高效而且優雅的 Markdown 編輯器,它提供了一種所見即所得的全新的 Markdown 寫作體驗。它把源碼編輯和效果預覽兩者合二為一,在輸入 Markdown 程式碼的時候即時生成預覽效果。Typora 的一切都圍繞純粹的生產效率而設計。

Typora一直是我最喜歡的 markdown 編輯器,寫部落格、記筆記的首選軟體。相信大部分朋友也在使用 Typora 這款軟體,最新的Typora終於支援圖床功能。

1、創建並上傳文件到存儲空間

1.1、註冊七牛帳號,並且實名認證

1.2、創建儲存空間

打開側邊欄,選擇對象存儲
創建儲存空間

選擇新建空間
新建空間

  • 存儲空間名稱:按規則隨便取
  • 存儲區域:選擇離靠近的地區
  • 訪問控制:選擇公開,否則外網無法訪問,沒法作為圖床

1.3、上傳文件

上傳文件

  • 選擇文件管理,點擊上傳文件即可上傳

  • 不綁定私有域名時默認外鏈域名即為官方分配的30天有效臨時域名,

    如果綁定私有域名可以選擇私有域名

  • 點擊詳情即可預覽圖片

  • 點擊更多,選中複製外鏈即可獲得圖片外鏈

獲取外鏈之後直接輸入瀏覽器網址欄,或者在程式碼里引用就行了!

2、創建二級域名並解析到七牛雲CNAME

七牛雲默認會每隔30天重新分配一個臨時的測試域名,也就是說,過了30天域名重置以後,之前的外鏈就全部失效,為了預防這種情況,我們需要綁定一個自己的私人域名。

2.1、設置存儲空間域名綁定

設置存儲空間域名綁定

  • 選擇自定義域名,添加一條你要綁定的子域名,其他設置不需要動,添加完保存即可

    子域名格式需要為:主機記錄.域名,比如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下載地址,選擇版本並且根據自己的作業系統選擇對應的安裝包即可。

下載並安裝圖床管理工具PicGo

安裝好後打開介面如下所示:

PicGo主介面

在左側的圖床設置中,有非常多的圖床可供選擇,大家可以根據自己的使用進行選擇,這兒我們選擇「七牛圖床」

七牛圖床設置

需要填寫的配置項:

  • 設定AK和SK:前往七牛雲個人中心 ->密匙管理複製黏貼即可

設定AK和SK

  • 設定儲存空間名:和七牛存儲空間名稱一致

  • 設定訪問網址:即你的二級域名,這裡需要在域名之前加上//

設定訪問網址

  • 創建空間時,選擇的存儲區域,從z0到z1,依次對應:華東、華北、華南、北美、東南亞。七牛雲的存儲對象的地區對應表如下:

創建空間

存儲區域

然後點「確認」按鈕,保存設置,回到上傳區選項即可上傳圖片到圖床。

  • 上傳圖片成功後剪貼板會自動獲取圖片引用的外鏈
  • 在相冊可以查看通過PicGo上傳過的圖片

我們拖動一張圖片到下圖區域就會自動上傳到七牛雲中

拖動上傳

單擊「相冊」,可以查看已上傳的圖片。

相冊

要實現Typora中圖片自動的上傳,我們需要設置PicGo Server,如下圖所示。

PicGo Server

設置PicGo-Server

默認配置即可,只要保證埠沒有被佔用。

4、Typora配置圖片上傳

4.1、配置上傳服務設定

設置好PicGo後來到Typora進行配置,打開Typora的文件菜單,選擇「偏好設置」,選擇「影像」,如下圖所示。

配置上傳服務設定

  • 上傳服務:選擇PicGo
  • PicGo路徑:選擇PicGo安裝根目錄的.exe文件

配置好後,可以單擊上圖中的「驗證圖片上傳選項」,來確定配置的正確性,如下圖所示。

驗證圖片上傳選項

4.2、上傳圖片

上傳圖片有三種方式:

  • 加入圖片時直接上傳

    在偏好設置 –》影像 –》插入圖片時 設置

  • 對圖片右鍵上傳

  • 在格式 –》影像 –》 上傳所有本地圖片

圖片上傳成功,會在右下角顯示提示資訊。

圖片上傳成功提示

如果出現報錯,一般是埠被佔用,可以打開PicGo的server看看埠是否還是36677,改變了的話改回來就好了。

以上我們就完成了圖片的自動上傳,編寫文章非常的方便了。


一路走來數個年頭,感謝RDIFramework.NET框架的支援者與使用者,大家可以通過下面的地址了解詳情。

RDIFramework.NET官方網站://www.rdiframework.net/

RDIFramework.NET官方部落格://blog.rdiframework.net/

特別說明,框架相關的技術文章請以官方網站為準,歡迎大家收藏!

RDIFramework.NET框架由海南國思軟體科技有限公司專業團隊長期打造、一直在更新、一直在升級,請放心使用!

歡迎關注RDIFramework.NET框架官方微信公眾號(微訊號:guosisoft),及時了解最新動態。

使用微信掃描二維碼立即關注

微訊號:guosisoft