From 631e59297abc52afc5044a8f1d4f89d2068d995f Mon Sep 17 00:00:00 2001 From: cxykevin Date: Sun, 25 Aug 2024 16:08:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=AB=98=E4=BA=AEbug?= =?UTF-8?q?=E5=B9=B6=E4=B8=94=E6=B7=BB=E5=8A=A0=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- theme/index.hbs | 57 +++++++++++++++++++++++++++++++------------ theme/js/page.js | 19 ++++++++++++--- theme/js/tocrender.js | 37 ++++++++++++++++++---------- 3 files changed, 81 insertions(+), 32 deletions(-) diff --git a/theme/index.hbs b/theme/index.hbs index a47ad9a..06992af 100755 --- a/theme/index.hbs +++ b/theme/index.hbs @@ -3,7 +3,7 @@ - + {{ title }} {{#if is_print }} @@ -14,7 +14,7 @@ {{/if}} - + {{> head}} @@ -25,12 +25,14 @@ + + {{#if favicon_svg}} {{/if}} @@ -57,32 +59,42 @@ + {{#if is_print }} {{#toc}}{{/toc}} {{/if}} {{#unless is_print }} + 实验环境 {{ book_title }} -
+ +
+ +
- {{#previous}} - 上一章 - - {{/previous}} - {{#next}} - 下一章 - - {{/next}} + {{#previous}} + 上一章 + + {{/previous}} + {{#next}} + 下一章 + + {{/next}}
+ + {{#if git_repository_url}} {{/if}} + + {{#if print_enable}} @@ -90,7 +102,9 @@ {{/if}} + + {{/unless}} @@ -105,8 +119,7 @@ {{/unless}} - - + {{#unless is_print }} {{/unless}} + + +
{{{ content }}}
+ {{#unless is_print }} @@ -134,6 +151,7 @@ {{/unless}} +
{{#previous}} @@ -164,6 +182,7 @@
+ {{#if live_reload_endpoint}} + + + diff --git a/theme/js/page.js b/theme/js/page.js index f9befa4..9570bab 100644 --- a/theme/js/page.js +++ b/theme/js/page.js @@ -1,4 +1,4 @@ -if (window.innerWidth > 640) { +if (window.innerWidth > 640) { // 自动展开导航栏 document.getElementById("toc-drawer").setAttribute('open', true); } @@ -16,7 +16,7 @@ function nextPage() { changePage(link); } -function setPage(url) { +function setPage(url) { // 菜单跳转事件 if (url === "") { return; } @@ -26,18 +26,23 @@ function setPage(url) { } function changePage(url) { + // 加载图标 var nextbtn = document.getElementsByClassName("next—page")[0] if (nextbtn != undefined) { nextbtn.setAttribute("loading", ""); } + + // 发送 XHR 动态更新 const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { - if (xhr.readyState !== 4) return; + if (xhr.readyState !== 4) return; // 加载失败 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { + // 滚动到顶部 document.documentElement.scrollTop = 0; document.body.scrollTop = 0; + // 更新内容与翻页按钮 var old_tag = document.getElementsByClassName("mdui-prose")[0]; var old_topbar_tag = document.getElementsByClassName("navbtn")[0]; var old_navcard_tag = document.getElementsByClassName("navcard")[0]; @@ -48,6 +53,7 @@ function changePage(url) { old_topbar_tag.innerHTML = virtualtag.getElementsByClassName("navbtn")[0].innerHTML; old_navcard_tag.innerHTML = virtualtag.getElementsByClassName("navcard")[0].innerHTML; + // 更新导航栏当前选择的内容 var elements = document.querySelectorAll('[active]'); elements.forEach(element => { element.removeAttribute('active'); @@ -57,15 +63,22 @@ function changePage(url) { element.setAttribute('active', "true"); }); + // 清除临时标签 virtualtag.remove(); + + // 添加历史记录 history.pushState({ page: title }, title, url); + // 刷新高亮 + hljs.highlightAll(); } }; + // 发送 XHR xhr.open('GET', url, true); xhr.send(null); } +// 当回到上一页时 window.addEventListener('popstate', function (event) { console.log('pop state:', window.location.protocol + "//" + window.location.host + location.pathname); changePage(window.location.protocol + "//" + window.location.host + location.pathname); diff --git a/theme/js/tocrender.js b/theme/js/tocrender.js index a776ea6..007c253 100644 --- a/theme/js/tocrender.js +++ b/theme/js/tocrender.js @@ -1,32 +1,35 @@ - +// 获取当前 toc 内容 var toc_obj = document.getElementById("helperframe").getElementsByTagName("ol")[0] + +// html 转目录树 function createTree(elements) { let result = []; last = 0 elements.childNodes.forEach(element => { + // 有子元素并且不是大标题 if (element.childNodes.length > 0 && (!element.classList.contains("part-title"))) { let a = element.childNodes[0] - let link = a.tagName === 'A' ? a.href : '' - if (link == '') { - if (a.tagName === 'DIV') { + let link = a.tagName === 'A' ? a.href : '' // 获取链接，没有的就是目录 + if (link == '') { // 目录 + if (a.tagName === 'DIV') { // 目录不可点击 result.push({ link: "#", text: a.textContent, child: [], avtive: false }) - } else { + } else { // 目录可点击 result[result.length - 1].child = createTree(element.getElementsByTagName("ol")[0]) } - } else { + } else { // 文章 result.push({ link: link, text: a.innerText, child: [], - active: element.childNodes[0].classList.contains("active") + active: element.childNodes[0].classList.contains("active") // 当前选中的 }) } - } else if (element.classList.contains("part-title")) { + } else if (element.classList.contains("part-title")) { // 大标题 result.push({ link: "", text: `

` + element.textContent + "

", @@ -37,30 +40,35 @@ function createTree(elements) { }); return result } -function loadTreeItem(treeitem, v) { - var active_str = treeitem.active ? "active" : "" - if (treeitem.child.length > 0) { +// 目录结构树生成新html的dfs部分 +function loadTreeItem(treeitem, v) { + var active_str = treeitem.active ? "active" : "" // 是否是当前文章 + + if (treeitem.child.length > 0) { // 目录 + // 添加头部模板 var i_str = ` ` + treeitem.text + `
` var i = 0 - treeitem.child.forEach(element => { + treeitem.child.forEach(element => { // 拼接每级目录 i_str = i_str + loadTreeItem(element, i) i++ }) + // 添加尾部模板 i_str = i_str + `
` return i_str - } else { + } else { // 文章 disabled = treeitem.link === '#' ? "disabled" : "" return `` + treeitem.text + `` } } +// 目录结构树生成新html function getResult(obj) { var get_tree = createTree(obj) var n_str = `` @@ -73,10 +81,13 @@ function getResult(obj) { return n_str } +// 插入内容 document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', getResult(toc_obj)); +// 移除 toc document.getElementById("helperframe").remove() +// 终端内容 console.info(" _____ __ __ ___ _______ __ \n / ___// /___ ______/ /_ __/ | ________ ____ _/ ____/ | / / \n \\__ \\/ __/ / / / __ / / / / /| | / ___/ _ \\/ __ `/ / / |/ / \n ___/ / /_/ /_/ / /_/ / /_/ / ___ |/ / / __/ /_/ / /___/ /| / \n/____/\\__/\\__,_/\\__,_/\\__, /_/ |_/_/ \\___/\\__,_/\\____/_/ |_/ \n /____/ \n欢迎来到 Study Area CN! \nstudy-area.org.cn \n") console.info("本站使用mdbook生成，gitea action自动构建 \n恭喜你发现了彩蛋！") console.info("欢迎参与我们的开源项目！ https://git.hmtsai.cn/study-area-cn/study-area-cn")