🐛 Fixed the image viewer init & add demo.

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 () {

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)
+