<style type=“text/css” media=“screen”> .post-menu ul {
list-style: none; padding: 0; margin: 0;
} </style>
<div class=“post-menu”>
<div class="post-menu-title">TOC</div> <div class="post-menu-content"></div>
</div>
<script>
function generateContent() { var menu = document.querySelector(".post-menu"); var menuContent = menu.querySelector(".post-menu-content"); var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6"); // Hide menu when no headings if (headings.length === 0) { return menu.style.display = "none"; } // Generate post menu var menuHTML = ''; for (var i = 0; i < headings.length; i++) { var h = headings[i]; menuHTML += ( '<li class="h-' + h.tagName.toLowerCase() + '">' + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>'); } menuContent.innerHTML = '<ul>' + menuHTML + '</ul>'; // The header element var header = document.querySelector('header.site-header'); function doMenuCollapse(index, over_items) { var items = menuContent.firstChild.children; if (over_items == undefined) { over_items = 20; } if (items.length < over_items) { return; } var activeItem = items[index]; var beginItem = activeItem var endItem = activeItem var beginIndex = index; var endIndex = index + 1; while (beginIndex >= 0 && !items[beginIndex].classList.contains('h-h2')) { beginIndex -= 1; } while (endIndex < items.length && !items[endIndex].classList.contains('h-h2')) { endIndex += 1; } for (var i = 0; i < beginIndex; i++) { item = items[i] if (!item.classList.contains('h-h2')) { item.style.display = 'none'; } } for (var i = beginIndex + 1; i < endIndex; i++) { item = items[i] // if (!item.classList.contains('h-h2')) { item.style.display = ''; // } } for (var i = endIndex; i < items.length; i++) { item = items[i] if (!item.classList.contains('h-h2')) { item.style.display = 'none'; } } } // Init menu collapsed doMenuCollapse(-1); // Active the menu item window.addEventListener('scroll', function (event) { var lastActive = menuContent.querySelector('.active'); var changed = true; var activeIndex = -1; for (var i = headings.length - 1; i >= 0; i--) { var h = headings[i]; var headingRect = h.getBoundingClientRect(); var headerRect = header.getBoundingClientRect(); var headerTop = Math.floor(headerRect.top); var headerHeight = Math.floor(headerRect.height); var headerHeight = headerTop + headerHeight + 20; if (headingRect.top <= headerHeight) { var id = 'h-' + h.getAttribute('id'); var a = menuContent.querySelector('a[href="#' + id + '"]'); var curActive = a.parentNode; if (curActive) { curActive.classList.add('active'); activeIndex = i; } if (lastActive == curActive) { changed = false; } break; } } if (changed) { if (lastActive) { lastActive.classList.remove('active'); } doMenuCollapse(activeIndex); } event.preventDefault(); }); } generateContent();
</script>