From 50255069b71e16a1dba65ca330e0f2c712b4b411 Mon Sep 17 00:00:00 2001 From: xunbu Date: Wed, 7 Jan 2026 00:17:51 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=AE=E5=BD=95=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docutranslate/template/markdown.html | 52 ++++++++++++++++------------ 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/docutranslate/template/markdown.html b/docutranslate/template/markdown.html index edf39e3..e2e6a27 100644 --- a/docutranslate/template/markdown.html +++ b/docutranslate/template/markdown.html @@ -29,21 +29,22 @@ /* 目录按钮 */ #toc-btn { position: fixed; - left: 10px; + left: 0; top: 10px; - width: 32px; - height: 32px; + width: 20px; + height: 24px; background: #fff; border: 1px solid #ddd; - border-radius: 4px; + border-left: none; + border-radius: 0 4px 4px 0; cursor: pointer; z-index: 10000; display: flex; align-items: center; justify-content: center; - font-size: 14px; + font-size: 12px; color: #666; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); + box-shadow: 1px 1px 3px rgba(0,0,0,0.1); } #toc-btn:hover { background: #f5f5f5; } @@ -52,12 +53,12 @@ position: fixed; left: 0; top: 0; - width: 240px; + width: 220px; height: 100vh; background: #fff; border-right: 1px solid #ddd; z-index: 9999; - padding: 50px 15px 20px; + padding: 40px 12px 20px; box-sizing: border-box; overflow-y: auto; transform: translateX(-100%); @@ -140,20 +141,30 @@ li.className = 'toc-item'; li.dataset.level = item.level; - let html = ` - ${item.text}`; + const div = document.createElement('div'); + div.className = 'toc-link'; + div.innerHTML = `${item.text}`; + if (item.children.length) { - html += `+`; + const expander = document.createElement('span'); + expander.className = 'toc-expander'; + expander.textContent = '+'; + expander.onclick = function(e) { e.stopPropagation(); toggle(this); }; + div.appendChild(expander); } - html += ``; - li.innerHTML = html; + + div.onclick = function() { scrollTo(item.id); }; + li.appendChild(div); if (item.children.length) { const ul = document.createElement('ul'); ul.className = 'toc-children'; render(item.children, ul); li.appendChild(ul); - if (item.level === 1) { ul.classList.add('expanded'); li.querySelector('.toc-expander').textContent = '-'; } + if (item.level === 1) { + ul.classList.add('expanded'); + expander.textContent = '-'; + } } parent.appendChild(li); }); @@ -165,15 +176,12 @@ btn.textContent = ul.classList.contains('expanded') ? '-' : '+'; } - window.toggleToc = function() { panel.classList.toggle('show'); }; + function scrollTo(id) { + const el = document.getElementById(id); + if (el) el.scrollIntoView({ behavior: 'smooth' }); + } - document.querySelectorAll('.toc-link').forEach(link => { - link.addEventListener('click', function(e) { - e.preventDefault(); - const id = this.getAttribute('href').slice(1); - document.getElementById(id).scrollIntoView({ behavior: 'smooth' }); - }); - }); + window.toggleToc = function() { panel.classList.toggle('show'); }; init(); })();