Butterfly_一图流背景与页脚美化

1399 字

7 分钟

Butterfly_一图流背景与页脚美化

2024-10-03

魔改

Hexo

/

Butterfly

/

美化

一图流背景#

1.一图流背景简单来说就将背景作为文章的顶部封面，相当于把原有的封面去除了，这样看起来会更加清爽。 2.本站参考了博主闪闪发光的 ZZZ：Hexo+Butterfly 主题一图流背景与顶部图修改

效果图：

代码#

1.将主题文件中的index_img:设为transparent透明。 2.在background:处设置自己喜欢的背景。

1
# The banner image of home page
2
index_img: transparent
3
————————————————————————————————————————————
4
# If the banner of page not setting, it will show the top_img
5
default_top_img: false
6
# The banner image of archive page
7
archive_img: false
8
......
9
# Website Background (設置網站背景)
10
background: url(/img/background/g.jpg) top / cover no-repeat

3.在目录source/css/内新建一个文件：modify.styl，参入以下内容。

1
@import 'nib'
2

3
// 顶部图
4
#page-header
5
  background: transparent !important
6

7
  &.post-bg, &.not-home-page
8
    height: 280px !important
9

10
  #post-info          // 标题居中
11
    bottom: 40px !important
12
    text-align: center
13
  #page-site-info     // 标题下信息居中
14
    top: 140px !important
15

16
  @media screen and (max-width: 768px)
17
    &.not-home-page
18
      height: 200px !important
19
    #post-info
20
      bottom: 10px !important
21
    #page-site-info
22
      top: 100px !important
23

24
.top-img
25
  height: 250px
26
  margin: -50px -40px 50px
27
  border-top-left-radius: inherit
28
  border-top-right-radius: inherit
29
  background-position: center center
30
  background-size: cover
31
  transition: all 0.3s
32

33
  @media screen and (max-width: 768px)
34
    height: 230px
35
    margin: -36px -14px 36px
36

37
  [data-theme='dark'] &
38
    filter: brightness(0.8)
39

