AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往tianli博客
店长原教程：源计划-方舟：首页轮播图
点击查看预览效果
布置教程
这里如果有安装其它轮播图插件的用
cmd终端卸载，最好用管理员身份执行，可以自己去根目录下的package.json文件下查询你有安装哪些插件。1
2# 后面加载为你安装的swiper轮播图插件
npm uninstall hexo-butterfly-swiper --save本篇需要用到
iconfont作为卡片底部的装饰性图标。去阿里图标库加载引入到文章，务必确保symbol方案能够使用后再进行下方内容。anzhiyu主题可以直接引入，butterfly主题要引入阿里图标配置项。详情看hexo-butterfly主题美化记录。（引入后放入如下位置。）
anzhiyu主题
1
2
3
4icons:
ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
fontawesome: true #是否启用fontawesome6图标
fontawesome_animation_css: #fontawesome_animation 如果有就会加载，示例值：https://npm.elemecdn.com/[email protected]/lib/assets/font-awesome-animation.min.cssbutterfly主题
1
2
3
4
5inject:
head:
# - <link rel="stylesheet" href="/css/custom.css"> # 自定义css文件
bottom:
- <script src="//at.alicdn.com/t/c/font_3855261_r5lzgvwjjsm.js"></script>
在
[Blogroot]\themes\butterfly\scripts\helpers\目录下新建ark_icon.js，这个js的作用是返回一个随机的图标值，注意以下icon[]内部的图标均为个人图标库内的图标名称。请务必记得替换成你自己的图标。且这是个内部函数，必须保证在scripts目录下，不要自作聪明建在别的目录还到inject配置项去引入。1
2
3
4
5
6
7
8
9
10hexo.extend.helper.register('arkicon', function () {
var icon = [
'#icon-a-42_data-analysisai-m-olap',
'#icon-a-68_devcloud-collaboration',
'#icon-a-355_wsa',
'#icon-V',
]
var index = Math.floor(Math.random()*icon.length);
return icon[index]
});在
[Blogroot]\themes\butterfly\scripts\helpers\目录下新建swiperbar.js文件,这个脚本的作用是返回在front-matter设置了swiper_index数值的文件，如果有在md写过这个应该很熟悉。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
hexo.extend.helper.register('swiper_list', function (locals) {
var posts_list = hexo.locals.get('posts').data;
var swiper_list = []
// 若文章的front_matter内设置了index和描述，则将其放到swiper_list内
for (var item of posts_list) {
if (item.swiper_index) {
swiper_list.push(item)
}
}
// 对swiper_list进行处理，使其按照index大小进行排序
function sortNumber(a, b) {
return a.swiper_index - b.swiper_index
}
swiper_list = swiper_list.sort(sortNumber);
// 排序反转，使得数字越大越靠前
swiper_list = swiper_list.reverse();
return swiper_list;
})在
[Blogroot]\themes\butterfly\layout\includes\custom\目录下新建ark_swiperBar.pug，下面的有些内容和店长的不一样了，这里是进行了更改过的样式。这里使用的是安知鱼的主题的可以不用创建另一个
custom文件夹，可以把它放入到anzhiyu文件夹内，用这个目录的要更改index.pug路径（看第6个布置）。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.recent-post-item#swiperBar
#ark-swiper-container
.swiper-wrapper.ark-swiper-wrapper
//- 文章卡片
if theme.pjax.enable
each item in swiper_list()
//- 内容版块
.swiper-slide.ark-swiper-item
//- 封面
.ark-swiper-item-cover
img.article-cover(src=item.cover title='' onerror=`this.src=` + theme.swiperBar.error_img + `; this.onerror = null;`)
//- 时间
if (theme.swiperBar.timemode === 'updated' )
.ark-swiper-item-time
span= item.updated.format('YYYY-MM-DD')
else
.ark-swiper-item-time
span= item.date.format('YYYY-MM-DD')
//- 标题和描述
.ark-swiper-item-info
a.ark-swiper-item-title(onclick=`pjax.loadUrl("` + item.path + `");` title='')
.ark-swiper-item-title-link= item.title
a.ark-swiper-item-description(onclick=`pjax.loadUrl("` + item.path + `");` title='')
.ark-swiper-item-description-text!= item.description ? item.description : theme.swiperBar.default_descr
//- 装饰图标盲盒
svg.icon.ark-swiper-item-decoration(aria-hidden="true")
use(xlink:href=arkicon())
else
each item in swiper_list()
//- 内容版块
.swiper-slide.ark-swiper-item
//- 封面
a.ark-swiper-item-cover(href=item.path title='')
img.article-cover(src=item.cover title='' onerror=`this.src=` + theme.swiperBar.error_img + `; this.onerror = null;`)
//- 时间
if (theme.swiperBar.timemode === 'updated' )
.ark-swiper-item-time
span='updated:'
span= item.updated.format('YYYY-MM-DD')
else
.ark-swiper-item-time
span='updated:'
span= item.date.format('YYYY-MM-DD')
//- 标题和描述
.ark-swiper-item-info
a.ark-swiper-item-title(href=item.path title='')
.ark-swiper-item-title-link= item.title
a.ark-swiper-item-description(href=item.path title='')
.ark-swiper-item-description-text!= item.description ? item.description : theme.swiperBar.default_descr
//- 装饰图标盲盒
svg.icon.ark-swiper-item-decoration(aria-hidden="true")
use(xlink:href=arkicon())
.swiper-pagination.ark-swiper-pagination
script(defer src=url_for(theme.swiperBar.swiper_js))
script(defer data-pjax src=url_for(theme.swiperBar.swiper_init_js))到
[Blogroot]\themes\butterfly\layout\目录下找到index.pug文件，在其中引入轮播图组件。强调：这里用的路径自行更改，不要后面报错了都不知道是哪里的问题。
1
2
3
4
5
6
7
8
9
10
11extends includes/layout.pug
block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
+ if theme.swiperBar.enable
+ !=partial('includes/custom/ark_swiperBar', {}, {cache: true})
if theme.categoryBar.enable
!=partial('includes/custom/categoryBar', {}, {cache: true})
+postUI
include includes/pagination.pug在
[Blogroot]\themes\butterfly\source\css\_layout\目录下新建ark_swiper_bar.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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204//default color:
:root
--ark-post-item-screen: rgba(61, 146, 204,0.6) //描述卡片背景
--ark-post-item-font-color: #fff //字体颜色
--ark-post-item-box-shadow: rgba(111, 160, 225,0.8) //边框光晕颜色
[data-theme="dark"]
--ark-post-item-screen: rgba(61, 146, 204,0.6) //描述卡片背景
--ark-post-item-font-color: rgb(233, 233, 233)//字体颜色
--ark-post-item-box-shadow: rgba(252, 252, 252, 0.8) //边框光晕颜色
.icon
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
.recent-post-item
&#swiperBar
width: 100%;
position: relative
#ark-swiper-container
width: 100%;
height: 230px;
overflow: hidden;
position: relative;
border-radius: 15px;
.ark-swiper-wrapper
width: 100%;
height: 200px;
display: flex;
flex-direction: row;
.ark-swiper-item
position: relative
width: 100%;
height: 260px;
display: flex;
flex-direction: row;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 0 3px inset var(--ark-post-item-box-shadow);
.ark-swiper-item-cover
height: 100%;
display: flex;
position: absolute;
top: 0
left: 0
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 0
img
object-fit: cover;
width: 100%;
height: 100%
z-index: 1;
opacity: 0.8
.ark-swiper-item-time
width: 100%;
color: var(--ark-post-item-font-color);
font-size: 25px;
text-shadow: 2px 2px 3px black;
background: var(--heo-theme);
font-family: 'UnidreamLED';
display: flex;
position: absolute;
height: 43px;
top: calc(50% - -90px);
align-items: center;
justify-content: center;
z-index: 2;
span
margin: 0 3px
.ark-swiper-item-info
flex-direction: column;
background: var(--heo-zhuti)
height: 100%;
display: flex;
position: absolute
top: 0
right: 0
align-items: center;
justify-content: space-between;
flex-direction: column;
overflow: hidden;
z-index: 0;
a.ark-swiper-item-title
width: 100%;
height: 50%;
color: var(--ark-post-item-font-color);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.ark-swiper-item-title-link
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
ark_post_item_link_hover()
.ark-swiper-item-description
color: var(--ark-post-item-font-color);
display: flex;
text-align: start;
width: 100%;
height: 50%;
justify-content: center;
align-items: center;
.ark-swiper-item-description-text
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
.ark-swiper-item-decoration
width: 130px;
height: 130px;
opacity: 1;
position: absolute;
top: calc(50% - 80px);
left: calc(50% - 65px);
z-index: -1
animation: avatar_turn_around 1.5s ease-in-out infinite;
display: inline-block;
.ark-swiper-pagination
bottom: 0px;
left: 0;
right: 0;
margin: 40px auto;
//宽屏样式
@media screen and (min-width:768px)
.recent-post-item
&#swiperBar
height: 260px;
&::after
content: ""
display: block
height: 86%
width: 100%
position: absolute
background:var(--heo-theme)
z-index: 3
left: 0
top: 0
clip-path: polygon(50% 50%, 45px 50%, 45px 45px, 60px 45px, 65px 40px, 40px 40px, 40px calc(50% - 10px), 45px calc(50% - 10px), 45px 50%, 25px 50%, 25px calc(50% - 15px), 10px calc(50% - 15px), 10px calc(50% - 10px), 25px calc(50% - 10px), 25px calc(50% - 2.5px), 0 calc(50% - 2.5px), 0 50%, 50% 50%, 45px 50%, 45px calc(100% - 45px), 60px calc(100% - 45px), 65px calc(100% - 40px), 40px calc(100% - 40px), 40px calc(50% + 10px), 45px calc(50% + 10px), 45px 50%, 25px 50%, 25px calc(50% + 15px), 10px calc(50% + 15px), 10px calc(50% + 10px), 25px calc(50% + 10px), 25px calc(50% + 2.5px), 0 calc(50% + 2.5px), 0 50%, 50% 50%, calc(100% - 45px) 50%, calc(100% - 45px) 45px, calc(100% - 60px) 45px, calc(100% - 65px) 40px, calc(100% - 40px) 40px, calc(100% - 40px) calc(50% - 10px), calc(100% - 45px) calc(50% - 10px), calc(100% - 45px) 50%, calc(100% - 25px) 50%, calc(100% - 25px) calc(50% - 15px), calc(100% - 10px) calc(50% - 15px), calc(100% - 10px) calc(50% - 10px), calc(100% - 25px) calc(50% - 10px), calc(100% - 25px) calc(50% - 2.5px), 100% calc(50% - 2.5px), 100% 50%, 50% 50%, calc(100% - 45px) 50%, calc(100% - 45px) calc(100% - 45px), calc(100% - 60px) calc(100% - 45px), calc(100% - 65px) calc(100% - 40px), calc(100% - 40px) calc(100% - 40px), calc(100% - 40px) calc(50% + 10px), calc(100% - 45px) calc(50% + 10px), calc(100% - 45px) 50%, calc(100% - 25px) 50%, calc(100% - 25px) calc(50% + 15px), calc(100% - 10px) calc(50% + 15px), calc(100% - 10px) calc(50% + 10px), calc(100% - 25px) calc(50% + 10px), calc(100% - 25px) calc(50% + 2.5px), 100% calc(50% + 2.5px), 100% 50%, 50% 50%)
#ark-swiper-container
.ark-swiper-wrapper
.ark-swiper-item
.ark-swiper-item-cover
width: 100%;
.ark-swiper-item-time
transform: rotateZ(-0deg);
.ark-swiper-item-info
width: 100%;
text-shadow: 2px 2px 3px #000;
a.ark-swiper-item-title
padding: 30px 40px;
font-size: 30px;
line-height: 50px;
.ark-swiper-item-title-link
-webkit-line-clamp: 2
.ark-swiper-item-description
padding: 0px 40px 70px;
font-size: 16px;
line-height: 30px;
.ark-swiper-item-description-text
-webkit-line-clamp: 3
@media screen and (max-width:768px)
.recent-post-item
&#swiperBar
height: 200px;
padding: 0px 0px
#ark-swiper-container
width: 100%;
height: 170px;
position: relative;
.ark-swiper-wrapper
.ark-swiper-item
.ark-swiper-item-cover
width: calc(50% + 50px);
clip-path: polygon(0 0,100% 0,calc(100% - 100px) 100%,0 100%);
.ark-swiper-item-time
transform: rotateZ(-69deg);
top: calc(50% - 20px);
height: 25px;
font-size: 17px;
.ark-swiper-item-info
width: calc(50% + 50px);
clip-path: polygon(100% 0,100% 100%,0 100%,100px 0 );
padding: 0 0 0 60px;
a.ark-swiper-item-title
padding: 10px 16px 0 45px;
font-size: 16px;
line-height: 20px;
.ark-swiper-item-title-link
-webkit-line-clamp: 2
.ark-swiper-item-description
padding: 0px 15px 10px 5px;
font-size: 14px;
line-height: 20px;
.ark-swiper-item-description-text
padding-bottom: 100px
-webkit-line-clamp: 4
#ark-swiper-container
.ark-swiper-pagination
bottom: 0px;
margin: 0px auto;在主题配置文件
[Blogroot]/_config.butterfly.yml中添加配置项用以控制轮播图。1
2
3
4
5
6
7
8
9
10# 源计划-方舟：首页轮播图
# see https://akilar.top/posts/658f52d0/
swiperBar:
enable: true # 开关
timemode: updated #date/updated
error_img: /img/loading.gif #默认封面。记得换成自己的。
default_descr: 就算再怎么看我也不知道怎么描述它好啦！
swiper_css: https://npm.elemecdn.com/[email protected]/swiper-bundle.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/[email protected]/swiper-bundle.min.js #swiper js依赖
swiper_init_js: /js/custom/swiper_init.js # swiper初始化方法在你的创建的文章
Front-matter下写如下：1
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
如果想要颜色随机变化，添加下面的链接样式文件（也可以自己拷贝到本地进行修改）。
1
- <script src="https://npm.elemecdn.com/[email protected]/categoryBar.js"></script>
相关推荐
评论
匿名评论隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
冰梦
公告