MD编辑器采用的是Typora
图片存放位置设置如下:
用typora, 这样直接向其内拖图片即自动生成同名文件夹,并将图片放在文件夹中。如图所示
HEXO官方 关于图片引用的说明
可看可不看,不推荐官方的图片外挂标签的引用方式(这种方式MD编辑器不识别),还是推荐使用下面的插件来引用(可以直接拖入typora即可)。
HEXO插件hexo-asset-image
这个插件基本上都要自己去手动修改的!!!
注意:该插件支持abbrlink,所以会有不少问题,需要自己手动去调整。
hexo-asset-imag的安装:
npm install https://github.com/CodeFalling/hexo-asset-image --save
_config.yml配置:
post_asset_folder: true
marked:
prependRoot: true
postAsset: true
post_asset_folder: true marked: prependRoot: true postAsset: true |
MD编辑器采用的是Typora
图片存放位置设置如下:
编辑
用typora, 这样直接向其内拖图片即自动生成同名文件夹,并将图片放在文件夹中。如图所示
编辑
编辑
HEXO官方 关于图片引用的说明
可看可不看,不推荐官方的图片外挂标签的引用方式(这种方式MD编辑器不识别),还是推荐使用下面的插件来引用(可以直接拖入typora即可)。
HEXO插件hexo-asset-image
这个插件基本上都要自己去手动修改的!!!
注意:该插件支持abbrlink,所以会有不少问题,需要自己手动去调整。
hexo-asset-imag的安装:
npm install https://github.com/CodeFalling/hexo-asset-image --save
_config.yml配置:
//只开启这个就够
post_asset_folder: true
//下面这个不用管,有些人文件中没有下面2个,这个是上面官网复制加进去的,没啥用。
marked:
prependRoot: true
postAsset: true
在hexo clean;hexo g后, public/下会有如下文件:
然后注意路径:
如果路径不对,要修改插件hexo-asset-image的源码
该插件的作用其实是将引用的md代码转换成html可以识别的代码。
如果安装了abbrlink,那么我们自己会修改permalink字段,这就导致hexo-asset-image插件不能够有效的处理我们自定义的permalink。所以我们需要修改其js文件。
在node_modules中找到hexo-asset-image.
打开index.js
不要直接复制这个代码!除非你的permalink是按照我的方式去做的:
Hexo 中permalink使用 Hexo-abbrlink生成唯一永久文章链接及小优化_lessCoder的博客-CSDN博客下面的这些,根据不同版本,其写法不太一样。https://blog.csdn.net/lessCoder/article/details/127858588源码解读:(不要复制这个代码,需要自己修改)
重点是第58行左右的这个代码:
$(this).attr('src', config.root + link + src);
其中
- config.root是空字
- src是图片名称
- link是permalink(在_config.yml中)经过处理后得到的,其正确的结果应该是B的名称。
我的permalink原本的结果被处理成了:
20221118035946-40e9fbf0.htm //注意,此处没有 “l”。所以这就导致了网页中对图片的引用变成了:
20221118035946-40e9fbf0.htm/1669668679430.png
显然,正确的应该是:
20221118035946-40e9fbf0/1669668679430.png
所以,js处理的时候给我截取不足,因此我修改了(大约是23行):
//我的显然是走进了else里面的,所以endPos直接原字符串长度-5即可
else {
// var endPos = link.length-1;
var endPos = link.length-5;
}
然后结果就正确了,可以正常显示了!
以下为备份:
'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 = '';
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
// if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
if(/.*\/index\.html$/.test(link)) {
// when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
// image in xxtitle/ will go to xxtitle/index/
appendLink = 'index/';
var endPos = link.lastIndexOf('/');
}
else {
// var endPos = link.length-1;
var endPos = link.length-5;
}
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('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!(/http[s]*.*|\/\/.*/.test(src)
|| /^\s+\//.test(src)
|| /^\s*\/uploads|images\//.test(src))) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
// $(this).attr('src', config.root + src);
// $(this).attr('src', src);
console.info&&console.info("update link as:-->"+config.root + link + src);
// console.info&&console.info("[LAOBU]:-config.root->" +config.root );
// console.info&&console.info("[LAOBU]:link-->" + link );
// console.info&&console.info("[LAOBU]:src-->" + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
});
data[key] = $.html();
}
}
});