0%

主题修改 之 文章目录切换

发表于 更新于 分类于

参考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