主题修改 之 返回顶部按扭

参考Landscape-F

增加文件到主题目录

1
2
3
themes/pacman/layout/_partial/bottom-btn.ejs
themes/pacman/source/css/_partial/bottom-btn.styl
themes/pacman/source/js/gotop.js

bottom-btn.ejs

1
2
3
4
5
6
7
8
9
<div class="bottom-btn">
<% if (theme.go_top){ %>
<a class="icon-gotop" href="javascript:void(0)" title="返回顶部"></a>
<%- js('js/gotop') %>
<!--
<script src="<%- config.root %>js/gotop.js"></script>
-->
<% } %>
</div>

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.bottom-btn
z-index 2
position fixed
_position absolute
bottom 1%
right 1%
width 36px;

if gotop
.icon-gotop
width 36px
height 36px
cursor pointer
border-radius 2px
box-shadow 0 1px 3px rgba(0,0,0,.2)
margin-bottom 10px
text-decoration none
background-color #444
background-color rgba(0,0,0,0.7)
color #fff
line-height 36px
font-size 30px
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-gotop
&:before
content "\f077"
.icon-gotop
&:active
background-color rgba(0,0,0,.75)
.icon-gotop
&:hover
background-color rgba(0,0,0,.75)

if tocaside
.icon-toc-toggle
width 36px
height 26px
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 26px
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(0,0,0,.75)

修改 themes/pacman/layout/_partial/after-footer.ejs,增加

1
<%- partial('bottom-btn') %>

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

1
gotop = hexo-config("go_top")

修改 themes/pacman/source/css/style.styl,增加

1
@import "_partial/bottom-btn"