本文使用的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 中的配置：
post_asset_folder: true
這樣在我們每次新建Markdown文件的時候，都會創建一個與文件同名的文件夾用於存放圖片。
$ hexo new 20200314-es-monitoring-metric
$ ls source/_posts/
total 8
drwxr-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 424
drwxr-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.html
TypeError: 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目錄下看圖片是否拷貝到了對應的目錄 npm install hexo-image-link --save安裝插件hexo server -debug預覽圖片是否能正常顯示
