mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-07-18 05:12:28 +00:00
feat: added Table of contents
This commit is contained in:
parent
2b88eae74b
commit
e1aae4a2cc
5 changed files with 110 additions and 10 deletions
|
@ -1,12 +1,3 @@
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
{{ if .Params.toc }}
|
|
||||||
<div class="col-lg-8 col-md-12">
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</div>
|
|
||||||
<div id="toc" class="col-lg-offset-6 toc {{ if gt (len .TableOfContents) 2500 }}compact{{ end }}">
|
|
||||||
{{ .TableOfContents }}
|
|
||||||
</div>
|
|
||||||
{{ else }}
|
|
||||||
{{ .Content }}
|
|
||||||
{{ end }}
|
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
<link href="/css/hybrid.css" rel="stylesheet">
|
<link href="/css/hybrid.css" rel="stylesheet">
|
||||||
<link href="/css/featherlight.min.css" rel="stylesheet">
|
<link href="/css/featherlight.min.css" rel="stylesheet">
|
||||||
<link href="/css/theme.css" rel="stylesheet">
|
<link href="/css/theme.css" rel="stylesheet">
|
||||||
|
<link href="/css/hugo-theme.css" rel="stylesheet">
|
||||||
<style type="text/css">:root #header + #content > #left > #rlblock_left
|
<style type="text/css">:root #header + #content > #left > #rlblock_left
|
||||||
{display:none !important;}</style>
|
{display:none !important;}</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -29,6 +30,7 @@
|
||||||
<i class="fa fa-2x fa-bars"></i>
|
<i class="fa fa-2x fa-bars"></i>
|
||||||
</a>
|
</a>
|
||||||
<div id="top-bar">
|
<div id="top-bar">
|
||||||
|
|
||||||
{{ if and .IsPage .Site.Params.editURL }}
|
{{ if and .IsPage .Site.Params.editURL }}
|
||||||
{{ $File := .File }}
|
{{ $File := .File }}
|
||||||
{{ $Site := .Site }}
|
{{ $Site := .Site }}
|
||||||
|
@ -41,8 +43,10 @@
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
|
<div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
|
||||||
|
{{ if and (not .Params.chapter) (.Params.toc) }}
|
||||||
|
<span id="toc-menu"><a href=""><i class="fa fa-ellipsis-v"></i></a></span>
|
||||||
|
{{ end }}
|
||||||
{{ $type := .Type }}
|
{{ $type := .Type }}
|
||||||
{{ $relLink := .RelPermalink }}
|
{{ $relLink := .RelPermalink }}
|
||||||
{{ range $name , $value := .Site.Sections }}
|
{{ range $name , $value := .Site.Sections }}
|
||||||
|
@ -55,6 +59,9 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Title }}<span itemprop="title"> {{ . }}</span>{{ end }}
|
{{ with .Title }}<span itemprop="title"> {{ . }}</span>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
{{ if .Params.toc }}
|
||||||
|
{{ partial "toc.html" . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{{ if .Params.chapter }}
|
{{ if .Params.chapter }}
|
||||||
|
|
5
layouts/partials/toc.html
Normal file
5
layouts/partials/toc.html
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<div class="progress">
|
||||||
|
<div class="wrapper">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
</div>
|
55
static/css/hugo-theme.css
Normal file
55
static/css/hugo-theme.css
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
/* Insert here special css for hugo theme, on top of any other imported css */
|
||||||
|
|
||||||
|
/*
|
||||||
|
.progress {
|
||||||
|
position: relative;
|
||||||
|
float: top;
|
||||||
|
text-align: left;
|
||||||
|
width: 330px;
|
||||||
|
padding: 45px 0 0 2%;
|
||||||
|
}
|
||||||
|
.progress .wrapper {
|
||||||
|
position: absolute;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
.progress .wrapper.affix {
|
||||||
|
position: fixed;
|
||||||
|
top: 10px;
|
||||||
|
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* Table of contents */
|
||||||
|
|
||||||
|
.progress ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TableOfContents > ul > li > ul > li > ul li {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
#TableOfContents > ul > li > a {
|
||||||
|
font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TableOfContents > ul > li > ul > li > a {
|
||||||
|
font-weight: bold; background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#TableOfContents > ul > li > ul > li > ul > li > ul > li > ul > li { display: none; }
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
position:absolute;
|
||||||
|
background-color: rgba(246, 246, 246, 0.97);
|
||||||
|
width: auto;
|
||||||
|
border: thin solid #ECECEC;
|
||||||
|
display:none;
|
||||||
|
z-index:200;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toc-menu {
|
||||||
|
border-right: thin solid #DAD8D8 !important;
|
||||||
|
padding-right: 1rem !important;
|
||||||
|
margin-right: 0.5rem !important;
|
||||||
|
}
|
|
@ -54,3 +54,45 @@ images.each(function(index){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$('#toc-menu').hover(function() {
|
||||||
|
$('.progress').stop(true, false, true).fadeToggle(300);
|
||||||
|
});
|
||||||
|
$('.progress').hover(function() {
|
||||||
|
$('.progress').stop(true, false, true).fadeToggle(300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate each progress section
|
||||||
|
/*
|
||||||
|
$(window).scroll(function (){
|
||||||
|
$("#body-inner h2").each(function(i){
|
||||||
|
//console.log($(this));
|
||||||
|
var this_top = $(this).offset().top;
|
||||||
|
var height = $(this).height();
|
||||||
|
var this_bottom = this_top + height;
|
||||||
|
var percent = 0;
|
||||||
|
|
||||||
|
// Scrolled within current section
|
||||||
|
if (top >= this_top && top <= this_bottom) {
|
||||||
|
percent = ((top - this_top) / (height - wrapper_height)) * 100;
|
||||||
|
if (percent >= 100) {
|
||||||
|
percent = 100;
|
||||||
|
//$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
|
||||||
|
console.log("aaa");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//$(".progress .wrapper .bar:eq("+i+") i").css("color", "#36a7f3");
|
||||||
|
console.log("bb");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (top > this_bottom) {
|
||||||
|
percent = 100;
|
||||||
|
//$(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");
|
||||||
|
console.log("ccc");
|
||||||
|
}
|
||||||
|
//console.log(i);
|
||||||
|
//$(".progress .wrapper .bar:eq("+i+") span").css("width", percent + "%");
|
||||||
|
//console.log("ddd");
|
||||||
|
});
|
||||||
|
});*/
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue