一姚糊、vscode編寫markdown
markdown是用hexo寫博客的可選文本格式之一，通常我們用hexo new xxx來創(chuàng)建一篇新的post。md編輯器有很多淌铐，預覽我們hexo項目中的md文章的方法也有很多，我的方案是編輯與預覽都在vscode中完成蔫缸。
這里要先提一下在hexo3.0版本中編寫md文件時新的圖片插入方式：只要在_config.yml中添加post_asset_folder: true腿准，就會在生成新post時創(chuàng)建一個同名文件夾；在md中輸入{% asset_img xxx %}拾碌，就可以插入這個文件夾中的圖片吐葱。(這種方式較之以前把圖片放在source/images，md中用[圖片上傳失敗...(image-1418e4-1531131142965)]的方式更整潔校翔，圖片隨文章分類)
vscode有很多md的插件弟跑，這里推薦兩個插件，并針對hexo做一些配置調整展融，以滿足插入圖片與預覽md的需求：
-
粘貼圖片
Paste Image
paste-image
這個插件用來在md文檔中粘貼圖片窖认，默認會在文檔的同級目錄下新建一個圖片文件，并在md中插入一行相對路徑的圖片代碼告希。迎合上述hexo的新圖片插入方式扑浸，可以在vscode的user-settings里新增兩條配置：
"pasteImage.path": "${currentFileNameWithoutExt}/",
"pasteImage.insertPattern": "{% asset_img ${imageFilePath} %}"
這樣以來，粘貼的圖片就會保存到md文檔的同名文件夾下燕偶，文檔中將插入hexo asset語法的代碼喝噪。
-
預覽
Markdown Preview Enhanced
Markdown Preview Enhanced
這個是下載量最高的vscode md預覽插件，支持很多功能指么，并支持擴展md解析語法≡途澹現在就要利用這個功能來解決一個問題：vscode內無法預覽{% asset_img xxx %}代碼的圖片。ctrl+shift+P輸入Markdown Preview Enhanced: Extend Parser調出插件的parse.js文件伯诬，修改其中的onWillParseMarkdown方法：
module.exports = {
onWillParseMarkdown: function(markdown) {
return new Promise((resolve, reject)=> {
markdown = markdown.replace(
/\{%\s*asset_img\s*(.*)\s*%\}/g,
(whole, content) => (``)
)
return resolve(markdown)
})
},
...
}
這樣以來晚唇，我們md中的{% assest xxx %}代碼就會在解析預覽時被替換成md的圖片語法，并且同樣采用相對路徑盗似，圖片預覽成功哩陕。
二、部署你的blog
hexo有很多部署赫舒、發(fā)布方式悍及，我的需求主要是：
- 本地寫文章
- 將變更同步到自己的vps上，并且無需登錄vps刷新
- 同步到第三方遠程倉庫備份
1由vscode解決接癌，2通過git hooks來實現自動化部署心赶，3只需要在_config.yml中新增deploy的遠程倉庫即可。
利用git hooks實現自動化部署參見這篇文章-使用 Git Hook 自動部署 Hexo 到個人 VPS缺猛，主要思路就是：
- 在vps上創(chuàng)建一個空的git倉庫缨叫；
- 在vps上新建一個文件夾存放我們blog的靜態(tài)頁面椭符，即
hexo generate生成的public文件夾內容； - 利用
git hooks弯汰，在該倉庫update完成時艰山，自動把內容checkout到2中的網頁文件夾； - 利用
nginx或其他http server咏闪，將http請求定向到網頁文件夾曙搬。
最后我的_config.yml中的deploy有兩個git repo：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
server: xxx@xxx:xxx.git
backup: yyy@yyy:yyy.git
這樣以來，每次我寫完blog鸽嫂，只需要執(zhí)行hexo generate --deploy纵装，就會生成新的靜態(tài)頁面，自動部署到vps上据某，并同步到備份git倉庫中橡娄。
