hazza/github-style
1
0
Fork 0
mirror of https://github.com/MeiK2333/github-style.git synced 2025-10-07 10:04:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

更新 toc

Browse Source
This commit is contained in:
MeiK
2022-01-27 15:31:18 +08:00
parent 02ba70be5a
commit 324e8301a8
3 changed files with 59 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
layouts/partials/post.html
View File

@@ -1,5 +1,3 @@
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<div>
<main>
<div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
@@ -44,15 +42,21 @@
<div>
<div class="js-gist-file-update-container js-task-list-container file-box">
<div id="file-pytest" class="file my-2">
<div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header">
<div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header" style="z-index: 2">
<div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
<div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
<!-- Copied from github -->
<summary id="toc-toggle" class="btn btn-octicon m-0 mr-2 p-2" aria-haspopup="menu" aria-label="Table of Contents" role="button">
<summary id="toc-toggle" onclick="clickToc()" class="btn btn-octicon m-0 mr-2 p-2">
<svg aria-hidden="true" viewBox="0 0 16 16" height="16" width="16" class="octicon octicon-list-unordered">
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg>
</summary>
<details-menu class="SelectMenu" id="toc-details" style="display: none;">
<div class="SelectMenu-modal rounded-3 mt-1" style="max-height: 340px;">
<div class="SelectMenu-list SelectMenu-list--borderless p-2" style="overscroll-behavior: contain;" id="toc-list">
</div>
</div>
</details-menu>
{{ countwords .Content }} Words
<!-- <span class="file-info-divider"></span>
{{ .ReadingTime }} min -->
@@ -76,7 +80,7 @@
</div>
<div class="Box-body px-5 pb-5">
<div class="Box-body px-5 pb-5" style="z-index: 1">
<article class="markdown-body entry-content container-lg">
{{- .Content -}}
</article>
@@ -88,66 +92,5 @@
</div>
</main>
</div>
<script>
// Set up `scroll-padding-top` which is relevant for preventing
// fixed headers from covering content
// See https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my
window.onload = function () {
const header = document.getElementById('post-header');
const headerHeight = header.offsetHeight;
// 10px for a bit of leeway
document.documentElement.style.scrollPaddingTop = headerHeight + 10 + "px";
}
const tocToggleButton = document.getElementById("toc-toggle");
const tippyInstance = tippy('#toc-toggle', {
trigger: 'click',
content: '<div id="table-of-contents">{{ .TableOfContents }}</div>',
allowHTML: true,
placement: 'bottom-start',
interactive: true,
arrow: false,
maxWidth: "none",
onHide: function () { tocToggleButton.classList.remove("hover"); },
onShow: function () { tocToggleButton.classList.add("hover"); },
onShown: function () {
selectTableOfContentsOption();
if (window.hasSetupTableOfContentsListeners) {
return;
}
const tableOfContents = document.getElementById("table-of-contents");
tableOfContents.addEventListener('click', function () {
// Assumes there's only ever 1 tooltip
tippyInstance[0].hide();
});
window.hasSetupTableOfContentsListeners = true;
}
});
function selectTableOfContentsOption () {
const optionSelectedClass = 'table-of-contents-option-selected';
const tableOfContentsOptions = document.querySelectorAll("#table-of-contents > nav > ul li");
for (const option of tableOfContentsOptions) {
// Find anchors and either select/unselect it based on the URL's hash
const [child] = option.children;
if (child.tagName.toLowerCase() !== 'a') {
continue;
}
if (window.location.href === child.href) {
child.classList.add(optionSelectedClass);
} else {
child.classList.remove(optionSelectedClass);
}
}
}
window.onhashchange = selectTableOfContentsOption;
</script>
<script type="application/javascript" src='{{ "js/toc.js" | absURL }}'></script>
<link rel="stylesheet" href='{{ "css/toc.css" | absURL }}' />

4
static/css/toc.css Normal file
View File

@@ -0,0 +1,4 @@
.toc-item {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
line-height: 1.5;
}

43
static/js/toc.js
View File

@@ -0,0 +1,43 @@
const details = document.querySelector("#toc-details");
function clickToc() {
switch (details.style.display) {
case 'none':
details.style.display = 'block';
setTimeout(() =>
document.body.addEventListener('click', closeToc), 1);
break;
case 'block':
details.style.display = 'none';
break;
}
}
function openToc() {
details.style.display = 'block';
}
function closeToc() {
details.style.display = 'none';
document.body.removeEventListener('click', closeToc);
}
function getToc() {
const hs = document.querySelector('.markdown-body').querySelectorAll('h1, h2, h3, h4, h5, h6');
const toc_list = document.querySelector("#toc-list");
for (const h of hs) {
const size = Number(h.tagName.toLowerCase().replace('h', ''));
const a = document.createElement('a');
a.classList.add("filter-item", "SelectMenu-item", "ws-normal", "wb-break-word", "line-clamp-2", "py-1", "toc-item");
a.href = `#${h.id}`;
a.innerText = h.innerHTML;
a.style.paddingLeft = `${size * 12}px`;
toc_list.appendChild(a);
}
}
// TODO: highlight on scroll
(() => {
getToc();
})();