2023/5/23 14:32:33
// ==UserScript==
// @name ArticleTOCNavigator
// @namespace This JavaScript plugin generates a dynamic table of contents for dev website. It uses HTML header tags to create links to respective sections, highlights the current section, and displays it on the sidebar for easy navigation.
// @match https://dev.to/*
// @grant none
// @version 1.0.1
// @author Circle
// @description 2023/5/23 14:32:33
// @license MIT
// ==/UserScript==
let hHeadings = [],
linkTargets = [];
const generateTOC = () => {
const hStack = [];
const articleBody = document.querySelector('.crayons-article__body');
if (!articleBody) return;
const sidebarRight = document.querySelector('.crayons-layout__sidebar-right');
// Create the TOC container
const tocContainer = document.createElement('ul');
tocContainer.id = 'toc-container';
const divContainer = document.createElement('div');
divContainer.className =
'crayons-article-sticky crayons-card crayons-card--secondary crayons-sponsorship billboard mt-4';
divContainer.appendChild(tocContainer);
// Find all headers in the article body
hHeadings = [...articleBody.childNodes].filter((node) => {
return node.nodeType !== 3 && node.tagName && node.tagName.includes('H');
});
if (!hHeadings.length) return;
linkTargets = hHeadings.map((hHeading, index) => {
const hItem = document.createElement('li');
const hLink = document.createElement('a');
const level = Number(hHeading.tagName.slice(1));
hLink.href = '#toc-' + index;
hLink.textContent = hHeading.textContent;
hItem.appendChild(hLink);
hItem.className = 'toc-level-' + level;
if (!hStack.length) {
hStack.push(level);
} else {
const headLevel = hStack[hStack.length - 1];
if (headLevel < level) {
hStack.push(level);
} else if (headLevel === level) {
} else {
hStack.pop();
}
}
hItem.className = 'toc-level-' + hStack.length;
hItem.style.marginLeft = (hStack.length) * 15 + 'px';
hHeading.id = 'toc-' + index;
tocContainer.appendChild(hItem);
return hItem;
});
sidebarRight.appendChild(divContainer);
};
window.addEventListener('scroll', () => {
const currentPosition =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
const currentIndex = hHeadings.findIndex(
hHeading => hHeading.offsetTop > currentPosition,
);
linkTargets.forEach((link, index) =>
link.classList.toggle('active', index === currentIndex),
);
});
let oldHref = document.location.href;
const bodyList = document.querySelector('body');
const observer = new MutationObserver(function (mutations) {
if (oldHref != document.location.href) {
oldHref = document.location.href;
// 这里调用你想要执行的函数
generateTOC();
}
});
const observerConfig = {
childList: true,
subtree: true,
};
observer.observe(bodyList, observerConfig);
generateTOC();
const styleElement = document.createElement('style');
styleElement.textContent = `
#toc-container {
padding-left: 20px;
}
#toc-container a {
color: var(--body-color);
}
#toc-container .active a {
color: var(--link-branded-color);
}
.active {
color: var(--link-branded-color);
font-weight: bold;
}
`;
document.head.appendChild(styleElement);