主题修改 之 文章目录切换

参考Landscape-F

增加文件到主题目录

1
themes/pacman/source/js/toc_aside_toggle.js

修改 bottom-btn.ejs

themes/pacman/layout/_partial/bottom-btn.ejs,增加

1
2
3
4
5
6
7
<% if (is_post()&& (page.toc !== false) && theme.toc.aside){ %>
<a class="icon-toc-toggle" href="javascript:void(0)" title="文章目录"></a>
<!--
<script src="<%- config.root %>js/toc_aside_toggle.js"></script>
-->
<%- js('js/toc_aside_toggle') %>
<% } %>

注:此步聚的前提是之前添加过 返回顶部功能。如果没有,请增加 bottom-btn.ejs 和 修改 after-footer.ejs。

修改 sidebar.ejs

themes/pacman/layout/_partial/sidebar.ejs,增加

1
<aside id="sidebar" class="clearfix">

修改 varialbles.styl

themes/pacman/source/css/_base/varialbles.styl,增加

1
2
sidebar = hexo-config("sidebar")
tocaside = hexo-config("toc.aside")

修改 bottom-btn.styl

themes/pacman/source/css/bottom-btn.styl,增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
if tocaside
.icon-toc-toggle
width 36px
height 36px
cursor pointer
border-radius 2px
box-shadow 0 1px 3px rgba(0,0,0,.2)
text-decoration none
background-color #444
background-color rgba(0,0,0,0.7)
color #fff
line-height 36px
font-size 22px
text-align center
display inline-block
font-family FontAwesome
font-style normal
font-weight normal
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
.icon-toc-toggle
&:before
content "\f00b"
.icon-toc-toggle
&:active
background-color rgba(0,0,0,.75)
.icon-toc-toggle
&:hover
background-color rgba(211,18,102,.95)

注:此步聚的前提是之前添加过 返回顶部功能。如果没有,请增加 bottom-btn.ejs 和 bottom-btn.styl 并修改 after-footer.ejs将bottom-btn.ejs包含。

修改 helper.styl

themes/pacman/source/css/_partial/helper.styl **部分

1
2
3
4
5
6
7
8
9
10
#toc.toc-aside
display none
width 13%
position fixed
right 2%
top 320px
**max-height: 68%**
**overflow auto**
line-height 1.5em
font-size 1em
1
2
3
4
.toc-title
cursor pointer
display block
margin .5em 0