1. 程式人生 > 實用技巧 >【轉載】上傳Markdown檔案內的本地圖片至部落格園

【轉載】上傳Markdown檔案內的本地圖片至部落格園

轉載

本文轉載自https://www.cnblogs.com/hemou/p/12332551.html

作者: 賀墨於

出處: https://www.cnblogs.com/hemou/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。

正文開始

因為習慣使用Markdown格式做筆記,有時希望將它放到網上方便在任何有網路的地方查詢。開始是放到Github中的,但是有時訪問的速度太慢了所以準備將筆記放到部落格園中,這樣訪問速度就快了。

但是使用Markdown寫的檔案中時不時會有幾張圖片,上傳筆記的時候還要一個一個的去本地找照片,再上傳到部落格園上。如果說一兩張圖片還好,但是圖片多了,這樣重複無聊的動作就會讓人煩躁,因此便產生了編寫能自動上傳Markdown中的本地圖片,並自動改掉文章中的連結的程式的想法

上傳圖片需要賬號資訊,但只知道賬號密碼沒啥用,因為不知道上傳圖片的API介面,而偶然的機會知道了Electron,它可以用HTML,CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個執行時環境中,並將其打包為Mac,Windows和Linux系統下的應用來實現這一目的。

也就是說只要用Eletron編寫的程式,然後用它登入賬號,程式就能儲存其session,再使用ajax上傳圖片,這樣就能自動附帶上使用者的session,然後就能上傳圖片了。額大概就這意思,反正我是這麼理解的,使用說明如下

程式介面

程式介面如下,仿照PS做的

登入賬號

然後登入一下賬號,這個是載入部落格園的登入頁面的,絕對放心,不會盜取密碼的。

拖曳MD檔案

把md檔案拖到左邊虛線框內

拖曳檔案圖片

找到存放圖片的位置,ctrl+a全部複製,不管圖片是不是在文章中引用過,程式會自動剔除多餘的圖片。要注意的是這個是根據正則表示式,我只寫了![]()型別的,還有種格式<img src>大概長這樣的型別沒有考慮。底下有可上傳圖片的數量,左邊虛線框有圖片的樣子,可以判斷上傳是否有誤。

還有需要注意的地方,圖片的位置只能是相對路徑,否則不能上傳成功。如果你使用的是Typora文字編輯器的話可以在偏好設定裡調節,為保證成功上傳,設定成如下圖所示就行了。這樣當我們拖動一個檔案到Typora文字編輯器裡時,軟體會自動複製影象到指定的相對路徑中。

解析上傳

最後點選解析上傳就行,程式會將本地地址替換為連結,並輸出為一個副本,不用擔心對之前的文字有損傷

演示

成功後會產生一個副本,不會對之前的筆記產生影響,現在對比一下內容

連結就被替換掉了。

然後將整個文章複製,貼上到部落格園筆記編寫處,就行了

還有使用這個軟體登入賬號好像會擠掉你自己在瀏覽器中登入的賬號,所以方便點,當你解析好自己的筆記後,再點選一下登入賬號按鈕,這時他會提醒你已近登入過了

然後返回就行,這時就會回到部落格園首頁,在這裡同樣可以上傳自己的筆記

原始碼和程式

程式藍奏雲連結:https://www.lanzous.com/i9hs2ub

原始碼Github地址:https://github.com/HeMOua/cnblogsUpload

若有發現bug的道友可以留言提醒我一下,感謝

使用Typora自定義上傳服務設定

看了一下沉雲道友的評論,Typora還真可以上傳圖片,所以說我這玩意算是白寫了