zhangdocs 1.1.19 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zhangdocs",
-    "version": "1.1.19",
+    "version": "1.1.20",
     "description": "Simple document generation tool. Dependence Node.js run.",
     "repository": {
         "type": "git",

package/theme/handbook/head.ejs

@@ -10,6 +10,9 @@
   </title>
   <link rel="stylesheet" href="<%=relative_path%>static/css/main.css">
   <link rel="stylesheet" href="https://static.docs-hub.com/bootstrapmin_1645176572503.css">
+  <!-- Viewer.js 图片预览库 -->
+  <link rel="stylesheet" href="https://static.docs-hub.com/viewermin_1764834568346.css">
+  <script src="https://static.docs-hub.com/viewermin_1764834557521.js"></script>
   <!-- MathJax 配置 -->
   <script>
     MathJax = {

package/theme/handbook/layout.ejs

@@ -292,5 +292,87 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
     // 延迟初始化（处理动态显示的情况）
     setTimeout(initMenuPopup, 500);
     setTimeout(initMenuPopup, 1000);
+    
+    // 图片预览功能初始化
+    (function() {
+      var imageViewer = null;
+      
+      function initImageViewer() {
+        // 查找markdown-body容器
+        var markdownBody = document.querySelector('.markdown-body');
+        if (!markdownBody) {
+          return;
+        }
+        
+        // 查找所有图片
+        var images = markdownBody.querySelectorAll('img');
+        if (images.length === 0) {
+          return;
+        }
+        
+        // 如果Viewer已经初始化，先销毁
+        if (imageViewer) {
+          try {
+            imageViewer.destroy();
+          } catch(e) {
+            // 忽略错误
+          }
+        }
+        
+        // 为图片添加样式和点击事件
+        images.forEach(function(img) {
+          // 跳过已经是链接内的图片
+          if (img.parentElement.tagName === 'A') {
+            return;
+          }
+          
+          // 添加样式
+          img.style.cursor = 'zoom-in';
+          img.classList.add('image-preview');
+        });
+        
+        // 初始化Viewer.js - 直接对markdown-body容器初始化
+        try {
+          imageViewer = new Viewer(markdownBody, {
+            inline: false,
+            viewed: function() {
+              // 查看图片时的回调
+            },
+            hidden: function() {
+              // 关闭查看器时的回调
+            },
+            toolbar: {
+              zoomIn: true,
+              zoomOut: true,
+              oneToOne: true,
+              reset: true,
+              prev: true,
+              play: false,
+              next: true,
+              rotateLeft: true,
+              rotateRight: true,
+              flipHorizontal: true,
+              flipVertical: true
+            }
+          });
+        } catch(e) {
+          console.error('图片预览初始化失败:', e);
+        }
+      }
+      
+      // 立即尝试初始化
+      initImageViewer();
+      
+      // DOM加载完成后初始化
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initImageViewer);
+      } else {
+        setTimeout(initImageViewer, 100);
+      }
+      
+      // 延迟初始化（处理动态显示的情况）
+      setTimeout(initImageViewer, 500);
+      setTimeout(initImageViewer, 1000);
+    })();
   </script>
   <% include footer.ejs %>

package/theme/handbook/source/css/_partial/markdown.styl

@@ -22,9 +22,14 @@
         max-width: 100%
         height: auto
         border-radius: 4px
+        transition: opacity 0.2s ease
         @media mq-mobile
             display: block
             margin: 12px auto
+        &.image-preview
+            cursor: zoom-in
+            &:hover
+                opacity: 0.9
     a
         color: #0969da
         text-decoration: none