40
// 页脚
41
#footer:before
42
  background-color: alpha(#FFF, .5)
43

44
  [data-theme='dark'] &
45
    background-color: alpha(#000, .5)
46

47
#footer-wrap, #footer-wrap a
48
  color: #111
49
  transition: unset
50

51
  [data-theme='dark'] &
52
    color: var(--light-grey)

4.最后在主题文件内引入modify.css即可

modify.styl 会被 Hexo 渲染成 modify.css 文件，所以此处应为 modify.css。

1
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
2
inject:
3
  head:
4
    - <link rel="stylesheet" href="/css/modify.css">

页脚美化#

1.本期页脚美化新增了快速回到顶栏的功能。 2.本站参考了博主ichika：本站的一些样式魔改的教程 效果图：

代码#

1.打开layout/includes/footer.pug，覆盖上以下代码：（记得将信息改为自己的）

1
#footer-wrap
2
  #footer-left
3
    .footer-title
4
      span= config.title + ' | '
5
      if theme.footer.owner.enable
6
        - var now = new Date()
7
        - var nowYear = now.getFullYear()
8
      if theme.footer.owner.since && theme.footer.owner.since != nowYear
9
        span.footer-copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
10
      else
11
        span.footer-copyright!= `&copy;${nowYear} By ${config.author}`
12
    .footer-button
13
      a(title='GitHub' href='https://github.com/Almango')
14
        i.fab.fa-github
15
      a(title='微博' href='https://weibo.com/u/7936064867')
16
        i.fab.fa-weibo
17
      a(title='bilibili' href='https://space.bilibili.com/18247019?spm_id_from=333.1007.0.0')
18
        i.fab.fa-bilibili
19
      a(title='twitterb' href='https://twitter.com/Receiver99xkk?t=UoMBRIY0a-csS_gUb9aIRg&s=09')
20
        <i class="fa-brands fa-x-twitter"></i>
21
      a(title='Email' href='https://www.microsoft.com/zh-cn/microsoft-365/outlook/email-and-calendar-software-microsoft-outlook?deeplink=%2fowa%2f0%2f%3fstate%3d1%26redirectTo%3daHR0cHM6Ly9vdXRsb29rLmxpdmUuY29tL21haWwvMC8&sdf=0')
22
        <i class="fa-solid fa-envelope"></i>
23
    .wordcount
24
    - let allword = totalcount(site)
25
    span= 'Almano已经写了 ' + allword + ' 字，'
26
    if isNaN(allword)
27
      - allword= Number(allword.replace('k', ''))
28
      if allword< 50
29
        span= "还在努力更新中.. 加油！加油啦！"
30
      else if allword< 70
31
        span= "好像写完一本 埃克苏佩里 的 《小王子》 了啊"
32
      else if allword< 90
33
        span= "好像写完一本 鲁迅 的 《呐喊》 了啊"
34
      else if allword< 100
35
        span= "好像写完一本 林海音 的 《城南旧事》 了啊"
36
      else if allword< 110
37
        span= "好像写完一本 马克·吐温 的 《王子与乞丐》了！ 了啊"
38
      else if allword< 120
39
        span= "好像写完一本 鲁迅 的 《彷徨》 了啊"
40
      else if allword< 130
41
        span= "好像写完一本 余华 的 《活着》 了啊"
42
      else if allword< 140
43
        span= "好像写完一本 曹禺 的 《雷雨》 了啊"
44
      else if allword< 150
45
        span= "好像写完一本 史铁生 的 《宿命的写作》 了啊"
46
      else if allword< 160
47
        span= "好像写完一本 伯内特 的 《秘密花园》 了啊"
48
      else if allword< 170
49
        span= "好像写完一本 曹禺 的 《日出》 了啊"
50
      else if allword< 180
51
        span= "好像写完一本 马克·吐温 的 《汤姆·索亚历险记》 了啊"
52
      else if allword< 190
53
        span= "好像写完一本 沈从文 的 《边城》 了啊"
54
      else if allword< 200
55
        span= "好像写完一本 亚米契斯 的 《爱的教育》 了啊"
56
      else if allword< 210
57
        span= "好像写完一本 巴金 的 《寒夜》 了啊"
58
      else if allword< 220
59
        span= "好像写完一本 东野圭吾 的 《解忧杂货店》 了啊"
60
      else if allword< 230
61
        span= "好像写完一本 莫泊桑 的 《一生》 了啊"
62
      else if allword< 250
63
        span= "好像写完一本 简·奥斯汀 的 《傲慢与偏见》 了啊"
64
      else if allword< 280
65
        span= "好像写完一本 钱钟书 的 《围城》 了啊"
66
      else if allword< 300
67
        span= "好像写完一本 张炜 的 《古船》 了啊"
68
      else if allword< 310
69
        span= "好像写完一本 茅盾 的 《子夜》 了啊"
70
      else if allword< 320
71
        span= "好像写完一本 阿来 的 《尘埃落定》 了啊"
72
      else if allword< 340
73
        span= "好像写完一本 艾米莉·勃朗特 的 《呼啸山庄》 了啊"
74
      else if allword< 350
75
        span= "好像写完一本 雨果 的 《巴黎圣母院》 了啊"
76
      else if allword< 360
77
        span= "好像写完一本 东野圭吾 的 《白夜行》 了啊"
78
      else
79
        span= "好像写完一本我国著名的 四大名著 了！！！"
80
    else
81
      span= "还在努力更新中.. 加油！加油啦！"
82
  #footer-right
83
    .footer-totop
84
      i.fas.fa-chevron-up(onclick='scrollToTop()')
85
    .footer-info
86
      p= '使用Hexo框架 | 本站基于butterfly主题魔改'
87

88
      a(title='萌ICP备号 20240146' href='https://icp.gov.moe/?keyword=20240146') #[img(src='/img/footer_moe.png' alt='备案图标' style='height: 16px;margin-right: 3px;filter: grayscale(1);')]萌ICP备号: 20240146号
89

90
      a(title='喵喵ICP备案: 20240008号' href='https://www.nyaicp.xyz/?id=20240008" target="_blank"') #[img(src='https://520524.xyz/icptb/' alt='备案图标' style='height: 16px;margin-right: 3px;filter: grayscale(1);')]喵喵ICP备案: 20240008号
91

92
    .footer-service
93
      a(title='腾讯云' href='https://cloud.tencent.com')
94
        img(alt='腾讯云' src='https://cdn.ichika.cc/typora/202211071552681.png!towebp')
95
      a(title='51LA' href='https://www.51.la')
96
        img(alt='51LA' src='https://cdn.ichika.cc/typora/202211071552427.png!towebp')
97
      a(title='CC BY-NC-SA 4.0' href='https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh')
98
        img(alt='CC BY-NC-SA 4.0' src='https://cdn.ichika.cc/typora/202211071552856.png!towebp')

2.在source/css内新建一个custom.css，并参入以下代码：

1
/* 页脚 */
2
.footer_custom_text a{
3
    margin:0 5px;
4
}
5

6
#footer::before{
7
    content:none;
8
}
9

10
#footer-wrap{
11
    color:var(--font-color);
12
    padding:50px 5% 35px 5%;
13
    display:flex;
14
    flex-wrap:wrap;
15
    background:var(--ichika-footer-bg);
16
    position:relative;
17
}
18

