解决hexo博客中使用fancybox后图片下的标题问题

前言

利用hexo搭建博客后我们需要插入图片,插入图片后我们想让图片点击后放大.
于是使用了fancybox,之后发现fancybox会在图片下放一个图片标题.但本人没有给图片alt属性语义化的习惯,
比如上图下的image-xx比较影响观感,一般的图片又不需要这个.所以需要修改fancybox的代码.
这里前提是您已经正常使用fancybox并且遇到了与我类似的问题.

一般的方法

一般就是修改alt属性,但是我懒得每次上传图片到图床后再去修改.而且之前写的文章中的图片也没有修改,所以这个办法不是很好.

解决办法

打开博客下的\themes\next\source\js文件夹,有一个util.js文件,当开启fancybox后这里的函数wrapImageWithFancyBox会添加一些样式.

注意图中的if语句

 if (imageTitle) {
        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
        // Make sure img title tag will show correctly in fancybox
        $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
      }

可以看到这里会添加一个标题image-caption
所以我们需要修改imageTitle

 var imageTitle = $image.attr('title'); //|| $image.attr('alt'); 使得一般没有title属性的图片下不显示名称

原本会尝试获取图片的title或者alt属性,我这里取消了alt属性获取,也就是说如果图片如果没有title属性就不会在后面显示一个标题.这样的话如果要加标题直接加个title属性即可.

这样就没有了,如果要添加可以添加图片的title属性