zhangdocs 1.1.19 → 1.1.24

package/lib/build.js

@@ -32,7 +32,10 @@ var renderer = new marked.Renderer();
 renderer.code = function (code, lang) {
     if (lang === 'mermaid') {
         // 为Mermaid图表生成特殊的div容器
-        return '<div class="mermaid">' + code + '</div>';
+        // 转义 HTML 特殊字符，避免被解析为 HTML 标签
+        // 将 < 转为 &lt;，> 转为 &gt;
+        var escapedCode = code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return '<div class="mermaid">' + escapedCode + '</div>';
     } else {
         // 对于其他语言，使用默认的高亮处理
         if (lang && highlight.getLanguage(lang)) {
@@ -186,6 +189,56 @@ function build(commander, changeFile) {
         // 图片引用路径处理
         markedstr = imgPath(markedstr, _path);
 
+        // 计算上一节和下一节的URL
+        var prevUrl = null;
+        var nextUrl = null;
+        var prevTitle = null;
+        var nextTitle = null;
+        
+        if (idx > 0) {
+            // 上一节
+            var prevItem = pathArr[idx - 1];
+            var prevItemRel = path.normalize(prevItem);
+            prevItemRel = prevItemRel.replace(path.normalize(process.cwd() + '/md/'), '');
+            var prevPath = path.normalize(process.cwd() + '/html/' + prevItemRel).replace('.md', ".html");
+            // 计算从当前页面到上一节的相对路径
+            var relative = path.relative(path.dirname(_path), prevPath).replace(/\\/g, '/');
+            // 如果相对路径为空或为当前目录，使用文件名
+            if (!relative || relative === '.') {
+                prevUrl = path.basename(prevPath);
+            } else {
+                // 确保路径以 ./ 开头（如果不在同一目录）
+                if (!relative.startsWith('.')) {
+                    prevUrl = './' + relative;
+                } else {
+                    prevUrl = relative;
+                }
+            }
+            prevTitle = path.basename(prevItem, '.md');
+        }
+        
+        if (idx < pathArr.length - 1) {
+            // 下一节
+            var nextItem = pathArr[idx + 1];
+            var nextItemRel = path.normalize(nextItem);
+            nextItemRel = nextItemRel.replace(path.normalize(process.cwd() + '/md/'), '');
+            var nextPath = path.normalize(process.cwd() + '/html/' + nextItemRel).replace('.md', ".html");
+            // 计算从当前页面到下一节的相对路径
+            var relative = path.relative(path.dirname(_path), nextPath).replace(/\\/g, '/');
+            // 如果相对路径为空或为当前目录，使用文件名
+            if (!relative || relative === '.') {
+                nextUrl = path.basename(nextPath);
+            } else {
+                // 确保路径以 ./ 开头（如果不在同一目录）
+                if (!relative.startsWith('.')) {
+                    nextUrl = './' + relative;
+                } else {
+                    nextUrl = relative;
+                }
+            }
+            nextTitle = path.basename(nextItem, '.md');
+        }
+
         // ejs 模板生成HTML
         html = file.ejs(template + '/layout.ejs', {
             title: pkg.name,//项目工程名字
@@ -194,7 +247,11 @@ function build(commander, changeFile) {
             relative_path: file.relativePath(_path, process.cwd()),//相对路径
             menu_html: navHTML,//页面之间的超链接导航
             toc_html: tocHTML,// markdown 导航
-            markdown_html: markedstr // markdown 生成字符串
+            markdown_html: markedstr, // markdown 生成字符串
+            prev_url: prevUrl, // 上一节URL
+            next_url: nextUrl, // 下一节URL
+            prev_title: prevTitle, // 上一节标题
+            next_title: nextTitle // 下一节标题
         });
         file.mkdirsSync(path.dirname(_path));
         //写入指定目录中

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zhangdocs",
-    "version": "1.1.19",
+    "version": "1.1.24",
     "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

@@ -8,6 +8,47 @@
     <div class="content markdown-body <%= index ? 'index-page-content' : '' %>">
 
       <%- markdown_html %>
+      
+      <% if (!index) { %>
+      <!-- 上一节/下一节导航按钮 -->
+      <div class="page-navigation">
+        <% if (typeof prev_url !== 'undefined' && prev_url) { %>
+        <a href="<%= prev_url %>" class="nav-button nav-prev" id="nav-prev">
+          <span class="nav-arrow">←</span>
+          <span class="nav-text">
+            <span class="nav-label">上一节</span>
+            <span class="nav-title"><%= prev_title || '上一节' %></span>
+          </span>
+        </a>
+        <% } else { %>
+        <div class="nav-button nav-prev nav-disabled">
+          <span class="nav-arrow">←</span>
+          <span class="nav-text">
+            <span class="nav-label">上一节</span>
+            <span class="nav-title">没有上一节</span>
+          </span>
+        </div>
+        <% } %>
+        
+        <% if (typeof next_url !== 'undefined' && next_url) { %>
+        <a href="<%= next_url %>" class="nav-button nav-next" id="nav-next">
+          <span class="nav-text">
+            <span class="nav-label">下一节</span>
+            <span class="nav-title"><%= next_title || '下一节' %></span>
+          </span>
+          <span class="nav-arrow">→</span>
+        </a>
+        <% } else { %>
+        <div class="nav-button nav-next nav-disabled">
+          <span class="nav-text">
+            <span class="nav-label">下一节</span>
+            <span class="nav-title">没有下一节</span>
+          </span>
+          <span class="nav-arrow">→</span>
+        </div>
+        <% } %>
+      </div>
+      <% } %>
     </div>
   </div>
 
@@ -292,5 +333,110 @@ 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);
+    })();
+    
+    // 上一节/下一节导航功能
+    (function() {
+      var prevButton = document.getElementById('nav-prev');
+      var nextButton = document.getElementById('nav-next');
+      
+      // 键盘快捷键：Ctrl + 左箭头（上一节），Ctrl + 右箭头（下一节）
+      document.addEventListener('keydown', function(e) {
+        // 检查是否按下了Ctrl键
+        if (e.ctrlKey || e.metaKey) {
+          // Ctrl + 左箭头：上一节
+          if (e.key === 'ArrowLeft' && prevButton && prevButton.href) {
+            e.preventDefault();
+            window.location.href = prevButton.href;
+          }
+          // Ctrl + 右箭头：下一节
+          else if (e.key === 'ArrowRight' && nextButton && nextButton.href) {
+            e.preventDefault();
+            window.location.href = nextButton.href;
+          }
+        }
+      });
+    })();
   </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

package/theme/handbook/source/css/main.styl

@@ -440,4 +440,76 @@ table
                     background: $secondary-color
                     color: $primary-color
                     border-left-color: $primary-color
-                    transform: translateX(5px)
+                    transform: translateX(5px)
+
+// 上一节/下一节导航按钮
+.page-navigation
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin-top: 40px
+    padding-top: 30px
+    border-top: 1px solid $border-color
+    gap: 20px
+    
+    .nav-button
+        display: flex
+        align-items: center
+        padding: 12px 20px
+        background: #fff
+        border: 1px solid $border-color
+        border-radius: 6px
+        text-decoration: none
+        color: $text-color
+        transition: all 0.2s ease
+        flex: 1
+        max-width: 45%
+        
+        &:hover
+            background: $secondary-color
+            border-color: $primary-color
+            color: $primary-color
+            transform: translateY(-2px)
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
+        
+        &.nav-disabled
+            opacity: 0.5
+            cursor: not-allowed
+            pointer-events: none
+        
+        .nav-arrow
+            font-size: 20px
+            font-weight: bold
+            margin: 0 10px
+        
+        .nav-text
+            display: flex
+            flex-direction: column
+            flex: 1
+            
+            .nav-label
+                font-size: 12px
+                color: #999
+                margin-bottom: 4px
+                text-transform: uppercase
+                letter-spacing: 0.5px
+            
+            .nav-title
+                font-size: 14px
+                font-weight: 500
+                line-height: 1.4
+        
+        &.nav-prev
+            text-align: left
+        
+        &.nav-next
+            text-align: right
+            flex-direction: row-reverse
+    
+    @media mq-mobile
+        flex-direction: column
+        gap: 15px
+        
+        .nav-button
+            max-width: 100%
+            width: 100%