Hexo 圖片顯示異常路徑修正紀錄

前言

最近心血來潮,想將多年未更新的 Hexo 版本從 4.1 升級到 7.0,順帶更新到最新版本的 Next Theme,在更新的過程中,無意間又發現了一個坑…

原來 Hexo 不知從何開始已經正式導入 Markdown 語法插入圖片了,所以導致在 Hexo 4.2.0 late 版本,使用 hexo-asset-image 作解決方案時會產生絕對路徑的 Bug。

要解決這個問題,最好的解決方式當然是移除 hexo-asset-image 即可,但是依照官方的設置方式,又會發生一個讓我覺得困惑的狀況…

以下為官方的建議設置方式:

使用 Markdown 嵌入圖片

hexo-renderer-marked 3.1.0 引入了一個新的選項,其允許你無需使用 asset_img 標籤插件就可以在 markdown 中嵌入圖片

如需啟用:

1
2
3
4
5
# _config.yml
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

啟用後,資源圖片將會被自動解析為其對應文章的路徑。
例如: image.jpg 位置為 /2020/01/02/foo/image.jpg ,這表示它是 /2020/01/02/foo/ 文章的一張資源圖片, ![](image.jpg) 將會被解析為 <img src="/2020/01/02/foo/image.jpg">

依照上述最後一段話的敘述,你會發現所放置的圖片必須放在與文章相同的資料夾下,才能正常被解析為<img src="/2020/01/02/foo/image.jpg">,如果你是將圖片放置在文章的次資料夾中,是無法被順利解析的,它所解析的路徑會變成<img src="Paper/image.jpg">,下是一個實例。

圖片放在文章的次資料夾中如下

插入的路徑為 {% asset_img "sray Logo.jpg" "sray Logo" %}

而實際上網頁顯示圖片的路徑會變成 https://shuwn.dev/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

而正確的圖片路徑應解析為 https://shuwn.dev/2023/11/06/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

以官方原先的設置必須將圖片放在文章相同的資料夾中如下

才會取得正確的圖片路徑 https://shuwn.dev/2023/11/06/2023-11-11-Hexo_圖片顯示異常路徑修正紀錄/sray Logo.jpg

這完全不符合日常圖文管理方式,而且官方上述設定 post_asset_folder: true,主要是讓你在利用 hexo new paper 指令建立文章的同時,自動建立好資源圖片的資料夾,如果只限定需要將圖片放在與文章同個路徑下才能正常解析,這真的蠻奇怪的???

所幸我後來很快的找到了一個解決方式,我們可以保有既有的官方設置方式,在額外安裝一個 hexo-image-link Pluge,即可解決這個問題。

按照以下步驟進行安裝

  1. 輸入以下指令安裝 hexo-image-link Pluge

    1
    npm install hexo-image-link --save
  2. 打開 Hexo 的 ‘_config.yml’ 進行設置,確認配置如下

    1
    2
    3
    4
    5
    # _config.yml
    post_asset_folder: true
    marked:
    prependRoot: true
    postAsset: true
  3. 接下來輸入以下指令重新生成靜態網頁,現在即可正常顯示圖片了!

    1
    2
    3
    $ hexo clean # 清除既有靜態檔案
    $ hexo g # 重新生成靜態網頁檔案
    $ hexo d # 重新推送檔案到伺服器