1 写在前面

方法一存在图片放大后不美观，建议直接跳到方法二
如果想尝试解决第一种方法出现的Bug，可以尝试一下，然后我们讨论一下，方便的话可以加我QQ：2422676183

2 方法一

2.1 修改post-details.js文件

文件目录：/themes/next/source/js/src/post-details.js
在文件最后添加：

//----自定义js----------------
function createImgEventFullScreen() {
  var imgs = $(".post-body").find("img");
  console.log(imgs);
  for(var i = 0;i < imgs.length;i++) {
    // $(imgs[i]).click(createCover(imgs[i]));
    imgs[i].onclick= function(e) {
      var src = e.srcElement.currentSrc;
      createCover(src)
    }
  }
  function createCover (src) {
    console.log(src);
    var cover = $("<div id='fullScreenCover' class='zhao-cover-img-container'><img class='zhao-cover-img' src='"+src+"'/></div>");
    $("#fullScreenCover").remove();
    $("body").append(cover);
    $("body").addClass("zhao-no-scroll");
    $("#fullScreenCover").click(function(){
      $("#fullScreenCover").remove();
      $("body").removeClass("zhao-no-scroll");
    })
  }
}
setTimeout(function(){
  createImgEventFullScreen();
},1000)

2.2 修改custom.styl文件

文件目录：/themes/next/source/css/_custom/custom.styl
在文件最后添加：

.zhao-cover-img-container{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: 10002;
 text-align: center;
 background-color: #000;
 overflow-y: scroll;
}
.zhao-cover-img{
 width: 100%;
 position: absolute;
 top: 0;
 bottom: 0;
}
.zhao-no-scroll{
 width: 100%;
 height: 100vh;
 overflow: hidden;
}