mirror of
https://github.com/flysnow-org/maupassant-hugo.git
synced 2026-08-24 07:18:55 +00:00
perf: 当左侧空白空间宽度超过100px时才显示悬浮目录
This commit is contained in:
KK
@@ -100,7 +100,7 @@ theme = "maupassant"
|
||||
|
||||
`identifier`标志符必须是唯一的，不能重复；`weight`用于排序，值越小越靠前。
|
||||
|
||||
#### 悬浮文章目录（大纲）
|
||||
#### 文章目录（大纲）
|
||||
|
||||
该主题支持文章目录（大纲）,大纲是通过`h1~h7`标题自动生成，在MD文件里就是`##`这类标题的标记，这里建议最多使用两层文章目录，而且最好是从`h2`开始，便于SEO优化。
|
||||
如果要开启一篇文章的文章目录，只需要在`Front Matter` 添加`toc=true`即可，默认是不开启文章目录的。
|
||||
@@ -108,7 +108,7 @@ theme = "maupassant"
|
||||
```toml
|
||||
toc = true
|
||||
```
|
||||
具体效果参考[https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
|
||||
当左侧空白空间宽度超过100px时，则显示悬浮目录。具体效果参考[https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
|
||||
#### 友情链接
|
||||
|
||||
```toml
|
||||
|
||||
+3
-3
@@ -82,14 +82,14 @@ theme = "maupassant"
|
||||
url = "http://mirrors.flysnow.org/"
|
||||
```
|
||||
|
||||
#### Floating TOC
|
||||
#### TOC
|
||||
|
||||
Floating TOC support in Front Matter .
|
||||
TOC support in Front Matter .
|
||||
|
||||
```toml
|
||||
toc = true
|
||||
```
|
||||
Floating TOC preview [https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
|
||||
If the left blank space more than 100px, it will display Floating TOC. here is preview [https://kkua.github.io/post/java-util-code-snippet/](https://kkua.github.io/post/java-util-code-snippet/)
|
||||
#### Ads
|
||||
|
||||
```toml
|
||||
|
||||
@@ -4,26 +4,24 @@
|
||||
|
||||
<div id="body">
|
||||
{{ if .Params.toc -}}
|
||||
<!-- 来源https://github.com/naah69/hugo-theme-artwhite -->
|
||||
<!--悬浮目录-->
|
||||
<div id="toc_div" style="margin: 10px;border: 1px solid gray;z-index:99999;">
|
||||
<div id="virtual_toc_list" style="display: none">
|
||||
{{.TableOfContents}}
|
||||
</div>
|
||||
<div id="float_toc_div" style="margin: 10px;border: 1px solid gray;z-index:99999;display: none;">
|
||||
<header style="background-color: #f3f3f3;color: black;border-bottom: 1px solid gray;padding: 10px 10px 10px 10px;">
|
||||
<strong id="toc_btn_open" style="color: black;font-size: large;">目录</strong>
|
||||
<strong id="toc_btn_close" style="color: black;font-size: large;float: right">╳</strong>
|
||||
</header>
|
||||
<div id="toc_list" style="background-color: #f3f3f3;color: black;padding: 10px;">
|
||||
{{.TableOfContents}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css">
|
||||
header.intro-header {
|
||||
background-image: url('{{ if .Params.image }}{{ .Params.image | absURL }}{{ else }}{{ .Site.Params.header_image | absURL}}{{ end }}')
|
||||
}
|
||||
|
||||
#toc_div {
|
||||
#float_toc_div {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 10.6%;
|
||||
/* width: 10.6%; */
|
||||
height: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -34,67 +32,79 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
top();
|
||||
$('#toc_div').css('left', '0px');
|
||||
$("#toc_div").css('display', 'block');
|
||||
window.onload = function () {
|
||||
let tocNavElem = document.getElementById("TableOfContents");
|
||||
let floatTocDivElem = document.getElementById("float_toc_div");
|
||||
let tocListElem = floatTocDivElem.getElementsByTagName('div')[0];
|
||||
let colGroupElem = document.getElementById("body").getElementsByClassName("col-group")[0]
|
||||
let floatTocWidth = (document.body.clientWidth - colGroupElem.offsetWidth) / 2 - 16;
|
||||
var useFloatToc = false;
|
||||
|
||||
function top() {
|
||||
if ($('.container').width() <= 720) {
|
||||
$("#toc_div").css('top', '0px');
|
||||
} else {
|
||||
if (floatTocWidth >= 100) {
|
||||
useFloatToc = true;
|
||||
document.getElementById("toc_list").appendChild(tocNavElem);
|
||||
floatTocDivElem.style.display = 'block';
|
||||
floatTocDivElem.style.width = floatTocWidth + 'px';
|
||||
top();
|
||||
floatTocDivElem.style.left = '0px';
|
||||
|
||||
$("#toc_div").css('top', window.innerHeight / 9 + 'px');
|
||||
function top() {
|
||||
if (document.getElementsByClassName('container')[0].offsetWidth <= 720) {
|
||||
floatTocDivElem.style.top = '0px';
|
||||
} else {
|
||||
floatTocDivElem.style.top = window.innerHeight / 9 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function ishide() {
|
||||
if (document.getElementsByClassName('container')[0].offsetWidth <= 720) {
|
||||
floatTocDivElem.style.top = '0px';
|
||||
} else {
|
||||
floatTocDivElem.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
window.onscroll = function () {
|
||||
ishide();
|
||||
if ((document.documentElement.scrollTop != 0) && (floatTocDivElem.style.display == 'block')) {
|
||||
top();
|
||||
}
|
||||
};
|
||||
|
||||
window.onresize = function () {
|
||||
ishide();
|
||||
}
|
||||
|
||||
document.getElementById("toc_btn_open").addEventListener('click', function () {
|
||||
switch (tocListElem.style.display) {
|
||||
case "none":
|
||||
document.getElementById("toc_btn_close").style.display = "";
|
||||
tocListElem.style.display = "";
|
||||
floatTocDivElem.getElementsByTagName("header")[0].style.borderBottom = "1px solid gray";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.getElementById("toc_btn_close").addEventListener('click', function () {
|
||||
switch (tocListElem.style.display) {
|
||||
case "":
|
||||
document.getElementById("toc_btn_close").style.display = "none";
|
||||
tocListElem.style.display = "none";
|
||||
floatTocDivElem.getElementsByTagName("header")[0].style.borderBottom = "";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
} else {
|
||||
let fixedTocElem = document.getElementsByClassName("toc-article")[0];
|
||||
fixedTocElem.appendChild(tocNavElem);
|
||||
fixedTocElem.parentElement.style.display = "";
|
||||
}
|
||||
|
||||
function ishide() {
|
||||
|
||||
if ($('.container').width() <= 720) {
|
||||
$("#toc_div").css('top', '0px');
|
||||
// $("#toc_btn_close").hide()
|
||||
// $('#toc_div #toc_list').hide();
|
||||
// $('#toc_div header').css("border-bottom","");
|
||||
} else {
|
||||
$("#toc_div").css('display', 'block');
|
||||
}
|
||||
}
|
||||
|
||||
$(window).scroll(function () {
|
||||
ishide();
|
||||
if (($(window).scrollTop() != 0) && ($('#toc_div').css('display') == 'block')) {
|
||||
top();
|
||||
}
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
ishide();
|
||||
}
|
||||
|
||||
$("#toc_btn_open").click(function () {
|
||||
switch ($('#toc_div #toc_list').css('display')) {
|
||||
case "none":
|
||||
$("#toc_btn_close").show()
|
||||
$('#toc_div #toc_list').show();
|
||||
$('#toc_div header').css("border-bottom", "1px solid gray");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$("#toc_btn_close").click(function () {
|
||||
switch ($('#toc_div #toc_list').css('display')) {
|
||||
case "block":
|
||||
$("#toc_btn_close").hide()
|
||||
$('#toc_div #toc_list').hide();
|
||||
$('#toc_div header').css("border-bottom", "");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
document.getElementById("virtual_toc_list").remove();
|
||||
};
|
||||
</script>
|
||||
{{- end }}
|
||||
|
||||
@@ -123,6 +133,13 @@
|
||||
<span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span> 阅读</span></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .Params.toc }}
|
||||
<div class="clear" style="display: none">
|
||||
<div class="toc-article">
|
||||
<div class="toc-title">文章目录</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user