SACP2: 完成大部分美化 (#14)

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

View File

@ -4,3 +4,18 @@ language = "zh-cn"
multilingual = false multilingual = false
src = "src" src = "src"
title = "Study Area CN" 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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
theme/favicon.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
theme/font/icons.woff2 Normal file

Binary file not shown.

View File

@ -21,22 +21,18 @@
<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, maximum-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="https://unpkg.com/mdui@2/mdui.css"> <script src="{{ ../path_to_root }}theme/js/mdui.global.js"></script>
<script src="https://unpkg.com/mdui@2/mdui.global.js"></script> <link href="{{ ../path_to_root }}theme/css/icons.css" rel="stylesheet">
<!-- Material Icons Font (Filled) -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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="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"> content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷!学园, netman, linux, mdbook, rockylinux">
{{#if favicon_svg}} {{#if favicon_svg}}
<link rel="icon" href="{{ path_to_root }}favicon.svg"> <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">
@ -47,93 +43,79 @@
{{/if}} {{/if}}
<!-- Highlight.js Stylesheets --> <!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/highlight.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <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}} {{#if mathjax_support}}
<!-- MathJax --> <!-- MathJax -->
<script async <script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}} {{/if}}
<style> <link rel="stylesheet" href="{{ ../path_to_root }}theme/css/page.css">
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>
</head> </head>
<body style="margin:0;padding:0;min-height:100%;width:100%"> <body style="margin:0;padding:0;">
<mdui-layout style="height:100%"> {{#if is_print }}
<mdui-top-app-bar> {{#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-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> <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}} {{#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 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> </mdui-button-icon>
{{/if}} {{/if}}
</mdui-top-app-bar> </mdui-top-app-bar>
<mdui-navigation-drawer close-on-overlay-click class="toc-drawer"> <mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open>
{{#toc}}{{/toc}}
</mdui-navigation-drawer> </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> <script>
const navigationDrawer = document.querySelector(".toc-drawer"); const navigationDrawer = document.querySelector(".toc-drawer");
const openButton = document.getElementById("open-drawer"); const openButton = document.getElementById("open-drawer");
openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open); openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open);
</script> </script>
{{/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" style="margin-left:20px;margin-right:20px;"> <div class="mdui-prose">
{{{ content }}} {{{ content }}}
</div> </div>
<mdui-dialog {{#unless is_print }}
headline="Study Env" <mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog">
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>
</mdui-dialog> </mdui-dialog>
@ -143,15 +125,16 @@
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top" document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
}); });
</script> </script>
{{/unless}}
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex"> <div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
{{#previous}} {{#previous}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}"> <mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em"> <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> 上一章 <mdui-icon name="navigate_before" style="font-size:1.5em;"></mdui-icon> 上一章
</div> </div>
<div style="text-align:center;font-size:2em"> <div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}} {{title}}
</div> </div>
</mdui-card> </mdui-card>
@ -161,11 +144,12 @@
{{#next}} {{#next}}
<mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}"> <mdui-card clickable style="width:49%;height: 100%" href="{{ path_to_root }}{{link}}">
<div style="display:flex;font-size:1.5em"> <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 style="flex-grow:1"></div>下一章<mdui-icon name="navigate_next"
style="font-size:1.5em"></mdui-icon>
</div> </div>
<div style="text-align:center;font-size:2em"> <div style="text-align:center;font-size:1.8em;margin-top: 12px;">
{{title}} {{title}}
</div> </div>
</mdui-card> </mdui-card>
@ -216,6 +200,7 @@
<div style="height:2em"></div> <div style="height:2em"></div>
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</body> </body>
</html> </html>

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

File diff suppressed because one or more lines are too long

19
theme/js/mathjax.js Normal file

File diff suppressed because one or more lines are too long

22
theme/js/mdui.global.js Normal 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("=====================================")