Leon/docutranslate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化目录效果

Browse Source
This commit is contained in:
xunbu
2026-01-07 00:17:51 +08:00
parent cd500c50c5
commit 50255069b7
1 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docutranslate/template/markdown.html
View File

@@ -29,21 +29,22 @@
/* 目录按钮 */ /* 目录按钮 */
#toc-btn { #toc-btn {
position: fixed; position: fixed;
left: 10px; left: 0;
top: 10px; top: 10px;
width: 32px; width: 20px;
height: 32px; height: 24px;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-left: none;
border-radius: 0 4px 4px 0;
cursor: pointer; cursor: pointer;
z-index: 10000; z-index: 10000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 12px;
color: #666; 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; } #toc-btn:hover { background: #f5f5f5; }
@@ -52,12 +53,12 @@
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 240px; width: 220px;
height: 100vh; height: 100vh;
background: #fff; background: #fff;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
z-index: 9999; z-index: 9999;
padding: 50px 15px 20px; padding: 40px 12px 20px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
transform: translateX(-100%); transform: translateX(-100%);
@@ -140,20 +141,30 @@
li.className = 'toc-item'; li.className = 'toc-item';
li.dataset.level = item.level; li.dataset.level = item.level;
let html = `<a class="toc-link" href="#${item.id}"> const div = document.createElement('div');
<span class="toc-text">${item.text}</span>`; div.className = 'toc-link';
div.innerHTML = `<span class="toc-text">${item.text}</span>`;
if (item.children.length) { if (item.children.length) {
html += `<span class="toc-expander" onclick="event.stopPropagation(); toggle(this)">+</span>`; const expander = document.createElement('span');
expander.className = 'toc-expander';
expander.textContent = '+';
expander.onclick = function(e) { e.stopPropagation(); toggle(this); };
div.appendChild(expander);
} }
html += `</a>`;
li.innerHTML = html; div.onclick = function() { scrollTo(item.id); };
li.appendChild(div);
if (item.children.length) { if (item.children.length) {
const ul = document.createElement('ul'); const ul = document.createElement('ul');
ul.className = 'toc-children'; ul.className = 'toc-children';
render(item.children, ul); render(item.children, ul);
li.appendChild(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); parent.appendChild(li);
}); });
@@ -165,15 +176,12 @@
btn.textContent = ul.classList.contains('expanded') ? '-' : '+'; 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 => { window.toggleToc = function() { panel.classList.toggle('show'); };
link.addEventListener('click', function(e) {
e.preventDefault();
const id = this.getAttribute('href').slice(1);
document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
});
});
init(); init();
})(); })();