From 2d0f249ee7383e6eb98bb3517af3ee27da4e48ae Mon Sep 17 00:00:00 2001
From: xunbu <xunbu3@qq.com>
Date: Tue, 6 Jan 2026 20:22:26 +0800
Subject: [PATCH] =?UTF-8?q?html=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docutranslate/template/markdown.html | 179 ++++++++++++++++++++++++++-
 1 file changed, 176 insertions(+), 3 deletions(-)

diff --git a/docutranslate/template/markdown.html b/docutranslate/template/markdown.html
index de777b8..84a1cb3 100644
--- a/docutranslate/template/markdown.html
+++ b/docutranslate/template/markdown.html
@@ -10,20 +10,193 @@
     <script src="/static/katex/copy-tex.min.js"></script>
     {{autoRender}}
     <style>
+        @page {
+            margin: 1.5cm 1cm 1.5cm 2cm;
+            @top-left {
+                content: "{{title}}";
+                font-size: 10pt;
+                color: #666;
+            }
+            @top-right {
+                content: counter(page);
+                font-size: 10pt;
+                color: #666;
+            }
+            @bottom-left {
+                content: "Powered by DocuTranslate";
+                font-size: 8pt;
+                color: #999;
+            }
+            @bottom-right {
+                content: counter(page) " / " counter(pages);
+                font-size: 10pt;
+                color: #666;
+            }
+        }
+
+        @media print {
+            #toc-toggle, #toc-sidebar {
+                display: none !important;
+            }
+            html {
+                padding: 0 !important;
+            }
+            main {
+                padding: 0 !important;
+            }
+        }
+
         html {
-            padding: 2vh 10vw;
-            padding: 2vh 10vw;
             font-size: 15px;
         }
+
+        main {
+            padding: 2vh 10vw;
+        }
+
+        #toc-toggle {
+            position: fixed;
+            left: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 30px;
+            height: 60px;
+            background: #f0f0f0;
+            border: 1px solid #ddd;
+            border-radius: 0 5px 5px 0;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            color: #666;
+            z-index: 1000;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        #toc-toggle:hover {
+            background: #e0e0e0;
+        }
+
+        body:hover #toc-toggle {
+            opacity: 1;
+        }
+
+        #toc-sidebar {
+            position: fixed;
+            left: -280px;
+            top: 0;
+            width: 280px;
+            height: 100vh;
+            background: #fafafa;
+            border-right: 1px solid #ddd;
+            overflow-y: auto;
+            z-index: 999;
+            transition: left 0.3s ease;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+
+        #toc-sidebar.open {
+            left: 0;
+        }
+
+        #toc-sidebar h3 {
+            margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 16px;
+            color: #333;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 10px;
+        }
+
+        #toc-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+
+        #toc-list li {
+            margin: 5px 0;
+            font-size: 13px;
+        }
+
+        #toc-list li a {
+            color: #555;
+            text-decoration: none;
+            display: block;
+            padding: 3px 0;
+        }
+
+        #toc-list li a:hover {
+            color: #007bff;
+        }
+
+        #toc-list .toc-h1 { margin-left: 0; font-weight: 600; }
+        #toc-list .toc-h2 { margin-left: 15px; }
+        #toc-list .toc-h3 { margin-left: 30px; font-size: 12px; }
+        #toc-list .toc-h4 { margin-left: 45px; font-size: 12px; }
+        #toc-list .toc-h5 { margin-left: 60px; font-size: 11px; color: #888; }
+        #toc-list .toc-h6 { margin-left: 75px; font-size: 11px; color: #888; }
     </style>
 </head>
 <body>
 
+<!-- Toggle Button -->
+<div id="toc-toggle" title="目录">☰</div>
+
+<!-- Sidebar TOC -->
+<div id="toc-sidebar">
+    <h3>目录</h3>
+    <ul id="toc-list"></ul>
+</div>
+
+<!-- Main Content -->
+<main>
 {{markdown}}
+</main>
+
 </body>
 {{renderMathInElement}}
 {{mermaid}}
 <script>
+    // Generate TOC from headings
+    function generateTOC() {
+        const main = document.querySelector('main');
+        const headings = main.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        const tocList = document.getElementById('toc-list');
+
+        if (headings.length === 0) {
+            document.getElementById('toc-toggle').style.display = 'none';
+            return;
+        }
+
+        headings.forEach((heading, index) => {
+            if (!heading.id) {
+                heading.id = 'heading-' + index;
+            }
+
+            const level = heading.tagName.toLowerCase();
+            const text = heading.textContent;
+            const li = document.createElement('li');
+            li.className = 'toc-' + level;
+            li.innerHTML = `<a href="#${heading.id}">${text}</a>`;
+            tocList.appendChild(li);
+        });
+    }
+
+    // Toggle sidebar
+    function toggleTOC() {
+        const sidebar = document.getElementById('toc-sidebar');
+        sidebar.classList.toggle('open');
+    }
+
+    document.getElementById('toc-toggle').addEventListener('click', toggleTOC);
+
+    // Generate TOC after content loads
+    generateTOC();
+
     setTimeout(() => {
         const KatexErrors = document.getElementsByClassName("katex-error")
         for (const katexError of KatexErrors) {
@@ -38,4 +211,4 @@
     });
 </script>
 
-</html>
\ No newline at end of file
+</html>