Hexo next博客的pjax一个Bug引发的关于pjax用法的小技巧-----pjax后图片点击放大的js失效

文章目录

• 广告：
• 背景
• 发现
• 解决
• get技能

广告：

本人博客地址：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

一个将csdn文章转为hexo支持的文章格式的小东西：https://github.com/dataiyangu/csdn2hexo

背景

前面关于pjax的博客说过，用了pjax后，原来的一些js会失效，需要重新对需要的js重写。

之前next本身是支持点击图片，增加一层模板，图片放大的，用了pjax之后，发现失效了。

发现

加入pjax之前，点击图片地址连接是不变的，加入之后放大失效，地址连接变了，说明把图片当做a处理了

解决

$(document).pjax('a[target!=_blank][rel!=group]', '#pjax-container', {
  fragment: '#pjax-container',
  timeout: 15000,
});

加入了排除[rel!=group]

经过阅读源码发现，next的图片放大js片段是如下代码，直接复制到pjax的类中即可

function wrapImageWithFancyBox() {
  $('.content img')
    .not('[hidden]')
    .not('.group-picture img, .post-gallery img')
    .each(function () {
      var $image = $(this);
      var imageTitle = $image.attr('title');
      var $imageWrapLink = $image.parent('a');

      if ($imageWrapLink.size() < 1) {
        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
        $imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
      }

      $imageWrapLink.addClass('fancybox fancybox.image');
      $imageWrapLink.attr('rel', 'group');

      if (imageTitle) {
        $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');

        //make sure img title tag will show correctly in fancybox
        $imageWrapLink.attr('title', imageTitle);
      }
    });

  $('.fancybox').fancybox({
    helpers: {
      overlay: {
        locked: false
      }
    }
  });
}

get技能

不可能所有的a标签都用pjax通过

$(document).pjax('a[target!=_blank][rel!=group]',

进行排除。