本文使用的Typora版本為0.9.9.32.1(4191)，Hexo版本為4.2.0。
Hexo是一款非常優秀的開源博客管理工具，所有的博客文檔都通過Markdown格式編寫，Markdown編輯器有很多，原來的時候我經常用Evernote編寫，但是Evernote寫Markdown經常會出現輸入法響應緩慢的情況。最近我從Evernote轉到了Typora，想到哪裡就能夠敲字寫到哪裡，而且輸入後馬上就能夠轉換為友好的顯示樣式，體驗非常好。
本文介紹了如何處理博客博客編寫過程中插入圖片，上傳圖片等一些問題，希望我的經驗能夠對大家有幫助。
目標我的目標是使用Typora編寫博客，編寫過程中可能通過拷貝、粘貼插入圖片，也可能從網絡上下載圖片。希望能夠達到以下效果：
•使用Typora編寫的時候能夠實時看到圖片•本地使用hexo server瀏覽效果時，也能夠看到圖片•圖片和Markdown文件放一起都上傳到GitHub pages。
我沒有選擇圖床作為圖片的保存方式，一方面免費的圖床很不穩定，另一方面使用圖床在沒有網絡的情況下可能瀏覽器來還是不太方便。我還是習慣將所有筆記最終都歸檔保存在Evernote中。
Typora 編寫博客Typora支持將插入的圖片文件拷貝到指定路徑，通過Typora->偏好設置->圖像，然後參照下圖選擇複製到指定路徑將圖片拷貝到與Markdown文件同名目錄下。
這樣我們在編輯博客的時候，就可以實時看到插入的圖片。可以截圖插入，也可以從網頁上直接拖拽插入，非常方便。
查看Markdown原始碼，看到圖片是以Markdown的圖片格式插入的。
Hexo配置首先修改 hexo 全局配置文件 _config.yml 中的配置：
這樣在我們每次新建Markdown文件的時候，都會創建一個與文件同名的文件夾用於存放圖片。
$ hexo new 20200314-es-monitoring-metric$ ls source/_posts/total 8drwxr-xr-x 4 shiqiang staff 128B 3 14 07:58 ./drwx-+ 32 shiqiang staff 1.0K 3 14 07:52 ../drwxr-xr-x 2 shiqiang staff 64B 3 14 07:58 20200314-es-monitoring-metric/-rw-r--r-- 1 shiqiang staff 77B 3 14 07:58 20200314-es-monitoring-metric.md使用hexo generate生成靜態文件後，可以觀察到圖片已經拷貝到了對應的目錄下。
$ ls public/2020/03/14/20200314-write-hexo-with-typora/total 424drwxr-xr-x 6 shiqiang staff 192B 3 14 10:26 ./drwxr-xr-x 4 shiqiang staff 128B 3 14 10:26 ../-rw-r--r-- 1 shiqiang staff 14K 3 14 10:26 Screenshot-150-1-20200314081849804.png-rw-r--r-- 1 shiqiang staff 79K 3 14 10:26 image-20200314080935503.png-rw-r--r-- 1 shiqiang staff 106K 3 14 10:26 image-20200314083152512.png-rw-r--r-- 1 shiqiang staff 5.3K 3 14 10:26 index.html但是現在瀏覽的時候還不能夠看到圖片，可以看到是因為我們插入的時候用的是包含了一個與Markdown文件同名文件夾的相對路徑，而生成的靜態文件夾下沒有那個同名文件夾所以造成了訪問404。
這時首先通過搜尋引擎查到了有兩個解決方案：hexo-asset-image 和 hexo-simple-image。
hexo-asset-image 的問題這個插件在處理圖片路徑時，看到更新的路徑有問題，導致通過hexo server 還是不能夠正確顯示圖片。
hexo-simple-image 的問題在 Hexo 官網上看到這個插件的描述也是解決圖片路徑問題的，但是安裝嘗試之後遇到如下報錯。
07:19:06.993 FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.htmlTypeError: Cannot read property '1' of null at /Users/shiqiang/Projects/hexo-blog/blog/node_modules/hexo-simple-image/lib/index.js:9:20 at String.replace (<anonymous>) at Hexo.module.exports (/Users/shiqiang/Projects/hexo-blog/blog/node_modules/hexo-simple-image/lib/index.js:2:31)解決方案參考hexo-asset-image和hexo-simple-image的源碼，發現一個思路是在after_post_render之後將html中圖片連結替換為絕對路徑，一個是在before_post_render階段將markdown文件中圖片的路徑轉換為asset_img函數。
經過分析，覺得還是 hex-simple-image 的處理方式比較簡單，因此對插件內容做了修改，現在可以用我這個新的插件來解決圖片顯示的問題。
具體可以按照下面的步驟操作。
•修改post_asset_folder: true•生成一篇新的博客 hexo new blog-name•通過typora向博客中插入一張圖片，此時可以到source/_posts目錄下看圖片是否拷貝到了對應的目錄•nom install hexo-image-link --save安裝插件•hexo server -debug 預覽圖片是否能正常顯示
References[1] Hexo與typora結合: https://www.jianshu.com/p/81a40a2c6514
[2] Front-matter 說明: https://hexo.io/zh-cn/docs/front-matter.html
[3] 用 Typora 寫 Hexo 博客: https://zhangnew.com/Typora-Hexo.html
[4] Hexo 插件: https://hexo.io/zh-cn/docs/plugins.html
[5] hexo-simple-image: https://github.com/Aragakiiii/hexo-simple-image
[6] hexo-asset-image: https://github.com/xcodebuild/hexo-asset-image
[7] Node.js: https://nodejs.org/en/
[8] JavaScript 1.3 Overview, Part II: Replace Method's Lambda Expression - Doc JavaScript: http://webreference.com/js/column26/lambda.html