diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
index cc6ed34..cce684b 100755
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@@ -17,7 +17,7 @@
<%- partial('categories',{post:post}) %>
<% if(post.toc!==false){ %>
-
+ <%- toc(post.content, {list_number: false}) %>
<% } %>
diff --git a/source/less/_toc.less b/source/less/_toc.less
index 7127083..9483ca9 100755
--- a/source/less/_toc.less
+++ b/source/less/_toc.less
@@ -1,62 +1,72 @@
.toc-wrapper{
- position:fixed;
- top: @header-height + @gap * 2;
- right: 50%;
- margin-right: -@container-width/2;
- border-radius: @border-radius-width;
- .enable-trans();
- &:extend(.z-depth-main);
- &:hover {
- &:extend(.z-depth-main-raised);
- }
- &:active {
- // box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
- }
- // prevent toc is too heigh.
- overflow: auto;
- max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
- @media(max-width: @container-width){
- right: 0;
- margin-right:0;
- }
+ position:fixed;
+ top: @header-height + @gap * 2;
+ right: 50%;
+ margin-right: -@container-width/2;
+ border-radius: @border-radius-width;
+ .enable-trans();
+ &:extend(.z-depth-main);
+ &:hover {
+ &:extend(.z-depth-main-raised);
+ }
+ &:active {
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+ }
- @media(max-width: @on-phone){
- top: @header-height + @gap;
- right: 0px - @side-width;
- border-radius: 0;
- margin-right:0;
- &.active{
- transform: translateX(-@side-width - 10px);
+ overflow: auto;
+ max-height: ~"calc(100% - @{header-height} - 2 * @{gap})";
+ @media(max-width: @container-width){
+ right: 0;
+ margin-right:0;
}
- }
- width: @side-width;
- z-index:3;
- &:extend(.z-depth-2);
- padding: @gap;
- background: white;
- a {
- color: fade(@text-color, 60%);
- font-size: @small-font-size;
- display: inline-block;
- &:hover,&:active,&.active{
- color: darken(@text-color-theme, 00%);
- font-weight: bold;
+ @media(max-width: @on-phone){
+ top: @header-height + @gap;
+ right: 0px - @side-width;
+ border-radius: 0;
+ margin-right:0;
+ &.active{
+ transform: translateX(-@side-width - 10px);
+ }
}
- }
- ol{
- &.toc-child{
- padding-left: @gap;
+
+ width: @side-width;
+ z-index:3;
+ &:extend(.z-depth-2);
+ padding: @gap 0;
+ background: white;
+ a {
+ padding-left: 8px;
+ border-left: 0px solid @primary-color;
+ color: fade(@text-color, 60%);
+ font-size: @small-font-size;
+ display: inline-block;
+ &:hover,&:active,&.active{
+ color: darken(@text-color-theme, 00%);
+ font-weight: bold;
+ border-left-width: 3px;
+ }
+ &:active,&.active{
+ border-left: 3px solid @primary-color;
+ background:darken(white, 5%);
+ }
}
- li{
- list-style: none;
- width: auto;
- &:extend(.txt-ellipsis);
+ ol{
+ &.toc-child a{
+ padding-left: 2*@gap;
+ width: 100%;
+ }
+ li{
+ a{
+ padding-left: @gap;
+ width: 100%;
+ }
+ list-style: none;
+ width: auto;
+ &:extend(.txt-ellipsis);
+ }
+ }
+ &:empty{
+ display:none;
}
-
- }
- &:empty{
- display:none;
- }
}