zhangdocs 1.1.20 → 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.20",
+    "version": "1.1.24",
     "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>
 
@@ -374,5 +415,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%