Reviewed-on: study-area-cn/study-area-cn#14
This commit is contained in:
parent
837d290e8a
commit
d791a0b76d
15
book.toml
15
book.toml
|
|
@ -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",
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
187
theme/index.hbs
187
theme/index.hbs
|
|
@ -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>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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("=====================================")
|
||||
Reference in New Issue