Next 主题部分图片禁用 FancyBox

发表于 分类于

之前用的主题有 fancybox 功能的都有部分图片禁用 fancybox 的功能，看了一遍文档却发现没有这个选项，去 issue 中和 discusstion 中也没找到相关的信息。于是 google 了一下，发现真有相关教程，不过是 18 年的了，现在 next 主题已经变了很多，fancybox 的 js 代码也没在 utils.js 文件中了。找了一下，发现 fancybox 的相关 js 代码已经单独写在了主题文件夹下的 \source\js\third-party\fancybox.js 中了。

接着又在网上找到了一篇博客，发现插入的代码较也改进了一下，修改了当鼠标悬浮在已经被禁用 fancybox 效果的图片上时的状态，原文链接：https://kevin1061517.github.io/blog/posts/Hexo/2721/

结合两篇博文，最终即为在 \source\js\third-party\fancybox.js 文件中的 const $image = $(element); 这一行与 const imageLink = $image.attr('data-src') || $image.attr('src'); 之间添加以下代码

1
2
3
4
5
6
     const $image = $(element);
+    if ($(element).hasClass('nofancybox')){  //是否有包含自己定义的nofancybox属性，有就return true
+        $(element).css("cursor","default");    //将碰到图片的鼠标从放大镜变成default模式
+        return;	//不进行下面的fancybox的配置
+      }
     const imageLink = $image.attr('data-src') || $image.attr('src');

以下为方便复制的代码

1
2
3
4
if ($(element).hasClass('nofancybox')){  //是否有包含自己定义的nofancybox属性，有就return true
    $(element).css("cursor","default");    //将碰到图片的鼠标从放大镜变成default模式
    return;	//不进行下面的fancybox的配置
  }

之后只要给不想有 fancybox 效果的 <img> 元素增加 class="nofancybox" 即可。

后续更新来了，上面的代码是 jQuery 版的 Fancybox 的，现主题最新版本已完全去除 jQuery 的依赖且更新到了 Fancybox 5，上面的代码自然也就失效了。虽然不会 js，还是试着在 Google 和 Chatgpt 的帮助下改了一下代码。可以适配最新版本了。

1
2
3
4
5
6
document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => {
+    if (image.classList.contains('nofancybox')){  //是否有包含自己定义的nofancybox属性，有就return true
+      image.style.cursor = 'default';    //将碰到图片的鼠标从放大镜变成default模式
+      return;	//不进行下面的fancybox的配置
+    }
    const imageLink = image.dataset.src || image.src;

方便复制的版本

1
2
3
4
if (image.classList.contains('nofancybox')){  //是否有包含自己定义的nofancybox属性，有就return true
  image.style.cursor = 'default';    //将碰到图片的鼠标从放大镜变成default模式
  return;	//不进行下面的fancybox的配置
}

同样的，只要给不想有 fancybox 效果的 <img> 元素增加 class="nofancybox" 即可。