实现“无刷新” #16
|
|
@ -10,10 +10,12 @@ additional-css = [
|
||||||
"theme/css/icons.css",
|
"theme/css/icons.css",
|
||||||
"theme/css/mdui.css",
|
"theme/css/mdui.css",
|
||||||
"theme/css/highlight.min.css",
|
"theme/css/highlight.min.css",
|
||||||
|
"theme/css/page.css",
|
||||||
"theme/font/icons.woff2",
|
"theme/font/icons.woff2",
|
||||||
]
|
]
|
||||||
additional-js = [
|
additional-js = [
|
||||||
"theme/js/mdui.global.js",
|
"theme/js/mdui.global.js",
|
||||||
"theme/js/highlight.min.js",
|
"theme/js/highlight.min.js",
|
||||||
"theme/js/mathjax.js",
|
"theme/js/mathjax.js",
|
||||||
|
"theme/js/tocrender.js",
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
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;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preset {
|
||||||
|
min-height: 1rem !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;
|
||||||
|
}
|
||||||
|
|
@ -53,40 +53,7 @@
|
||||||
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></script>
|
<script async src="{{ ../path_to_root }}theme/js/mathjax.js"></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;min-height:100%;width:100%">
|
||||||
|
|
@ -106,10 +73,18 @@
|
||||||
{{/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">
|
||||||
{{#toc}}{{/toc}}
|
|
||||||
</mdui-navigation-drawer>
|
</mdui-navigation-drawer>
|
||||||
|
|
||||||
|
<!-- Render toc -->
|
||||||
|
<div style="display:none;" id="helperframe">
|
||||||
|
{{#toc}}{{/toc}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="{{ ../path_to_root }}theme/js/tocrender.js"></script>
|
||||||
|
<!-- Render toc finish -->
|
||||||
|
|
||||||
|
|
||||||
<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");
|
||||||
|
|
@ -118,11 +93,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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" style="margin-left:50px;margin-right:50px;">
|
||||||
{{{ content }}}
|
{{{ content }}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<mdui-dialog headline="Study Env" close-on-esc id="study-env-dialog">
|
<!--
|
||||||
|
<mdui-dialog headline="Study Env (press esc to close)" close-on-esc 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>
|
||||||
|
|
||||||
|
|
@ -131,7 +107,7 @@
|
||||||
document.getElementById("study-env-dialog").open = true
|
document.getElementById("study-env-dialog").open = true
|
||||||
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
|
document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
|
||||||
});
|
});
|
||||||
</script>
|
</script>-->
|
||||||
|
|
||||||
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
|
<div style="height:10em;margin-top:2em;margin-left:2em;margin-right:2em;display:flex">
|
||||||
{{#previous}}
|
{{#previous}}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
getElementById("helperframe").remove()
|
||||||
Reference in New Issue