Skip to content

Commit

Permalink
perf: 当左侧空白空间宽度超过100px时才显示悬浮目录
Browse files Browse the repository at this point in the history
  • Loading branch information
@kkua
kkua committed Aug 21, 2019
1 parent 6a6c477 commit 6ef1002
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 66 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,15 +100,15 @@ theme = "maupassant"

`identifier`标志符必须是唯一的，不能重复；`weight`用于排序，值越小越靠前。

#### 悬浮文章目录（大纲）
#### 文章目录（大纲）

该主题支持文章目录（大纲）,大纲是通过`h1~h7`标题自动生成，在MD文件里就是`##`这类标题的标记，这里建议最多使用两层文章目录，而且最好是从`h2`开始，便于SEO优化。
如果要开启一篇文章的文章目录，只需要在`Front Matter` 添加`toc=true`即可，默认是不开启文章目录的。

```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
Expand Down
6 changes: 3 additions & 3 deletions README_EN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
139 changes: 78 additions & 61 deletions layouts/_default/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 ($('.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');
function ishide() {
if (document.getElementsByClassName('container')[0].offsetWidth <= 720) {
floatTocDivElem.style.top = '0px';
} else {
floatTocDivElem.style.display = 'block';
}
}
}

$(window).scroll(function () {
ishide();
if (($(window).scrollTop() != 0) && ($('#toc_div').css('display') == 'block')) {
top();
}
});
window.onscroll = function () {
ishide();
if ((document.documentElement.scrollTop != 0) && (floatTocDivElem.style.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;
window.onresize = function () {
ishide();
}
});

$("#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("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 = "";
}
document.getElementById("virtual_toc_list").remove();
};
</script>
{{- end }}

Expand Down Expand Up @@ -123,6 +133,13 @@ <h1 class="post-title">{{ .Title }}</h1>
<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>
Expand Down

0 comments on commit 6ef1002

Please sign in to comment.