Permalink
Browse files

feat: fix toc's position 简洁有效地显示目录

Toc is fixed on the bottom-left of post pages. That makes effective use
of left column and keeps page simple.
把目录固定到左下方,有效利用左边栏,也使简洁的双栏布局得以保存。
  • Loading branch information...
MOxFIVE committed Sep 9, 2015
1 parent 83b8e18 commit af99373123bf869e1fa851195dfa0b6f256c703d
Showing with 53 additions and 31 deletions.
  1. +18 −16 themes/Yilia/layout/_partial/article.ejs
  2. +35 −15 themes/Yilia/source/css/_partial/article.styl
@@ -27,27 +27,29 @@
<!-- Table of Contents -->
<% if (!index && post.toc != false){ %>
<!-- 默认显示文章目录,在文章---前输入toc: false关闭目录 -->
<!-- Show TOC in default, Hide TOC via putting "toc: false" before "---" at [post].md -->
<!-- Show TOC and tocButton in default, Hide TOC via putting "toc: false" before "---" at [post].md -->
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<% } %>
<input type="button" value="显示/隐藏文章目录" id="tocButton">
<script type="text/javascript">
var toc_button= document.getElementById("tocButton");
var toc_div= document.getElementById("toc");
/* Show or hide toc when click on tocButton.
通过点击设置的按钮显示或者隐藏文章目录.*/
toc_button.onclick=function(){
if(toc_div.style.display=="none"){
toc_div.style.display="block";
}
else{
toc_div.style.display="none";
<input type="button" id="tocButton" value="目录开关" title="点击按钮隐藏或者显示文章目录">
<script type="text/javascript">
var toc_button= document.getElementById("tocButton");
var toc_div= document.getElementById("toc");
/* Show or hide toc when click on tocButton.
通过点击设置的按钮显示或者隐藏文章目录.*/
toc_button.onclick=function(){
if(toc_div.style.display=="none"){
toc_div.style.display="block";
}
else{
toc_div.style.display="none";
}
}
}
</script>
</script>
<% } %>
<%- post.content %>
<% } %>
</div>
@@ -218,6 +218,9 @@ body {
color: #574C4C;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
&:hover {
color:#88acdb;
};
}
video{
max-width: 100%;
@@ -382,40 +385,57 @@ body {
/*toc*/
#tocButton {
background: lightblue;
padding: 0.3em;
font-size: 0.8em;
opacity: 0.5;
padding: 0.3em 0.5em;
border-radius: 6px;
border-style : outset;
position: fixed;
left: 220px;
top: 385px;
background: white;
font-size: .9em;
font-weight: bold;
color: lightgray;
cursor: pointer
border: none;
font-family: inherit;
&:hover {
color: #88acdb;
font-size: 1em;
}
}
.toc-article {
background: #eee;
position: fixed;
left: 0;
background: #fff;
border-radius: 2.8%;
margin-left: 1em;
padding: 0.5em;
max-width: 28%;
max-height: 28em;
margin-left: 0em;
padding: 10px;
padding-left: 50px
width: 230px;
top:375px;
bottom: 1em;
overflow: auto;
}
.toc-title {
}
#toc {
line-height: 1.5em;
font-size: .9em;
float: right;
a {
color: gray;
&:visited {
color: #88acdb
}
}
a:hover {
color: #88acdb;
}
}
#toc .toc {
padding: 0
}
#toc .toc li {
list-style-type: none
background: #eee;
}
#toc ol {
margin-left: 0
@@ -454,4 +474,4 @@ body {
line color will be interlaced.*/
.article-entry > ol:last-child > li:nth-child(2n){
background: #F9FFF4;
}
}

0 comments on commit af99373

Please sign in to comment.