# 引言

Hexo 资源文件夹 启用后,使得文章图片等外挂资源可以按文件夹和文章对应。

  • Hexo 若正常发布,需要 {% asset_img slug [title] %} 引入图片,或者 [](image file name) ,无法在本地 markdwon 书写时预览
  • Markdown 若正常预览, 引入图片需要采用 [相对路径]{.blue} , Hexo 发布时则 图片链接 异常

本文主要解决两者之间的冲突,使得二者能够兼得.

# 实现

本地编写仍然采用方便预览的相对路径引入方式, 编写 Hexo 过滤器,在文章渲染结束后,将 img资源路径 进行替换

'use strict';
var cheerio = require('cheerio');
// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
    return str.split(m, i).join(m).length;
}
hexo.extend.filter.register('after_post_render', function (data) {
    var config = hexo.config;
    if (config.post_asset_folder) {
        var link = data.permalink;
        var beginPos = getPosition(link, '/', 3) + 1;
        var appendLink = '';
        if (/.*\/index\.html$/.test(link)) {
            appendLink = 'index/';
            var endPos = link.lastIndexOf('/');
        }
        else {
            var endPos = link.lastIndexOf('.');
        }
        link = link.substring(beginPos, endPos) + '/' + appendLink;
        var toprocess = ['excerpt', 'more', 'content'];
        for (var i = 0; i < toprocess.length; i++) {
            var key = toprocess[i];
            var $ = cheerio.load(data[key], {
                ignoreWhitespace: false,
                xmlMode: false,
                lowerCaseTags: false,
                decodeEntities: false
            });
            $('img').each(function () {
                if ($(this).attr('data-src')) {
                    var src = $(this).attr('data-src').replace('\\', '/');
                    if (!(/http[s]*.*|\/\/.*/.test(src)
                        || /^\s+\//.test(src)
                        || /^\s*\/uploads|images\//.test(src))) {
                        var srcArray = src.split('/').filter(function (elem) {
                            return elem != '' && elem != '.';
                        });
                        if (srcArray.length > 1)
                            srcArray.shift();
                        src = srcArray.join('/');
                        $(this).attr('data-src', config.root + link + src);
                        console.info && console.info("update link as:-->" + config.root + link + src);
                    }
                }
                else {
                    console.info && console.info("no src attr, skipped...");
                    console.info && console.info($(this));
                }
            });
            data[key] = $.html();
        }
    }
});

# 主题集成

集成到主题内部的方式,可以查看博客文章 Shoka 主题:资源文件夹图片相对路径引用转换

本文只是基于 Hexo过滤器,阐述原理并给出实现

# 结语

参考链接:

  • 过滤器(Filter)
更新于 阅读次数