Current Page is available for styling links within the UI. But for more complex stuff, I'd like to be able to determine the current page from CSS or JS.
Perhaps Current Page could be made available as a system Resource (to be used as a variable in an embed) and/or as a class added to
<body>—or even to any link that matches the
current page value?
Example use for styling non-link element associated with the current page in a nav:
document.addEventListener('DOMContentLoaded', function () {
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
const href = link.getAttribute('href');
if (href && href.includes(system.currentPageSlug)) { // system.currentPageSlug as a system Resource
link.classList.add('current-page');
}
});
});nav ul li a.current-page:before {
/* styles */
}