圖片上傳可真麻煩!
之前寫博客的時候，我一般是使用馬克飛象先編輯好然后直接復制粘貼到博客園中，這樣做一方面可以一邊寫一遍預覽改，另一方面可以保存到印象筆記中，這樣一舉兩得，比較方便。可唯一的問題就在於，圖片插入的問題，如下圖
如圖可以看到，本地編輯預覽的時候圖片引用的是本地路徑的圖片(這當然也是理所應當的事，因為文檔就是本地的)，於是在寫完之后，將文章放到博客園的編輯器里的時候，就要重新的去拖拽上傳圖片或者gif,當圖片數量多了起來之后，就顯得很麻煩了。明明我都寫完了，怎么還要折騰呢？
使用園友的插件
昨天在搜索vscode中關於racket的配置的問題時候，無意間看到了一篇博客園的用vscode寫博客和發布，發現這位博主根據xmlrpc編寫了一個cnblog的插件，其中就包括了很方便的圖片上傳，我如獲至寶，立刻進行了實踐，發現效果還不錯(這篇文章就是用vscode編寫發布的啦~)。
安裝與使用
安裝vscode與cnblog插件
這里還是給出原作者的文章，里面寫的已經十分清楚用vscode寫博客和發布。
插件的功能雖然不多，但都十分實用，已經完全可以滿足日常需求啦。
高效截取圖片並上傳
看完上面插件作者的文章我覺得應該都明白功能的使用了，這里我講一下我截圖並且上傳的一些小技巧。
-
截圖我使用的是QQ截圖，默認的快捷鍵(
ctrl+alt+a)，可以自定義編輯一些文字，很方便。在編輯完截圖之后使用ctrl + s可以保存到本地的文件夾，如圖
-
之后可以將保存到本地的文件夾，這里我們可以將用於存儲博客圖片的文件夾添加至windows快速訪問區(寫博客的電腦系統為win10)，如圖。
-
在將文件夾設置到快速訪問區之后，每次截圖編輯完保存的時候就可以直接選擇快速訪問區的文件夾了,如圖。
-
接着可以為圖片文件設置一個容易分辨的名字，例如圖中我設置的是
vscode-blog-1這樣的文件名，這樣比較容易區分。並且從第二張圖片開始你就可以直接在第一章圖片上使用f2 + ctrl c快速的復制到文件名，剩下的文件名你只需要輸入類似2 3 4 5的序號即可。 -
最后使用cnblog插件的圖片上傳功能將圖片上傳到博客園里即可，下面是完整的操作圖。
整個操作步驟其實一共只有三步 截圖-保存-上傳 ，操作完畢之后圖片與博文一步到位。
安裝markdown的輔助插件
換成了vscode編寫博客，我發現鏈接，表格與目錄的快捷插入方式都沒有了(這幾點馬克飛象里都是有的)，該怎么辦呢？這里我自己使用的是兩款markdown插件，只用到了里面的一些功能，不過對我來說已經足夠了。
-
Markdown Shortcuts插件，該插件可以提供鏈接與表格的快速插入(我只用到了這里面這兩項功能),下載完插件后，在編輯頁面點擊右鍵即可看到關於鏈接(默認ctrl + l)的快捷鍵，以及表格(add table)的插入,插入表格可以自行設置快捷鍵,這里我設置的是ctrl+t。如圖
-
Markdown All in One插件，名字很霸氣的插件。我使用到了里面的數學公式插入,css預覽美化與目錄生成插件(當然博客園的是用Js函數生成的)。- 數學公式的默認快捷鍵是
alt + m(math)，例如\(f_(x) = x^2\) - 生成目錄可以通過命令查找來完成
markdown create table of conents,如圖
- css的樣式可以在用戶目錄添加這樣的一段Json字符串設置(這里的地址可以填寫你本地或者網絡的css文件地址)
{ "markdown.styles": [ "https://files.cnblogs.com/files/invoker-/dark.css" ] } - 在vscode左側插件還提供了Markdown的提綱進行查看，方便這里思緒整理，如圖。
- 數學公式的默認快捷鍵是
使用github進行同步管理
使用上圖的設置之后，我感覺比起之前用馬克飛象寫，舒服了很多，但馬克飛象是和印象筆記關聯的，這里我覺得不如直接把博客和github進行關聯，這樣方便保存和管理。
如何安裝與使用git這里我就不再贅述了，相關的教程十分的多。簡單來說就是將本地的博客文件夾和github遠程倉庫進行關聯。vsCode內置了git插件，git的提交和推送通過命令搜索都十分的方便，如圖。
同樣的，你也可以自行設置git常用操作的快捷鍵。這樣，你只需要按幾個鍵，文章就推送到github上了，非常簡單。如下圖。
總結
在一翻設置之后，之前寫博客覺得最麻煩圖片問題總算解決了，現在我只需要在vscode編寫預覽完博客，連瀏覽器都不用打開，按幾個鍵，就可以把博客推送到cnblog與github上了 😃。