From f8ac686c1c88f3120d618d8320b9971892b021b7 Mon Sep 17 00:00:00 2001
From: elkan1788 <elkan1788@139.com>
Date: Sun, 21 Jul 2024 14:06:03 +0800
Subject: [PATCH] :bug: Fixed the image viewer init & add demo.

---
 assets/js/utils.js                       |  5 ++-
 exampleSite/content/post/image-viewer.md | 40 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 exampleSite/content/post/image-viewer.md

diff --git a/assets/js/utils.js b/assets/js/utils.js
index 9539453..8bc1494 100644
--- a/assets/js/utils.js
+++ b/assets/js/utils.js
@@ -58,7 +58,10 @@ NexT.utils = {
   },
 
   registerImageViewer: function() {
-    new Viewer(document.querySelector('.post-body'),{ navbar:2, toolbar:2 });
+    const post_body = document.querySelector('.post-body');
+    if (post_body) {
+      new Viewer(post_body,{ navbar:2, toolbar:2 });
+    }
   },
 
   registerToolButtons: function () {
diff --git a/exampleSite/content/post/image-viewer.md b/exampleSite/content/post/image-viewer.md
new file mode 100644
index 0000000..19c8af2
--- /dev/null
+++ b/exampleSite/content/post/image-viewer.md
@@ -0,0 +1,40 @@
+---
+title: "图像浏览工具 "
+description: "默认会对文章内的图片， 进行图片浏览，点击图片可以查看大图，点击空白处可以关闭。"
+keywords: "image,图像,浏览器,相册"
+
+date: 2024-07-21T10:28:12+08:00
+lastmod: 2024-07-21T10:28:12+08:00
+
+categories:
+  - 示例文章
+
+tags:
+  - 图像
+  - 相册
+  - 浏览
+
+url: "demo/image-viewer.html"
+toc: false
+---
+
+本主题自带图像浏览器功能，支持对文章区域内出现的图片进行浏览，点击图片可以查看大图，点击空白处可以关闭。不需要配置任何参数，只要在文章里面相应的位置添加图片信息即可 。
+
+<!--more-->
+
+图像浏览器引用了 [fengyuanchen](https://fengyuanchen.github.io/) 开发的 [viewerjs](https://fengyuanchen.github.io/viewerjs/)，支持显示图像名称，尺寸，旋转，缩放，播放等功能。可点击如下的示例图像查看体验：
+
+## 动物
+
+![cute-scottish-fold-cat](/post/image-viewer/preview_cute-scottish-fold-cat.jpg)
+![scottish-fold-kitten](/post/image-viewer/preview_scottish-fold-kitten.jpg)
+![hourses](/post/image-viewer/preview_horses.jpg)
+![owl-family-background](/post/image-viewer/preview_owl-family-background.jpg)
+
+## 风景
+
+![luxury-resort-in-maldives](/post/image-viewer/preview_luxury-resort-in-maldives.jpg)
+![sea-shell](/post/image-viewer/preview_sea-shell.jpg)
+![the-arch-sunset](/post/image-viewer/preview_the-arch-sunset.jpg)
+![norway-autumn-landscape](/post/image-viewer/preview_norway-autumn-landscape.jpg)
+