使用vscode高效編寫博客園博客

圖片上傳可真麻煩!

以前寫博客的時候，我通常是使用馬克飛象先編輯好而後直接複製粘貼到博客園中，這樣作一方面能夠一邊寫一遍預覽改，另外一方面能夠保存到印象筆記中，這樣一箭雙鵰，比較方便。可惟一的問題就在於，圖片插入的問題，以下圖

如圖能夠看到，本地編輯預覽的時候圖片引用的是本地路徑的圖片(這固然也是理所應當的事，由於文檔就是本地的)，因而在寫完以後，將文章放到博客園的編輯器裏的時候，就要從新的去拖拽上傳圖片或者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文件地址)
    json { "markdown.styles": [ "https://files.cnblogs.com/files/invoker-/dark.css" ] }
  • 在vscode左側插件還提供了Markdown的提綱進行查看，方便這裏思緒整理，如圖。
    

使用github進行同步管理

使用上圖的設置以後，我感受比起以前用馬克飛象寫，舒服了不少，但馬克飛象是和印象筆記關聯的，這裏我以爲不如直接把博客和github進行關聯，這樣方便保存和管理。

如何安裝與使用git這裏我就再也不贅述了，相關的教程十分的多。簡單來講就是將本地的博客文件夾和github遠程倉庫進行關聯。vsCode內置了git插件，git的提交和推送經過命令搜索都十分的方便，如圖。

一樣的，你也能夠自行設置git經常使用操做的快捷鍵。這樣，你只須要按幾個鍵，文章就推送到github上了，很是簡單。以下圖。

總結

在一翻設置以後，以前寫博客以爲最麻煩圖片問題總算解決了，如今我只須要在vscode編寫預覽完博客，連瀏覽器都不用打開，按幾個鍵，就能夠把博客推送到cnblog與github上了 :)。