点击查看更新记录
更新记录
2023-01-10:内测版
- 重写了页脚版块，换成异形边框
- 仅保留了建站时间为必要要素
- 提供一个轮播图版块放置轮播链接，理论上数量无限
点击查看参考教程
| 参考方向 | 教程原贴 |
|---|---|
| 参考了UI风格和配色样式 | Neon-Space-Rainmeter |
| 参考了UI风格和配色样式 | JARVIS-Highpitched-OS |
| 参考了边框样式 | Neon-Space |
| fontawesome图标文档 | fontawesome |
| Flex布局参数解释 | Flex 布局教程:语法篇 - 阮一峰的网络日志 |
| Transition属性实现平滑过渡动画 | CSS3实现伪类hover离开时平滑过渡效果示例 |
| CSS伪类实现三角形绘制 | 纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园 |
| 使用clip-path实现多边形剪裁。 | 不可思议的CSS之clip-path |
| 站内教程：iconfont引入教程 | Hexo引入阿里矢量图标库 |
| swiper中文文档，查看初始化参数 | Swiper中文网 |
页脚、顶栏、菜单栏、加载动画之间的风格牵扯较多，所以我得把他们都写好了才开始发教程。源计划：方舟的风格是很明显的套件，所以我觉得应该是要装就全部装上才好的对吧。
魔改步骤
- 本篇讨论的轮播图的配置项可能与hexo-butterfly-footer-beautify插件的配置项有冲突，如果您曾经安装过该插件或者该插件的衍生插件。请确保您已经卸载了它们。
1
npm uninstall hexo-butterfly-footer-beautify --save
- 本篇沿用了源计划-方舟：首页卡片中用到的部分方案，为保证样式完整，且避免报错，推荐先完成首页卡片的魔改后再考虑使用本方案。
- 本篇需要用到iconfont作为边框底部轮播图的装饰性图标。请先完成前置教程：Hexo引入阿里矢量图标库，务必确保symbol方案能够使用后再进行下方内容。
- 本篇用到了源计划-方舟：首页轮播图中9、10、11步提到的swiper依赖。没有做过的，至少去按照这篇教程完成swiper的引入。否则后面无法正常实现页脚轮播链接的效果。
- 直接重写
[Blogroot]\themes\butterfly\layout\includes\footer.pug,写入以下内容：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#ark-footer-wraper
//- 页脚基本信息
.ark-footer-container
.ark-footer-left-corner
//- 徽标版块
#ark-footer-bdage-container
.ark-footer-bdage.swiper-wrapper
each item in theme.footer.bdageitem
a.ark-bdage-item.swiper-slide(href=url_for(item.link) title=item.message target="_blank")
svg.icon.ark-decoration(aria-hidden="true")
use(xlink:href=`#`+item.icon)
span= item.text
//- 作者信息
if theme.footer.owner.enable
- var now = new Date()
- var nowYear = now.getFullYear()
if theme.footer.owner.since && theme.footer.owner.since != nowYear
.ark-footer-copyright!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
else
.ark-footer-copyright!= `©${nowYear} By ${config.author}`
//- 版权信息
if theme.footer.copyright
.ark-footer-framework-info
span= _p('footer.framework') + ' '
a(href='https://hexo.io')= 'Hexo'
span.footer-separator |
span= _p('footer.theme') + ' '
a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
//- 备案信息
if theme.footer.record.enable
a.ark-footer-record(href=url_for(theme.footer.record.link) title=theme.footer.record.text)!= theme.footer.record.text
//- 留块空白放放自定义信息
if theme.footer.custom_text
.footer_custom_text!=`${theme.footer.custom_text}`
//- 右侧自定义信息
.ark-footer-right-corner#workboard
//- 电子钟版块
script(async src='/js/custom/runtime.js') - 新建
[Blogroot]\themes\butterfly\source\css\_ark_style\ark_footer.styl,写入以下内容,考虑到异形边框的剪裁，在300px以下的效果并不是很好，现在应该很少有这么窄的设备了吧，智能手表就算了。在意的话建议模仿着自己适配下：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
position: relative
background: transparent
background-attachment: scroll
background-position: bottom
background-size: cover
height: 100px;
&::before
content: "";
height: 100px;
position: absolute;
box-shadow: 0 0px 20px var(--card-widget-content-border) inset
width: 100%;
background: var(--card-widget-background);
bottom: 0;
left: 0;
z-index: -1
#ark-footer-wraper
font-family: 'UnidreamLED','TaikoMagic';
position: relative
padding: 0px
width: 100%;
height: 100%
color: var(--card-widget-color)
text-align: center
display: flex;
flex-direction: column;
.ark-footer-container
display: flex;
flex-direction: row;
align-items: center;
height: 100%
width: 100%
.ark-footer-left-corner
display: flex;
height: 100%;
font-size: 14px;
line-height: 14px;
color: var(--card-widget-color)
background: transparent
flex-direction: column;
align-items: flex-start;
justify-content: center;
a
color: var(--card-widget-color)
&:hover
color: var(--ark-post-item-font-hover);
#ark-footer-bdage-container
display: flex;
height: 14px;
width: 180px;
background: transparent;
position: relative;
.ark-bdage-item
height: 14px;
display: flex;
align-items: center;
justify-content: flex-start;
.ark-footer-copyright
.footer-separator
margin: 0 4px
@media screen and (min-width: 768px)
#footer
&::before
border-radius: 0 0 30px 30px
clip-path: polygon(0 0, 40px 0, 60px 20px, 220px 20px, 240px 40px, 320px 40px, 380px calc(100% - 10px), calc(100% - 380px) calc(100% - 10px), calc(100% - 320px) 40px, calc(100% - 240px) 40px, calc(100% - 220px) 20px, calc(100% - 60px) 20px, calc(100% - 40px) 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px))
#ark-footer-wraper
.ark-footer-container
.ark-footer-left-corner
width: 50%;
padding: 25px 0 0 40px
#ark-footer-bdage-container
margin: 0 0 5px 0
.ark-footer-copyright
margin: 0 0 5px 25px
.ark-footer-record
margin: 0 0 5px 50px
.ark-footer-right-corner
display: flex;
height: 100%;
width: 50%;
font-size: 14px;
line-height: 14px
color: var(--card-widget-color)
background: transparent
align-items: flex-end;
justify-content: center;
flex-direction: column;
padding: 25px 40px 0 0
font-family: 'UnidreamLED','TaikoMagic';
position: relative
.ark-footer-reminder
margin: 0 0 5px 0
.ark-footer-timer
margin: 0 25px 5px 0
#ark-site-runtime
margin: 0 50px 5px 0
&::before
content: "";
position: absolute;
width: 100%;
height: 5px;
right: 20px;
bottom: 18px;
z-index: -1;
background: linear-gradient(to right,transparent, var(--ark-post-item-border), transparent);
transform: skewX(-45deg);
@media screen and (max-width: 768px)
#footer
&::before
border-radius: 0 0 0 30px
clip-path: polygon(0 0, 40px 0, 60px 20px, 220px 20px, 240px 40px, 320px 40px, 380px calc(100% - 10px), 100% calc(100% - 10px), 100% 100%, 30px 100%, 0 calc(100% - 30px))
#ark-footer-wraper
.ark-footer-container
.ark-footer-left-corner
width: 100%;
padding: 25px 0 0 40px
#ark-footer-bdage-container
margin: 0 0 5px 0
.ark-footer-copyright
margin: 0 0 5px 25px
.ark-footer-record
margin: 0 0 5px 50px
.ark-footer-right-corner
display: none - 修改
[Blogroot]\themes\butterfly\source\js\custom\swiper_init.js,这个文件在源计划-方舟：首页轮播图中9、10、11步提到过，需要完成那篇的几个依赖引入才行，这个文件以后的魔改会经常见面。所以务必留个印象。在这个文件下面新起一行，注意以前写过的可不要删了。这里我放了一些基本参数实现效果。更多参数可以自行查看Swiper中文网来添加。之所以是每次自己新建而不是通过配置项自动生成是为了节省资源，所有的轮播都放在一个文件里，减少请求次数和页面阻塞。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17//页脚徽标轮播图
var ark_footer_swiper = new Swiper("#ark-footer-bdage-container", {
direction: "horizontal", //横向切换
loop: true,
updateOnWindowResize: true,
slidesPerView: 1,
spaceBetween: 10,
mousewheel: true,
effect : 'fade', //渐隐切换
fadeEffect: {
crossFade: true,
},
autoplay: {
delay: 3000,//3秒切换一次
pauseOnMouseEnter: true, //鼠标进入停止切换，离开恢复切换
},
}); - 新建
[Blogroot]\themes\butterfly\source\js\custom\runtime.js,这个文件是为了实现页脚右侧的建站时间计算。相关内容其实在Native JS Timer-原生JS实现页脚计时器那篇里提到过。记得看js里的注释改成自己的站点内容。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
40setInterval(() => {
let create_time = Math.round(new Date('2019-04-17 00:00:00').getTime() / 1000); //在此行修改建站时间
let timestamp = Math.round((new Date().getTime()) / 1000);
let second = timestamp - create_time;
let time = new Array(0, 0, 0, 0, 0);
//格式规范化，个位数前面加0
var nol = function(h){
return h>9?h:'0'+h;
}
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}//年
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}//天
if (second >= 3600) {
time[2] = nol(parseInt(second / 3600));
second %= 3600;
}//时
if (second >= 60) {
time[3] = nol(parseInt(second / 60));
second %= 60;
}//分
if (second > 0) {
time[4] = nol(second);
}//秒
//早上7点到晚上10点营业
if ((Number(time[2])<22) && (Number(time[2])>7)){
currentTimeHtml ="<div class='ark-footer-reminder'>糖果屋营业中</div><div class='ark-footer-timer'>建站时间持续增长中</div><div id='ark-site-runtime'>" + time[0] + ' YEAR ' + time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4] + '</div>';
}
//其余时间打烊
else{
currentTimeHtml ="<div class='ark-footer-reminder'>糖果屋打烊了</div><div class='ark-footer-timer'>建站时间持续增长中</div><div id='ark-site-runtime'>" + time[0] + ' YEAR ' + time[1] + ' DAYS ' + time[2] + ' : ' + time[3] + ' : ' + time[4] + '</div>';
}
//覆写挂载标签的内容
document.getElementById("workboard").innerHTML = currentTimeHtml;
}, 1000); - 修改主题配置文件
[Blogroot]\_config.butterfly.yml的页脚配置项，注意是修改，这个是主题文件中本来就已经有的配置项。找到对应节以后替换内容。轮播图标仅支持iconfont。请务必确保你已经引入了Hexo引入阿里矢量图标库中提到的symbol方案。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# Footer Settings
# --------------------------------------
footer:
owner:
enable: true
since: 2016 #建站年份
# 自定义内容
custom_text:
copyright: false # Copyright of theme and framework
# 备案号
record:
enable: true
text: 浙ICP备-2021026687号
link: https://beian.miit.gov.cn
# 轮播徽标
bdageitem:
- link: https://hexo.io/ #徽标指向网站链接
text: Frame-Hexo #徽标信息
message: 博客框架为Hexo_v6.2.0 #徽标提示语
icon: icon-hexo
- link: https://butterfly.js.org/
text: Theme-Butterfly
message: 主题版本Butterfly_v4.4.0
icon: icon-Butterfly
- link: https://www.jsdelivr.com/
text: CDN-jsDelivr
message: 本站使用JsDelivr为静态资源提供CDN加速
icon: icon-jsdelivr
- link: https://console.dogecloud.com/
text: CDN-dogecloud
message: 本网站由多吉云提供CDN加速服务
icon: icon-DOGE
- link: https://www.netlify.com/
text: Hosted-Netlify
message: 本站默认线路托管于Netlify
icon: icon-netlify
- link: https://github.com/
text: Source-Github
message: 本站项目由Github托管
icon: icon-GitHub
- link: http://creativecommons.org/licenses/by-nc-sa/4.0/
text: Copyright-BY-NC-SA-4
message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
icon: icon-copyright
Invitation
Akilar
725597418
created:14/10/2022
Welcome to Candyhome
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to Akilar's candyhome,wish you a nice day .
评论
