study-area-cn/study-area-cn.old
Archived
2
1
Fork 3
Code Issues Pull Requests Actions Projects Releases Wiki Activity

SACP2: 完成大部分美化 (#14)
All checks were successful
Build and Publish / Run (push) Successful in 5m20s
Details

Browse Source 
Reviewed-on: study-area-cn/study-area-cn#14
This commit is contained in:
cxykevin 2024-08-10 21:39:31 +08:00
parent 837d290e8a
commit d791a0b76d
13 changed files with 1592 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
book.toml
View File

@ -4,3 +4,18 @@ language = "zh-cn"
multilingual = false
src = "src"
title = "Study Area CN"
[output.html]
additional-css = [
"theme/css/icons.css",
"theme/css/mdui.css",
"theme/css/highlight.min.css",
"theme/css/page.css",
"theme/font/icons.woff2",
]
additional-js = [
"theme/js/mdui.global.js",
"theme/js/highlight.min.js",
"theme/js/mathjax.js",
"theme/js/tocrender.js",
]

9
theme/css/highlight.min.css vendored Normal file
View File

@ -0,0 +1,9 @@
/*!
Theme: Default
Description: Original highlight.js style
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
Maintainer: @highlightjs/core-team
Website: https://highlightjs.org/
License: see project LICENSE
Touched: 2021
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

22
theme/css/icons.css Normal file
View File

@ -0,0 +1,22 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../font/icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
}

1
theme/css/mdui.css Normal file
View File

File diff suppressed because one or more lines are too long

125
theme/css/page.css Normal file
View File

@ -0,0 +1,125 @@
ol,
li {
list-style: none;
font-size: 1em;
}
.part-title {
font-weight: bold;
font-size: 1.2em;
}
a {
position: relative;
text-decoration: none;
color: rgb(var(--mdui-color-primary));
}
a:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
background-color: rgb(var(--mdui-color-primary))
}
a:hover:after {
width: 100%;
left: 0;
}
h1 {
margin-top: 0px !important;
margin-bottom: 20px !important;
}
h2 {
margin-top: 30px !important;
margin-bottom: 15px !important;
}
.container {
min-height: 1rem !important;
}
.menu-link {
color: rgb(var(--mdui-color-on-surface));
}
.menu-link:after {
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: rgb(var(--mdui-color-primary));
transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}
.menu-link:hover:after {
width: calc(100% - 20px);
left: 20px;
}
.topbar {
position: fixed !important;
top: 0px;
right: 0px;
left: 0px;
}
.mdui-prose {
margin-left: 50px;
margin-right: 50px;
max-width: 78%;
margin: auto;
left: 0;
right: 0;
}
.toc-drawer {
position: fixed !important;
margin-left: 0px !important;
margin-right: 0px !important;
}
.bottombar {
height: 10em !important;
margin-top: 2em !important;
margin-left: 2em !important;
margin-right: 2em !important;
display: flex !important;
}
.prevpage {
display: flex !important;
font-size: 1.2em !important;
margin-top: 10px !important;
margin-left: 4px !important;
}
.nextpage {
display: flex !important;
font-size: 1.2em !important;
margin-top: 10px !important;
margin-right: 4px !important;
}
hr {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
@media (max-width: 641px) {
.hideonmobile {
display: none !important;
}
}
@media (min-width: 640px) {
.hideonmobile {
display: inline-flex !important;
}
}

BIN
theme/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
theme/favicon.png Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.

187
theme/index.hbs
View File

@ -19,24 +19,20 @@
<!-- 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="renderer" content="webkit"/>
<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
<!-- Material Icons Font (Filled) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-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">
content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook, rockylinux">
{{#if favicon_svg}}
<link rel="icon" href="{{ path_to_root }}favicon.svg">
<link rel="icon" href="{{ path_to_root }}favicon.png">
{{/if}}
{{#if favicon_png}}
<link rel="shortcut icon" href="{{ path_to_root }}favicon.png">
@ -47,130 +43,118 @@
{{/if}}
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css">
<script src="{{ ../path_to_root }}theme/js/highlight.min.js"></script>
<!-- Custom theme stylesheets -->
{{#each additional_css}}
<link rel="stylesheet" href="{{ ../path_to_root }}{{ this }}">
{{/each}}
{{#if mathjax_support}}
<!-- MathJax -->
<script async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
{{/if}}
<style>
ol,li{
list-style:none;
font-size:1em;
}
.part-title{
font-weight:bold;
font-size:1.2em;
}
a {
position: relative;
text-decoration: none;
color: rgb(var(--mdui-color-primary));
}
a:after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
background-color: rgb(var(--mdui-color-primary))
}
a:hover:after {
width: 100%;
left: 0;
}
</style>
<link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
</head>
<body style="margin:0;padding:0;min-height:100%;width:100%">
<mdui-layout style="height:100%">
<mdui-top-app-bar>
<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 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>
<div style="flex-grow: 1"></div>
<div style="flex-grow: 1"></div>
{{#previous}}
<mdui-button id="previous—page" class="hideonmobile" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
{{/previous}}
{{#next}}
<mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button>
{{/next}}
{{#if git_repository_url}}
<mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
{{/if}}
{{#if print_enable}}
<mdui-button-icon href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book" icon="print">
<mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book"
aria-label="Print this book" icon="print">
</mdui-button-icon>
{{/if}}
</mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer">
{{#toc}}{{/toc}}
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open>
</mdui-navigation-drawer>
{{/unless}}
{{#unless is_print }}
<!-- Render toc -->
<div style="display:none;" id="helperframe">
{{#toc}}{{/toc}}
</div>
<script src="{{ ../path_to_root }}theme/js/tocrender.js"></script>
<!-- Render toc finish -->
{{/unless}}
{{#unless is_print }}
<script>
const navigationDrawer = document.querySelector(".toc-drawer");
const openButton = document.getElementById("open-drawer");
openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open);
</script>
{{/unless}}
<mdui-layout-main class="example-layout-main" style="min-height: 100%">
<div class="mdui-prose" style="margin-left:20px;margin-right:20px;">
{{{ content }}}
</div>
<div class="mdui-prose">
{{{ content }}}
</div>
<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>
</mdui-dialog>
{{#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>
</mdui-dialog>
<script>
document.getElementById("open-study-env").addEventListener("click", () => {
document.getElementById("study-env-dialog").open = true
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
});
</script>
<script>
document.getElementById("open-study-env").addEventListener("click", () => {
document.getElementById("study-env-dialog").open = true
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
});
</script>
{{/unless}}
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<mdui-icon name="navigate_before" style="font-size:1.5em"></mdui-icon> 上一章
</div>
<div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-left: 4px;">
<mdui-icon name="navigate_before" style="font-size:1.5em;"></mdui-icon> 上一章
</div>
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/previous}}
<div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}}
</div>
</mdui-card>
{{/previous}}
<div style="flex-grow:1"></div>
<div style="flex-grow:1"></div>
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next" style="font-size:1.5em"></mdui-icon>
</div>
{{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.2em;margin-top: 10px;margin-right: 4px;">
<div style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next"
style="font-size:1.5em"></mdui-icon>
</div>
<div style="text-align:center;font-size:2em">
{{title}}
</div>
</mdui-card>
{{/next}}
</div>
<div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}}
</div>
</mdui-card>
{{/next}}
</div>
</mdui-layout-main>
{{#if live_reload_endpoint}}
@ -216,6 +200,7 @@
<div style="height:2em"></div>
<script>hljs.highlightAll();</script>
</body>
</html>
</html>

1213
theme/js/highlight.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

19
theme/js/mathjax.js Normal file
View File

File diff suppressed because one or more lines are too long

22
theme/js/mdui.global.js Normal file
View File

File diff suppressed because one or more lines are too long

80
theme/js/tocrender.js Normal file
View File

@ -0,0 +1,80 @@
var toc_obj = document.getElementById("helperframe").getElementsByTagName("ol")[0]
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') {
result.push({
link: "#",
text: a.textContent,
child: [],
avtive: false
})
} else {
result[result.length - 1].child = createTree(element.getElementsByTagName("ol")[0])
}
} else {
result.push({
link: link,
text: a.innerText,
child: [],
active: element.childNodes[0].classList.contains("active")
})
}
} 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>",
child: [],
active: false
})
}
});
return result
}
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" `+ active_str + `><a href="` + 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 => {
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 {
disabled = treeitem.link === '#' ? "disabled" : ""
return `<mdui-collapse-item><mdui-list-item rounded ` + active_str + ` slot="header" ` + disabled + ` href="` + treeitem.link + `">` + treeitem.text + `</mdui-list-item></mdui-collapse-item>`
}
}
var get_tree = createTree(toc_obj)
var n_str = `<mdui-list><mdui-collapse>`
var i = 0
get_tree.forEach(element => {
n_str = n_str + loadTreeItem(element, i)
i++
})
n_str = n_str + `</mdui-collapse></mdui-list>`
document.getElementById("toc-drawer").insertAdjacentHTML('beforeend', n_str);
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")
console.info("=====================================")