# 引言
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)