開發Hexo插件-解決本機預覽圖片跑不出來的問題

Innovation Photos, Download The BEST Free Innovation Stock Photos & HD Images

架設好Hexo,也很開心的寫了第一篇文，結果在本機執行預覽的時候發現怎麼圖片全部都跑不出來

雖然說後續上傳到GitHub可能可以解決這樣的問題，但是本機不能看感覺實在很差啊！！

於是就開始尋找解決的方法，本篇文章是參考這篇文章進行實作，將一些過程中我覺得不太清楚的地方再加強描述，覺得我說明得不夠清楚的地方也可以參考原本的文章

1. 下載Typora

https://typora.io

2.更改圖片儲存設定

將這幾個選項勾選起來

日後寫文章的時候，直接截圖好的圖片貼到Typora即可

3. 更改_config.yml配置

更改根目錄的_config.yml檔案

將post_asset_folder: false改成post_asset_folder: true

這樣修改之後，每次我們產生新文章的時候，Hexo就會自動產生一個資料夾來放置文章相關的資源

官方參考文件

4.開發 Hexo 轉換圖片路徑插件

現在我們在Typora使用 ![example](postname/example.jpg) 預覽圖片都是正常的，但是發佈到Hexo時，這樣的格式是不支援的，所以就會造成顯示不出圖片的問題，因此我們必須將原本的格式轉成Hexo支援的路徑，才可七正常顯示

![example](postname/example.jpg) --> {% asset_img example.jpg example %}

而這個動作必須在hexo -g之前處理，所以我們就要來新增一個小插件做路徑的轉換

官方參考文件

4.1在.\node_modules下建立hexo-asset-img資料夾

1
2
3

mkdir hexo-asset-img
cd hexo-asset-img
npm init

這樣package.json檔案就建立完成

4.2 建立index.js

接著在hexo-asset-img中建立index.js這個檔案

輸入以下程式

//const log = require('hexo-log')({ 'debug': false, 'slient': false });

/**
 * md文件返回 true
 * @param {*} data 
 */
function ignore(data) {
    // TODO: 好奇怪，试了一下, md返回true, 但却需要忽略 取反!
    var source = data.source;
    var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
    return ['md',].indexOf(ext) > -1;
}

function action(data) {
    var reverseSource = data.source.split("").reverse().join("");
    var fileName = reverseSource.substring(3, reverseSource.indexOf("/")).split("").reverse().join("");

    // ![example](postname/example.jpg)  -->  {% asset_img example.jpg example %}
    var regExp = RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g");
    // hexo g
    data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}","g");

    // log.info(`hexo-asset-img: filename: ${fileName}, title: ${data.title.trim()}`);
    
    return data;
}

hexo.extend.filter.register('before_post_render',(data)=>{
    if(!ignore(data)){
        action(data)
    }
}, 0);