2024-04-14 18:08:50 +08:00
|
|
|
<aside class="left-sidebar">
|
2024-04-15 02:38:22 +08:00
|
|
|
<details class="toc__wrapper" open>
|
2024-04-14 18:08:50 +08:00
|
|
|
<summary class="toc__heading">
|
|
|
|
Contents
|
|
|
|
</summary>
|
|
|
|
{{ content | toc | safe }}
|
|
|
|
</details>
|
|
|
|
</aside>
|
2024-04-16 00:28:11 +08:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.toc__wrapper {
|
|
|
|
position: sticky;
|
|
|
|
top: 4rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc__heading {
|
|
|
|
font-size: 1.3rem;
|
|
|
|
font-weight: 700;
|
|
|
|
color: var(--clr-sub-heading);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc ol,
|
|
|
|
.toc ol ol {
|
|
|
|
display: grid;
|
|
|
|
gap: 0.3em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc ol {
|
|
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
|
|
padding-left: 1.5em;
|
|
|
|
padding-top: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc ol ol {
|
|
|
|
border-top: none;
|
|
|
|
list-style-type: disc;
|
|
|
|
padding-left: 1.5em;
|
|
|
|
padding-top: 0.3em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc ol a {
|
|
|
|
font-size: 1.1rem;
|
|
|
|
padding-left: 0.3em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.toc ol ol a {
|
|
|
|
padding: 0;
|
|
|
|
font-size: 1rem;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2024-04-14 18:08:50 +08:00
|
|
|
<script defer>
|
|
|
|
// Close article ToC accordion for small screen sizes
|
|
|
|
const tocWrapper = docucument.querySelector('.toc__wrapper');
|
|
|
|
const tocEl = docucument.querySelector('.toc');
|
|
|
|
if (window.innerWidth < 480) {
|
|
|
|
tocWrapper.removeAttribute("open");
|
|
|
|
} else {
|
|
|
|
tocWrapper.setAttribute("open", true);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Remove the stickiness of the sidebar ToC if it is larger than screen height
|
|
|
|
function preventSidebarOverflow() {
|
|
|
|
if (document.documentElement.clientHeight < tocEl.offsetHeight + 50) {
|
|
|
|
tocEl.style.marginTop = "0";
|
|
|
|
tocEl.style.position = "static";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
preventSidebarOverflow();
|
|
|
|
</script>
|