59 lines
2.3 KiB
JavaScript
59 lines
2.3 KiB
JavaScript
function loadResource(type, attributes, callback) {
|
|
var element;
|
|
if (type === 'script') {
|
|
element = document.createElement('script');
|
|
element.src = attributes.src;
|
|
element.onload = callback;
|
|
} else if (type === 'link') {
|
|
element = document.createElement('link');
|
|
element.rel = attributes.rel;
|
|
element.href = attributes.href;
|
|
} else if (type === 'style') {
|
|
element = document.createElement('style');
|
|
element.rel = 'stylesheet';
|
|
element.appendChild(document.createTextNode(attributes.css));
|
|
}
|
|
document.head.appendChild(element);
|
|
}
|
|
|
|
function createTOC() {
|
|
var tocElement = document.createElement('div');
|
|
tocElement.className = 'toc';
|
|
var contentContainer = document.getElementById('content');
|
|
if (contentContainer.firstChild) {
|
|
contentContainer.insertBefore(tocElement, contentContainer.firstChild);
|
|
} else {
|
|
contentContainer.appendChild(tocElement);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
createTOC();
|
|
var css = '.toc {position: fixed;top: 100px;left: 50%;transform: translateX(50%) translateX(300px);width: 300px;padding: 30px;}@media (max-width: 1300px) {.toc{position:static;top:auto;left:auto;transform:none;padding:10px;margin-bottom:20px;background-color:#eee;}}';
|
|
loadResource('style', {css: css});
|
|
|
|
loadResource('script', { src: 'https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.min.js' }, function() {
|
|
tocbot.init({
|
|
tocSelector: '.toc',
|
|
contentSelector: '.markdown-body',
|
|
headingSelector: 'h1, h2, h3, h4, h5, h6',
|
|
scrollSmooth: true,
|
|
scrollSmoothOffset: -10,
|
|
headingsOffset: 10,
|
|
});
|
|
});
|
|
|
|
loadResource('link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.css' });
|
|
|
|
const headings = document.querySelectorAll('.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6');
|
|
headings.forEach((heading) => {
|
|
if (!heading.id) {
|
|
heading.id = heading.textContent.trim().replace(/\s+/g, '-');
|
|
}
|
|
});
|
|
|
|
var footerPlaceholder = document.createElement('div');
|
|
footerPlaceholder.style.height = window.innerHeight + 'px';
|
|
document.body.appendChild(footerPlaceholder);
|
|
});
|