This script automatically tags page references that match the current page’s title with a new class called “.current-page-ref”. With this change it’ll allow user’s to customize these page-references to their liking.
In this example you will see the current page title “Text Nodes” and its Page References are in a bolder font with a bottom-border style. This is just an example to demonstrate but it’ll be up to the user’s to customize this however they wish.
Drop into your custom.js
function updatePageReferencesWithCurrentClass() {
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
updateCurrentPageRefs();
}
}
});
function updateCurrentPageRefs() {
const titleBlock = document.querySelector('.title.block');
if (!titleBlock) return;
const titleText = titleBlock.textContent.trim().toLowerCase();
const pageRefs = document.querySelectorAll('.ls-block .page-ref');
// Add or remove "current-page-ref" class based on matching with ".title.block" value
pageRefs.forEach((pageRef) => {
const dataRef = pageRef.getAttribute('data-ref').toLowerCase();
if (dataRef === titleText) {
pageRef.classList.add('current-page-ref');
} else {
pageRef.classList.remove('current-page-ref');
}
});
}
observer.observe(document.body, {
subtree: true,
childList: true,
});
// Apply the class to the elements immediately and also check for any mismatches
updateCurrentPageRefs();
}
// Initialize the function to start observing and update classes accordingly
updatePageReferencesWithCurrentClass();
Then in your custom.css you can define whatever style you want. For demonstration you can do:
.current-page-ref {
border-bottom: 1px solid;
font-weight: bold;
}