cxykevin
/
study-area-cn
forked from study-area-cn/study-area-cn.old
1
0
Fork 0
Code Pull Requests Activity

更新主题 (#21) 

Reviewed-on: study-area-cn/study-area-cn#21
This commit is contained in:
cxykevin 2024-08-25 17:42:57 +08:00
parent 4880cfff76
commit dd798247e2
7 changed files with 110 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
book.toml
View File

@ -11,7 +11,9 @@ additional-css = [
"theme/css/mdui.css", "theme/css/mdui.css",
"theme/css/highlight.min.css", "theme/css/highlight.min.css",
"theme/css/page.css", "theme/css/page.css",
"theme/css/font.css",
"theme/font/icons.woff2", "theme/font/icons.woff2",
"theme/font/noto.otf",
] ]
additional-js = [ additional-js = [
"theme/js/mdui.global.js", "theme/js/mdui.global.js",

21
theme/css/font.css Normal file
View File

@ -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;
}

BIN
theme/font/noto.otf Normal file
View File

Binary file not shown.

BIN
theme/font/sourcecodepro.woff2 Normal file
View File

Binary file not shown.

69
theme/index.hbs
View File

@ -3,7 +3,7 @@
<head> <head>
<meta NAME="ROBOTS" CONTENT="INDEX,FOLLOW"> <meta NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<!-- Book generated using mdBook --> <!-- mdbook 内容 -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{{ title }}</title> <title>{{ title }}</title>
{{#if is_print }} {{#if is_print }}
@ -14,28 +14,29 @@
{{/if}} {{/if}}
<!-- Custom HTML head --> <!-- 自定义头部 html -->
{{> head}} {{> head}}
<!-- MDUI CSS&JS --> <!-- MDUI CSS&JS -->
<meta charset="UTF-8"> <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" /> <meta name="renderer" content="webkit" />
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/mdui.css"> <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/mdui.css">
<script src="{{ ../path_to_root }}theme/js/mdui.global.js"></script> <script src="{{ ../path_to_root }}theme/js/mdui.global.js"></script>
<link href="{{ ../path_to_root }}theme/css/icons.css" rel="stylesheet"> <link href="{{ ../path_to_root }}theme/css/icons.css" rel="stylesheet">
<!-- 搜索引擎描述 -->
<meta name="description" content="Study Area CN {{ description }}"> <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="theme-color" content="#ffffff">
<meta name="keywords" <meta name="keywords"
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook, rockylinux"> content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook, rockylinux">
<!-- favicon -->
{{#if favicon_svg}} {{#if favicon_svg}}
<link rel="icon" href="{{ path_to_root }}favicon.png"> <link rel="icon" href="{{ ../path_to_root }}favicon.png">
{{/if}} {{/if}}
{{#if favicon_png}} {{#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}}
{{#if print_enable}} {{#if print_enable}}
@ -46,43 +47,54 @@
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css"> <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css">
<script src="{{ ../path_to_root }}theme/js/highlight.min.js"></script> <script src="{{ ../path_to_root }}theme/js/highlight.min.js"></script>
{{#if mathjax_support}} {{#if mathjax_support}}
<!-- MathJax --> <!-- MathJax -->
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script> <script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
{{/if}} {{/if}}
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css"> <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
<!-- 自定义字体 -->
<link href="{{ ../path_to_root }}theme/css/font.css" rel="stylesheet">
</head> </head>
<body style="margin:0;padding:0;"> <body style="margin:0;padding:0;">
<!-- 打印页面输出目录 -->
{{#if is_print }} {{#if is_print }}
{{#toc}}{{/toc}} {{#toc}}{{/toc}}
{{/if}} {{/if}}
<mdui-layout> <mdui-layout>
{{#unless is_print }} {{#unless is_print }}
<!-- 顶栏 -->
<mdui-top-app-bar class="topbar" scroll-behavior="elevate"> <mdui-top-app-bar class="topbar" scroll-behavior="elevate">
<mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon> <mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
<mdui-button class="hideonmobile" id="open-study-env">实验环境</mdui-button> <mdui-button class="hideonmobile" id="open-study-env">实验环境</mdui-button>
<mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title> <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;"> <div class="navbtn" style="display: flex;">
{{#previous}} {{#previous}}
<mdui-button id="previous—page" class="hideonmobile" href="javascript:void(0);" <mdui-button id="previous—page" class="hideonmobile" href="javascript:void(0);" onclick="prevPage()"
onclick="prevPage()" style="margin-right:8px;">上一章</mdui-button> style="margin-right:8px;">上一章</mdui-button>
<a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_prevpage" class="helper"></a> <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_prevpage" class="helper"></a>
{{/previous}} {{/previous}}
{{#next}} {{#next}}
<mdui-button id="next—page" class="next—page" href="javascript:void(0);" <mdui-button id="next—page" class="next—page" href="javascript:void(0);"
onclick="nextPage()">下一章</mdui-button> onclick="nextPage()">下一章</mdui-button>
<a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_nextpage" class="next—pagehelper"></a> <a style="display:none;" href="{{ path_to_root }}{{link}}" id="helper_nextpage"
{{/next}} class="next—pagehelper"></a>
{{/next}}
</div> </div>
<!-- 仓库按钮 -->
{{#if git_repository_url}} {{#if git_repository_url}}
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon> <mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
{{/if}} {{/if}}
<!-- 打印按钮 -->
{{#if print_enable}} {{#if print_enable}}
<mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book" <mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book"
aria-label="Print this book" icon="print"> aria-label="Print this book" icon="print">
@ -90,7 +102,9 @@
{{/if}} {{/if}}
</mdui-top-app-bar> </mdui-top-app-bar>
<!-- 菜单栏 -->
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left"> <mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left">
<!-- JS 填充内容 -->
</mdui-navigation-drawer> </mdui-navigation-drawer>
{{/unless}} {{/unless}}
@ -105,8 +119,7 @@
<!-- Render toc finish --> <!-- Render toc finish -->
{{/unless}} {{/unless}}
<!-- 展开菜单按钮 -->
{{#unless is_print }} {{#unless is_print }}
<script> <script>
const navigationDrawer = document.querySelector(".toc-drawer"); const navigationDrawer = document.querySelector(".toc-drawer");
@ -116,11 +129,15 @@
</script> </script>
{{/unless}} {{/unless}}
<!-- 主要内容 -->
<mdui-layout-main class="example-layout-main" style="min-height: 100%"> <mdui-layout-main class="example-layout-main" style="min-height: 100%">
<!-- 内容区 -->
<div class="mdui-prose"> <div class="mdui-prose">
{{{ content }}} {{{ content }}}
</div> </div>
<!-- 学习环境页面 -->
{{#unless is_print }} {{#unless is_print }}
<mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog"> <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> <iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
@ -134,6 +151,7 @@
</script> </script>
{{/unless}} {{/unless}}
<!-- 下部翻页按钮 -->
<div class="navcard" style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;"> <div class="navcard" style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}} {{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="javascript:void(0);" onclick="prevPage()"> <mdui-card clickable style="width:49%;height: 100%" href="javascript:void(0);" onclick="prevPage()">
@ -164,6 +182,7 @@
</div> </div>
</mdui-layout-main> </mdui-layout-main>
<!-- 动态更新内容 -->
{{#if live_reload_endpoint}} {{#if live_reload_endpoint}}
<!-- Livereload script (if served using the cli tool) --> <!-- Livereload script (if served using the cli tool) -->
<script> <script>
@ -206,8 +225,14 @@
<!-- 留白 --> <!-- 留白 -->
<div style="height:2em"></div> <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> <script src="{{ ../path_to_root }}theme/js/page.js"></script>
</body> </body>

19
theme/js/page.js
View File

@ -1,4 +1,4 @@
if (window.innerWidth > 640) { if (window.innerWidth > 640) { // 自动展开导航栏
document.getElementById("toc-drawer").setAttribute('open', true); document.getElementById("toc-drawer").setAttribute('open', true);
} }
@ -16,7 +16,7 @@ function nextPage() {
changePage(link); changePage(link);
} }
function setPage(url) { function setPage(url) { // 菜单跳转事件
if (url === "") { if (url === "") {
return; return;
} }
@ -26,18 +26,23 @@ function setPage(url) {
} }
function changePage(url) { function changePage(url) {
// 加载图标
var nextbtn = document.getElementsByClassName("next—page")[0] var nextbtn = document.getElementsByClassName("next—page")[0]
if (nextbtn != undefined) { if (nextbtn != undefined) {
nextbtn.setAttribute("loading", ""); nextbtn.setAttribute("loading", "");
} }
// 发送 XHR 动态更新
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return; if (xhr.readyState !== 4) return; // 加载失败
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
// 滚动到顶部
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
document.body.scrollTop = 0; document.body.scrollTop = 0;
// 更新内容与翻页按钮
var old_tag = document.getElementsByClassName("mdui-prose")[0]; var old_tag = document.getElementsByClassName("mdui-prose")[0];
var old_topbar_tag = document.getElementsByClassName("navbtn")[0]; var old_topbar_tag = document.getElementsByClassName("navbtn")[0];
var old_navcard_tag = document.getElementsByClassName("navcard")[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_topbar_tag.innerHTML = virtualtag.getElementsByClassName("navbtn")[0].innerHTML;
old_navcard_tag.innerHTML = virtualtag.getElementsByClassName("navcard")[0].innerHTML; old_navcard_tag.innerHTML = virtualtag.getElementsByClassName("navcard")[0].innerHTML;
// 更新导航栏当前选择的内容
var elements = document.querySelectorAll('[active]'); var elements = document.querySelectorAll('[active]');
elements.forEach(element => { elements.forEach(element => {
element.removeAttribute('active'); element.removeAttribute('active');
@ -57,15 +63,22 @@ function changePage(url) {
element.setAttribute('active', "true"); element.setAttribute('active', "true");
}); });
// 清除临时标签
virtualtag.remove(); virtualtag.remove();
// 添加历史记录
history.pushState({ page: title }, title, url); history.pushState({ page: title }, title, url);
// 刷新高亮
hljs.highlightAll();
} }
}; };
// 发送 XHR
xhr.open('GET', url, true); xhr.open('GET', url, true);
xhr.send(null); xhr.send(null);
} }
// 当回到上一页时
window.addEventListener('popstate', function (event) { window.addEventListener('popstate', function (event) {
console.log('pop state:', window.location.protocol + "//" + window.location.host + location.pathname); console.log('pop state:', window.location.protocol + "//" + window.location.host + location.pathname);
changePage(window.location.protocol + "//" + window.location.host + location.pathname); changePage(window.location.protocol + "//" + window.location.host + location.pathname);

37
theme/js/tocrender.js
View File

@ -1,32 +1,35 @@
// 获取当前 toc 内容
var toc_obj = document.getElementById("helperframe").getElementsByTagName("ol")[0] var toc_obj = document.getElementById("helperframe").getElementsByTagName("ol")[0]
// html 转目录树
function createTree(elements) { function createTree(elements) {
let result = []; let result = [];
last = 0 last = 0
elements.childNodes.forEach(element => { elements.childNodes.forEach(element => {
// 有子元素并且不是大标题
if (element.childNodes.length > 0 && (!element.classList.contains("part-title"))) { if (element.childNodes.length > 0 && (!element.classList.contains("part-title"))) {
let a = element.childNodes[0] let a = element.childNodes[0]
let link = a.tagName === 'A' ? a.href : '' let link = a.tagName === 'A' ? a.href : '' // 获取链接，没有的就是目录
if (link == '') { if (link == '') { // 目录
if (a.tagName === 'DIV') { if (a.tagName === 'DIV') { // 目录不可点击
result.push({ result.push({
link: "#", link: "#",
text: a.textContent, text: a.textContent,
child: [], child: [],
avtive: false avtive: false
}) })
} else { } else { // 目录可点击
result[result.length - 1].child = createTree(element.getElementsByTagName("ol")[0]) result[result.length - 1].child = createTree(element.getElementsByTagName("ol")[0])
} }
} else { } else { // 文章
result.push({ result.push({
link: link, link: link,
text: a.innerText, text: a.innerText,
child: [], 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({ result.push({
link: "", link: "",
text: `<h3 style="margin-top: 0px;margin-bottom:0;margin-left:0rem;"><strong>` + element.textContent + "</strong></h3>", 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 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() + `"> 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> <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"> <div style="margin-left: 1rem">
<mdui-list-item rounded> <mdui-list-item rounded>
<mdui-collapse>` <mdui-collapse>`
var i = 0 var i = 0
treeitem.child.forEach(element => { treeitem.child.forEach(element => { // 拼接每级目录
i_str = i_str + loadTreeItem(element, i) i_str = i_str + loadTreeItem(element, i)
i++ i++
}) })
// 添加尾部模板
i_str = i_str + `</mdui-collapse> i_str = i_str + `</mdui-collapse>
</mdui-list-item> </mdui-list-item>
</div> </div>
</mdui-collapse-item>` </mdui-collapse-item>`
return i_str return i_str
} else { } else { // 文章
disabled = treeitem.link === '#' ? "disabled" : "" 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>` 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) { function getResult(obj) {
var get_tree = createTree(obj) var get_tree = createTree(obj)
var n_str = `<mdui-list><mdui-collapse>` var n_str = `<mdui-list><mdui-collapse>`
@ -73,10 +81,13 @@ function getResult(obj) {
return n_str return n_str
} }
// 插入内容
document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', getResult(toc_obj)); document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', getResult(toc_obj));
// 移除 toc
document.getElementById("helperframe").remove() document.getElementById("helperframe").remove()
// 终端内容
console.info(" _____ __ __ ___ _______ __ \n / ___// /___ ______/ /_ __/ | ________ ____ _/ ____/ | / / \n \\__ \\/ __/ / / / __ / / / / /| | / ___/ _ \\/ __ `/ / / |/ / \n ___/ / /_/ /_/ / /_/ / /_/ / ___ |/ / / __/ /_/ / /___/ /| / \n/____/\\__/\\__,_/\\__,_/\\__, /_/ |_/_/ \\___/\\__,_/\\____/_/ |_/ \n /____/ \n欢迎来到 Study Area CN! \nstudy-area.org.cn \n") console.info(" _____ __ __ ___ _______ __ \n / ___// /___ ______/ /_ __/ | ________ ____ _/ ____/ | / / \n \\__ \\/ __/ / / / __ / / / / /| | / ___/ _ \\/ __ `/ / / |/ / \n ___/ / /_/ /_/ / /_/ / /_/ / ___ |/ / / __/ /_/ / /___/ /| / \n/____/\\__/\\__,_/\\__,_/\\__, /_/ |_/_/ \\___/\\__,_/\\____/_/ |_/ \n /____/ \n欢迎来到 Study Area CN! \nstudy-area.org.cn \n")
console.info("本站使用mdbook生成，gitea action自动构建 \n恭喜你发现了彩蛋！") console.info("本站使用mdbook生成，gitea action自动构建 \n恭喜你发现了彩蛋！")
console.info("欢迎参与我们的开源项目！ https://git.hmtsai.cn/study-area-cn/study-area-cn") console.info("欢迎参与我们的开源项目！ https://git.hmtsai.cn/study-area-cn/study-area-cn")