Haga clic en la imagen en el artículo de Hexo para verlo en pantalla completa

Compruebe el efecto específico: https://wugenqiang.gitee.io/articles/hexo-do-picture-screen.html

Escribir en frente

El método uno no es hermoso después de que la imagen se agranda, se recomienda pasar directamente al método 2.
Si desea intentar resolver el error en el primer método, puede intentarlo, y luego lo discutimos, si es conveniente, puede agregarme QQ: 2422676183

Método uno

Modificar el archivo post-details.js

Directorio de archivos: /themes/next/source/js/src/post-details.js agregado
al final del archivo:

//----自定义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)

Modificar el archivo custom.styl

Directorio de archivos: /themes/next/source/css/_custom/custom.styl
Agregue al final del archivo:

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

Pero todavía habrá un pequeño error, el panorama general es poco atractivo
cuando se amplía, si sabes cómo solucionarlo, puedes dejarme un mensaje, gracias

Método dos

Este método utiliza el complemento fancybox para el zoom de exploración de imágenes

Cambie al directorio lib

cd next/source/lib

Descargar plugin

git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

Cambiar perfil del tema

Cambiar el siguiente archivo / _config.yml

fancybox: true

Prueba de efecto

Haga clic en la imagen después de desplegar hexágonos, como se muestra en la figura:

Perfecto, estoy muy satisfecho con este efecto. ¿Crees que sigue siendo un gran dios ~~ Estudia mucho!