更新主题 (#21)

Reviewed-on: study-area-cn/study-area-cn#21
2024-08-25 17:42:57 +08:00 · 2024-08-25 17:42:57 +08:00 · dd798247e2
parent 4880cfff76
commit dd798247e2
7 changed files with 110 additions and 38 deletions
--- a/book.toml
+++ b/book.toml
@ -11,7 +11,9 @@ additional-css = [
    "theme/css/mdui.css",
    "theme/css/highlight.min.css",
    "theme/css/page.css",
+    "theme/css/font.css",
    "theme/font/icons.woff2",
+    "theme/font/noto.otf",
 ]
 additional-js = [
    "theme/js/mdui.global.js",
--- a/theme/css/font.css
+++ b/theme/css/font.css
@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'Noto Sans';
+    font-style: normal;
+    font-weight: 300;
+    src: local("NotoSansCJK-Medium") url('../font/noto.otf') format('otf');
+}
+
+@font-face {
+    font-family: 'Source Code Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: local("SourceCodePro") url('../font/sourcecodepro.woff2') format('woff2');
+}
+
+body {
+    font-family: 'Noto Sans', sans-serif !important;
+}
+
+code {
+    font-family: 'Source Code Pro', 'Courier New', monospace !important;
+}
--- a/theme/font/noto.otf
+++ b/theme/font/noto.otf
--- a/theme/font/sourcecodepro.woff2
+++ b/theme/font/sourcecodepro.woff2
--- a/theme/index.hbs
+++ b/theme/index.hbs
@ -3,7 +3,7 @@

 <head>
    <meta NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
-    <!-- Book generated using mdBook -->
+    <!-- mdbook 内容 -->
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    {{#if is_print }}
@ -14,28 +14,29 @@
    {{/if}}


-    <!-- Custom HTML head -->
+    <!-- 自定义头部 html -->
    {{> head}}

    <!-- MDUI CSS&JS -->
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/mdui.css">
    <script src="{{ ../path_to_root }}theme/js/mdui.global.js"></script>
    <link href="{{ ../path_to_root }}theme/css/icons.css" rel="stylesheet">

+    <!-- 搜索引擎描述 -->
    <meta name="description" content="Study Area CN {{ description }}">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#ffffff">
    <meta name="keywords"
        content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook, rockylinux">

+    <!-- favicon -->
    {{#if favicon_svg}}
-    <link rel="icon" href="{{ path_to_root }}favicon.png">
+    <link rel="icon" href="{{ ../path_to_root }}favicon.png">
    {{/if}}
    {{#if favicon_png}}
-    <link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
+    <link rel="shortcut icon" href="{{ ../path_to_root }}favicon.png">
    {{/if}}

    {{#if print_enable}}
@ -46,43 +47,54 @@
    <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css">
    <script src="{{ ../path_to_root }}theme/js/highlight.min.js"></script>

-
-
    {{#if mathjax_support}}
    <!-- MathJax -->
    <script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
    {{/if}}

    <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
+
+    <!-- 自定义字体 -->
+    <link href="{{ ../path_to_root }}theme/css/font.css" rel="stylesheet">
 </head>

 <body style="margin:0;padding:0;">
+    <!-- 打印页面输出目录 -->
    {{#if is_print }}
    {{#toc}}{{/toc}}
    {{/if}}

    <mdui-layout>
        {{#unless is_print }}
+        <!-- 顶栏 -->
        <mdui-top-app-bar class="topbar" scroll-behavior="elevate">
            <mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
            <mdui-button class="hideonmobile" id="open-study-env">实验环境</mdui-button>
            <mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
-            <div style="flex-grow: 1"></div>
+
+            <div style="flex-grow: 1"></div> <!-- 横向填充 -->
+
+            <!-- 翻页 -->
            <div class="navbtn" style="display: flex;">
-            {{#previous}}
-            <mdui-button id="previous—page" class="hideonmobile" href="javascript:void(0);"
-                onclick="prevPage()" style="margin-right:8px;">上一章</mdui-button>
-            <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_prevpage" class="helper"></a>
-            {{/previous}}
-            {{#next}}
-            <mdui-button id="next—page" class="next—page" href="javascript:void(0);"
-                onclick="nextPage()">下一章</mdui-button>
-            <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_nextpage" class="next—pagehelper"></a>
-            {{/next}}
+                {{#previous}}
+                <mdui-button id="previous—page" class="hideonmobile" href="javascript:void(0);" onclick="prevPage()"
+                    style="margin-right:8px;">上一章</mdui-button>
+                <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_prevpage" class="helper"></a>
+                {{/previous}}
+                {{#next}}
+                <mdui-button id="next—page" class="next—page" href="javascript:void(0);"
+                    onclick="nextPage()">下一章</mdui-button>
+                <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_nextpage"
+                    class="next—pagehelper"></a>
+                {{/next}}
            </div>
+
+            <!-- 仓库按钮 -->
            {{#if git_repository_url}}
            <mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
            {{/if}}
+
+            <!-- 打印按钮 -->
            {{#if print_enable}}
            <mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book"
                aria-label="Print this book" icon="print">
@ -90,7 +102,9 @@
            {{/if}}
        </mdui-top-app-bar>

+        <!-- 菜单栏 -->
        <mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left">
+            <!-- JS 填充内容 -->
        </mdui-navigation-drawer>
        {{/unless}}

@ -105,8 +119,7 @@
        <!-- Render toc finish -->
        {{/unless}}

-
-
+        <!-- 展开菜单按钮 -->
        {{#unless is_print }}
        <script>
            const navigationDrawer = document.querySelector(".toc-drawer");
@ -116,11 +129,15 @@
        </script>
        {{/unless}}

+        <!-- 主要内容 -->
        <mdui-layout-main class="example-layout-main" style="min-height: 100%">
+
+            <!-- 内容区 -->
            <div class="mdui-prose">
                {{{ content }}}
            </div>

+            <!-- 学习环境页面 -->
            {{#unless is_print }}
            <mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog">
                <iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
@ -134,6 +151,7 @@
            </script>
            {{/unless}}

+            <!-- 下部翻页按钮 -->
            <div class="navcard" style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
                {{#previous}}
                <mdui-card clickable style="width:49%;height: 100%" href="javascript:void(0);" onclick="prevPage()">
@ -164,6 +182,7 @@
            </div>
        </mdui-layout-main>

+        <!-- 动态更新内容 -->
        {{#if live_reload_endpoint}}
        <!-- Livereload script (if served using the cli tool) -->
        <script>
@ -206,8 +225,14 @@
    <!-- 留白 -->
    <div style="height:2em"></div>

-    <script>hljs.highlightAll();</script>
+    <!-- 高亮 -->
+    <script>
+        window.addEventListener('load', function () {
+            hljs.highlightAll();
+        }); 
+    </script>

+    <!-- 页面 JS -->
    <script src="{{ ../path_to_root }}theme/js/page.js"></script>

 </body>
--- 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);
--- 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: `<h3 style="margin-top: 0px;margin-bottom:0;margin-left:0rem;"><strong>` + element.textContent + "</strong></h3>",
@ -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 = `<mdui-collapse-item value=item"` + v.toString() + `">
            <mdui-list-item rounded slot="header" search_link="` + treeitem.link + `" ` + active_str + `><a href="javascript:void(0);" onclick="setPage('` + treeitem.link + `')" class="menu-link">` + treeitem.text + `</a><mdui-icon slot="end-icon" name="keyboard_arrow_down"></mdui-icon></mdui-list-item>
            <div style="margin-left: 1rem">
                <mdui-list-item rounded>
                    <mdui-collapse>`
        var i = 0
-        treeitem.child.forEach(element => {
+        treeitem.child.forEach(element => { // 拼接每级目录
            i_str = i_str + loadTreeItem(element, i)
            i++
        })
+        // 添加尾部模板
        i_str = i_str + `</mdui-collapse>
                </mdui-list-item>
            </div>
        </mdui-collapse-item>`
        return i_str
-    } else {
+    } else { // 文章
        disabled = treeitem.link === '#' ? "disabled" : ""
        return `<mdui-collapse-item><mdui-list-item rounded search_link="` + treeitem.link + `" ` + active_str + ` slot="header" ` + disabled + ` href="javascript:void(0);" onclick="setPage('` + treeitem.link + `')">` + treeitem.text + `</mdui-list-item></mdui-collapse-item>`
    }
 }
+// 目录结构树生成新html
 function getResult(obj) {
    var get_tree = createTree(obj)
    var n_str = `<mdui-list><mdui-collapse>`
@ -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")