# 引言
Hexo 资源文件夹 启用后，使得文章图片等外挂资源可以按文件夹和文章对应。
Hexo若正常发布，需要{% asset_img slug [title] %}引入图片，或者[](image file name)，无法在本地markdwon书写时预览Markdown若正常预览， 引入图片需要采用 相对路径 ，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 的 过滤器，阐述原理并给出实现
# 结语
参考链接:
有什么想法，欢迎留下评论。