19
#footer-wrap > div{
20
    width:50%;
21
}
22

23
#footer-left{
24
    text-align:left
25

26
}
27

28
.footer-title{
29
    font-size:1.5rem;
30
    font-weight:bold;
31
}
32

33
.footer-copyright{
34
    font-size:1rem;
35
    font-weight:normal;
36
}
37

38
#footer-wrap .footer-button {
39
    display: flex;
40
    margin: 15px 0;
41
}
42

43
#footer-wrap .footer-button > a {
44
    font-size: 1.3rem;
45
    margin-right:24px;
46
    transition: 0.2s;
47
    background: black;
48
    width: 40px;
49
    height: 40px;
50
    display: flex;
51
    border-radius: 50%;
52
    color: white;
53
}
54

55
#footer-wrap .footer-button > a:hover{
56
    background: pink;
57
    transition:0.2s;
58
    text-decoration-line: none;
59
}
60

61
#footer-wrap .footer-button > a i{
62
    margin:auto;
63
    margin-left: 9.5px;
64
    margin-bottom: 1px;
65
    line-height:42px;
66
}
67

68
#footer-wrap .iconfont{
69
    font-size:1.3rem;
70
}
71

72
#footer-right {
73
    text-align: right;
74
    height: max-content;
75
    margin-top: auto;
76
}
77

78
#footer-right p,#footer-right a{
79
    color:var(--ichika-font-grey);
80
}
81

82
.footer-totop {
83
    position: absolute;
84
    top: 20px;
85
    left: 50%;
86
    transform: translateX(-50%);
87
}
88

89
.footer-totop i {
90
    font-size: 2rem;
91
    animation: footerToTop 1.2s linear infinite;
92
}
93

94
.footer-info p{
95
    font-size:14px;
96
    margin:0;
97
}
98

99
.footer-info a{
100
    margin-left:20px;
101
    transition:0.2s;
102
}
103

104
.footer-info a:hover{
105
    color:var(--ichika-color)!important;
106
    transition:0.2s;
107
}
108

109
.footer-info a:hover img{
110
    filter: none!important;
111
    transition:0.2s;
112
}
113

114
.footer-service img{
115
    height:20px;
116
    filter:grayscale(1);
117
    margin-left:20px;
118
    margin-top:10px;
119
    transition:0.2s;
120
}
121

122
.footer-service img:hover{
123
    filter:none;
124
    transition:0.2s;
125
}
126

127
@keyframes footerToTop{
128
    0%{
129
        transform:translateY(0);
130
    }
131
    60% {
132
        transform: translateY(-25%);
133
    }
134
    100% {
135
        transform: translateY(0);
136
    }
137
}
138

139
@media screen and (max-width:768px) {
140
    #footer-wrap > div {
141
        width: 100%;
142
        text-align:center;
143
    }
144

145
    #footer-wrap .footer-button > a{
146
        margin:0 auto;
147
    }
148
}

3.在source/js内新建一个custom.js文件，参入以下代码：

1
function scrollToTop() {
2
    btf.scrollToDest(0, 500);
3
}

Butterfly_一图流背景与页脚美化

https://mizuki.mysqil.com/posts/butterfly_一图流背景与页脚美化/

作者

Almango

发布于

2024-10-03

许可协议

CC BY-NC-SA 4.0

C++数据结构_单链表的实例剖析与应用1【6】

分享我在电脑内的学习与开发环境

ALMANGO

一图流背景#

代码#

页脚美化#

代码#