Hexo部落格寫作與圖片處理的經驗

2020 年 3 月 18 日
筆記

目標
Typora 編寫部落格
Hexo配置
hexo-asset-image 的問題
hexo-simple-image 的問題
解決方案
參考資料

本文使用的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的圖片格式插入的。

![image-20200314195122981](20200314-write-hexo-with-typora/image-20200314195122981.png)

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目錄下看圖片是否拷貝到了對應的目錄
nom install hexo-image-link --save安裝插件
hexo server -debug 預覽圖片是否能正常顯示