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 {
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 = `<a class="toc-link" href="#${item.id}">
<span class="toc-text">${item.text}</span>`;
const div = document.createElement('div');
div.className = 'toc-link';
div.innerHTML = `<span class="toc-text">${item.text}</span>`;
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) {
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();
})();