hexo相對路徑圖片顯示

阿新 • • 發佈：2022-04-04

說明

hexo的圖片預設不支援相對路徑。需要配置 post_asset_folder 選項，設定從false改成true之後支援。但是要求圖片目錄必須和檔名相同。

由於我在typore下的markdown資源圖片都是放在images目錄下面，以相對路徑方式引用。與hexo配置不相容，並且我也不想去修改目錄結構。因此花一天寫了個hexo外掛，來實現相對路徑圖片頁面展示的功能。

這個外掛的目的如下：

圖片可以為hexo的_posts目錄下的任意目錄下的資源圖片，文章內可以使用相對路徑引用，在模板渲染時，外掛會將相對路徑的圖片轉為inline模式，以base64編碼直接在html內引用。這樣就不會出現目錄問題。

1. 安裝外掛：

安裝命令如下

npm i hexo-filter-inline-image

2. 配置hexo啟用外掛

_config.yml 增加以下配置

inline_image:  
    enabled: true
    compress: false
    remote: false
    limit: 2048

compress 是否啟用圖片壓縮
remote 是否轉換http和https圖片,預設關閉
limit 限制圖片大小（kb）在此以內才會進行轉換

https://github.com/shawnxt/hexo-filter-inline-image.git