前言
最近心血來潮,想將多年未更新的 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
指令建立文章的同時,自動建立好資源圖片的資料夾,如果只限定需要將圖片放在與文章同個路徑下才能正常解析,這真的蠻奇怪的???