butterfly主题魔改09：页脚美化和右下角按钮设置
01 页脚自定义文本
博客根目录下_config.butterfly.yml文件
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
footer:
owner:
enable: false
since: 2025
custom_text: |
<style>
.footer {
text-align: center;
position: relative;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.social-links i {
color:
}
.social-link {
color:
font-size: 1.2rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(138, 43, 226, 0.1);
}
.social-link:hover {
color:
background:
transform: translateY(-3px) scale(1.2);
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
text-decoration: none !important;
}
.footer p {
margin: 0.5rem 0;
line-height: 1;
}
.copyright {
font-size: 1.1rem;
color:
font-weight: 400;
}
.tagline {
font-size: 0.8rem;
color:
font-style: italic;
font-weight: 500;
}
.visitor-count {
font-size: 0.75rem;
color: rgba(219, 142, 255, 0.658);
font-weight: 300;
}
font-weight: bold;
}
</style>
<div class="footer">
<div class="social-links">
<a href="https://github.com/kukual" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="GitHub" title="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="https://blog.csdn.net/weixin_74811095" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="CSDN" title="CSDN">
<i class="fas fa-code"></i>
</a>
<a href="https://www.xiaohongshu.com/user/profile/5e8a0aae0000000001002ce4" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="小红书" title="小红书">
<i class="fas fa-book"></i>
</a>
<a href="https://space.bilibili.com/498478848" class="social-link" target="_blank" rel="noopener noreferrer" aria-label="bilibili" title="bilibili">
<i class="fab fa-bilibili"></i>
</a>
</div>
<p class="copyright">© 2025 kukualのblog - 所有权利保留</p>
<p class="tagline">> Stay curious, stay hacking, stay anime! <</p>
<p class="visitor-count">访问量: <span id="visitorCount">1024</span> | 你是第 <span id="dailyVisitor">1</span> 位今日访客</p>
</div>
<script>
// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 模拟访问量增长
function updateVisitorCount() {
const countElement = document.getElementById('visitorCount');
let count = parseInt(countElement.textContent) || 1024;
// 从localStorage获取或初始化计数
const storedCount = localStorage.getItem('totalVisitors');
if (storedCount) {
count = parseInt(storedCount);
countElement.textContent = count;
}
// 每日访客计数
const today = new Date().toDateString();
const dailyData = JSON.parse(localStorage.getItem('dailyVisitors') || '{"date":"", "count":0}');
if (dailyData.date !== today) {
dailyData.date = today;
dailyData.count = 0;
}
dailyData.count += 1;
document.getElementById('dailyVisitor').textContent = dailyData.count;
localStorage.setItem('dailyVisitors', JSON.stringify(dailyData));
// 每30秒随机增加访问量
setInterval(() => {
count += Math.floor(Math.random() * 3);
countElement.textContent = count;
localStorage.setItem('totalVisitors', count.toString());
}, 30000);
}
updateVisitorCount();
// 添加点击动画效果
const socialLinks = document.querySelectorAll('.social-link');
socialLinks.forEach(link => {
link.addEventListener('click', function() {
this.style.transform = 'scale(0.9)';
setTimeout(() => {
this.style.transform = '';
}, 300);
});
});
});
</script>
copyright: false
|
02 右下角按钮设置
博客根目录下_config.butterfly.yml文件
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
|
rightside_bottom:
translate:
enable: false
default: 繁
defaultEncoding: 2
translateDelay: 0
msgToTraditionalChinese: '繁'
msgToSimplifiedChinese: '簡'
readmode: true
darkmode:
enable: true
button: true
autoChangeMode: false
start:
end:
rightside_scroll_percent: true
rightside_item_order:
enable: false
hide:
show:
|
微信
