zhangdocs 1.1.20 → 1.1.25

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.20",
+    "version": "1.1.25",
     "description": "Simple document generation tool. Dependence Node.js run.",
     "repository": {
         "type": "git",

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>
 
@@ -18,14 +59,16 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); max-width: 400px; width: 90%;">
       <h2 style="margin: 0 0 20px 0; text-align: center; color: #333;">访问验证</h2>
       <p style="margin: 0 0 15px 0; color: #666; text-align: center;">请输入访问令牌</p>
-      <input type="password" id="token-input" placeholder="请输入token"
-        style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;">
-      <div style="text-align: center;">
-        <button id="token-submit"
-          style="background: #007bff; color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; cursor: pointer; margin-right: 10px;">验证</button>
-        <button id="token-cancel"
-          style="background: #6c757d; color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; cursor: pointer;">取消</button>
-      </div>
+      <form id="token-form" onsubmit="return false;">
+        <input type="password" id="token-input" placeholder="请输入token"
+          style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; margin-bottom: 15px; box-sizing: border-box;">
+        <div style="text-align: center;">
+          <button type="submit" id="token-submit"
+            style="background: #007bff; color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; cursor: pointer; margin-right: 10px;">验证</button>
+          <button type="button" id="token-cancel"
+            style="background: #6c757d; color: white; border: none; padding: 12px 30px; border-radius: 5px; font-size: 16px; cursor: pointer;">取消</button>
+        </div>
+      </form>
       <div id="error-message" style="color: red; text-align: center; margin-top: 10px; display: none;">Token不正确，请重新输入
       </div>
     </div>
@@ -151,7 +194,10 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       tokenModal.style.display = 'flex';
 
       // 验证token
-      function verifyToken() {
+      function verifyToken(e) {
+        if (e) {
+          e.preventDefault(); // 防止表单提交刷新页面
+        }
         const inputToken = tokenInput.value.trim();
         if (inputToken === expectedToken) {
           localStorage.setItem('token', inputToken);
@@ -162,6 +208,7 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
           tokenInput.value = '';
           tokenInput.focus();
         }
+        return false; // 防止表单提交
       }
 
       // 显示内容
@@ -181,6 +228,10 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       }
 
       // 事件监听
+      const tokenForm = document.getElementById('token-form');
+      if (tokenForm) {
+        tokenForm.addEventListener('submit', verifyToken);
+      }
       tokenSubmit.addEventListener('click', verifyToken);
       tokenCancel.addEventListener('click', function () {
         hideContent();
@@ -189,7 +240,8 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
 
       tokenInput.addEventListener('keypress', function (e) {
         if (e.key === 'Enter') {
-          verifyToken();
+          e.preventDefault();
+          verifyToken(e);
         }
       });
 
@@ -374,5 +426,28 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
       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/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%