如上下图,在我之前的一篇文章里面,把图片加上a标签链接会导致a标签失效,点击直接就预览了,这是因为LightGallery.js图片预览导致的,而我又不想在html里面修改,特发此文记录解决方案。
解决方法
1、打开\themes\hexo-theme-matery\source\js\matery.js
2、可以看到articleInit变量定义的函数,把该函数替换成如下代码即可
/*文章内容详情的一些初始化特性*/
let articleInit = function () {
$('#articleContent a').attr('target', '_blank');
$('#articleContent img').each(function () {
//下面是判断是否为ad
if($(this).parent()[0].tagName == 'A' ) {
return 'break';//跳过a标签
}
//下面是正常的图片预览逻辑
let imgPath = $(this).attr('src');
$(this).wrap('<div class="img-item" data-src="' + imgPath + '" data-sub-html=".caption"></div>');
// 图片添加阴影
$(this).addClass("img-shadow img-margin");
// 图片添加字幕
let alt = $(this).attr('alt');
let title = $(this).attr('title');
let captionText = "";
// 如果alt为空,title来替
if (alt === undefined || alt === "") {
if (title !== undefined && title !== "") {
captionText = title;
}
} else {
captionText = alt;
}
// 字幕不空,添加之
if (captionText !== "") {
let captionDiv = document.createElement('div');
captionDiv.className = 'caption';
let captionEle = document.createElement('b');
captionEle.className = 'center-caption';
captionEle.innerText = captionText;
captionDiv.appendChild(captionEle);
this.insertAdjacentElement('afterend', captionDiv)
}
});
$('#articleContent, #myGallery').lightGallery({
selector: '.img-item',
// 启用字幕
subHtmlSelectorRelative: true
});
// progress bar init
const progressElement = window.document.querySelector('.progress-bar');
if (progressElement) {
new ScrollProgress((x, y) => {
progressElement.style.width = y * 100 + '%';
});
}
};