Solve the title problem under the picture after using fancybox in the hexo blog

foreword

After using hexo to build a blog, we need to insert a picture. After inserting the picture, we want the picture to be enlarged after clicking. So we
used fancybox, and later found that fancybox will put a picture title under the picture . But I don’t have the habit of semanticizing the alt attribute of the picture,
such as The image-xx in the picture above affects the look and feel, and the general picture does not need this. So you need to modify the code of fancybox. The
premise here is that you have used fancybox normally and encountered similar problems to me.

general method

Generally, it is to modify the alt attribute, but I am too lazy to modify it every time I upload the picture to the picture bed. And the pictures in the previous article have not been modified, so this method is not very good.

Solution

Open the \themes\next\source\js folder under the blog, and there is a util.js file. When fancybox is turned on, the function wrapImageWithFancyBox here will add some styles. Note the if statement in the

figure

 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);
      }

You can see that a title image-caption will be added here,
so we need to modify imageTitle

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

Originally, I would try to get the title or alt attribute of the picture. I canceled the acquisition of the alt attribute here, which means that if the picture does not have a title attribute, a title will not be displayed later. In this case, if you want to add a title, just add a title attribute .This

is gone, if you want to add the title attribute that you can add pictures