全画面で表示するには、Hexo記事の画像をクリックしてください

特定の効果を確認してください：https : //wugenqiang.gitee.io/articles/hexo-do-picture-screen.html

前に書く

方法1は、画像を拡大した後は美しくありません。方法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)

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

しかし、まだ小さなバグがあり、拡大すると全体像が少し魅力的ではなくなり
ます。解決方法を知っている場合は、メッセージを残してください。ありがとう

方法2

このメソッドは、画像の閲覧ズームにfancyboxプラグインを使用します

libディレクトリに切り替えます。

cd next/source/lib

プラグインをダウンロード

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

テーマプロフィールを変更

次の/ _config.ymlファイルを変更する

fancybox: true

テスト効果

図に示すように、hexo sをデプロイした後、画像をクリックします。

完璧、私はこの効果に非常に満足しています。あなたはそれがまだ素晴らしい神だと思いますか~~一生懸命勉強してください！