0%

主题修改 之 返回顶部按扭

发表于 更新于 分类于

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