具体改动可以查看 MR

💢 添加自定义css

themes/stellar/source/css/_custom/ 目录中添加 swiperstyle.styl 文件

swiperstyle.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
205
206
207
208
209
210
211
212
213
214
215
div#swiper_container
background var(--card);
z-index auto
.blog-slider
position relative
border-radius 18px 18px 18px 18px
margin auto
padding: 10px
transition all .3s

.blog-slider__item
display flex
align-items center
&.swiper-slide-active
.blog-slider__img
img
opacity 1
transition-delay .3s
.blog-slider__content
& > *
opacity 1
transform none
& > *:nth-child(1)
transition-delay 0.3s
& > *:nth-child(2)
transition-delay 0.4s
& > *:nth-child(3)
transition-delay 0.5s
& > *:nth-child(4)
transition-delay 0.6s
& > *:nth-child(5)
transition-delay 0.7s
& > *:nth-child(6)
transition-delay 0.8s
& > *:nth-child(7)
transition-delay 0.9s
& > *:nth-child(8)
transition-delay 1s
& > *:nth-child(9)
transition-delay 1.1s
& > *:nth-child(10)
transition-delay 1.2s
& > *:nth-child(11)
transition-delay 1.3s
& > *:nth-child(12)
transition-delay 1.4s
& > *:nth-child(13)
transition-delay 1.5s
& > *:nth-child(14)
transition-delay 1.6s
& > *:nth-child(15)
transition-delay 1.7s



.blog-slider__img
width 300px
flex-shrink 0
height 200px
padding 10px
border-radius 20px
transform translateX(0px)
overflow hidden
&:after
content ''
position absolute
top 0
left 0
width 100%
height 80%
border-radius 15px
opacity 0.8
img
width 100%
height 80%
object-fit cover
display block
opacity 0
border-radius 5px
transition all .3s

.blog-slider__content
padding-right 50px
padding-left 25px
& > *
opacity 0
transform translateY(25px)
transition all .4s


.blog-slider__code
text-align left
color var(--text-p3)
margin-bottom 10px
display block
font-weight 500

.blog-slider__title
text-align left
font-size $fs-h3
font-weight 700
color var(--text-p1)
margin-bottom 15px
-webkit-line-clamp 1
display -webkit-box
overflow hidden
-webkit-box-orient vertical

.blog-slider__text
text-align left
font-size $fs-h5
color var(--text-p3)
-webkit-line-clamp 3
display -webkit-box
overflow hidden
-webkit-box-orient vertical
margin-bottom 15px
line-height 1.5em
width 100%
word-break break-all
word-wrap break-word

.blog-slider__button
display inline-flex
background-color var(--block)
padding 14px 14px
border-radius 15px
color var(--text-p1)
text-decoration none
font-weight 500
justify-content center
text-align center
letter-spacing 1px
display none
&:hover
background-color var(--block-hover)


.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction
bottom 10px
left 0
width 100%

.blog-slider__pagination
position absolute
z-index 1
right 20px
width 11px !important
text-align center
left auto !important
top 50%
bottom auto !important
transform translateY(-50%)
&.swiper-pagination-bullets
.swiper-pagination-bullet
margin 8px 0 !important
.swiper-pagination-bullet
width 11px
height 11px
display block
border-radius 10px
background #858585
opacity 0.2
transition all .3s
.swiper-pagination-bullet-active
opacity 1
background $color-theme
height 30px

@media screen and (max-width: 600px)
.blog-slider__pagination
transform translateX(-50%)
left 50% !important
top 320px
width 100% !important
display flex
justify-content center
align-items center

.blog-slider__pagination
&.swiper-pagination-bullets
.swiper-pagination-bullet
margin 0 5px !important

.blog-slider__pagination
.swiper-pagination-bullet-active
height 11px
width 30px

.blog-slider__button
display inline-flex
width 70%
.blog-slider__text
margin-bottom 40px

.blog-slider
min-height 350px
height auto
margin-bottom 10px

.blog-slider__content
margin-top 20px
text-align center
padding 0 30px

.blog-slider__item
flex-direction column

.blog-slider__img
.blog-slider__content
padding-left 10px
padding-right 10px

.blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
top 230px
本站swiperstyle.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
205
206
207
208
209
210
211
212
213
214
215
216
217
div#swiper_container
background var(--card);
z-index auto
.blog-slider
position relative
border-radius 18px 18px 18px 18px
margin auto
padding: 10px
transition all .3s

.blog-slider__item
display flex
align-items center
&.swiper-slide-active
.blog-slider__img
img
opacity 1
transition-delay .3s
.blog-slider__content
& > *
opacity 1
transform none
& > *:nth-child(1)
transition-delay 0.3s
& > *:nth-child(2)
transition-delay 0.4s
& > *:nth-child(3)
transition-delay 0.5s
& > *:nth-child(4)
transition-delay 0.6s
& > *:nth-child(5)
transition-delay 0.7s
& > *:nth-child(6)
transition-delay 0.8s
& > *:nth-child(7)
transition-delay 0.9s
& > *:nth-child(8)
transition-delay 1s
& > *:nth-child(9)
transition-delay 1.1s
& > *:nth-child(10)
transition-delay 1.2s
& > *:nth-child(11)
transition-delay 1.3s
& > *:nth-child(12)
transition-delay 1.4s
& > *:nth-child(13)
transition-delay 1.5s
& > *:nth-child(14)
transition-delay 1.6s
& > *:nth-child(15)
transition-delay 1.7s



.blog-slider__img
width 300px
flex-shrink 0
height 200px
padding 10px
border-radius 20px
transform translateX(0px)
overflow hidden
&:after
content ''
position absolute
top 0
left 0
width 100%
height 80%
border-radius 15px
opacity 0.8
img
width 100%
height 80%
object-fit cover
display block
opacity 0
border-radius 5px
transition all .3s

.blog-slider__content
padding-right 50px
padding-left 25px
& > *
opacity 0
transform translateY(25px)
transition all .4s


.blog-slider__code
text-align left
font-size $fs-h5
color var(--text-p4)
margin-bottom 10px
display block
font-weight 500

.blog-slider__title
text-align left
font-size $fs-h3
font-weight 700
color var(--text-p1)
margin-bottom 15px
-webkit-line-clamp 1
display -webkit-box
overflow hidden
-webkit-box-orient vertical

.blog-slider__text
text-align left
font-size $fs-h5
color var(--text-p3)
-webkit-line-clamp 3
display -webkit-box
overflow hidden
-webkit-box-orient vertical
margin-bottom 15px
line-height 1.5em
width 100%
word-break break-all
word-wrap break-word

.blog-slider__button
display inline-flex
background-color var(--block)
padding 10px 10px
border-radius 15px
color var(--text-p1)
text-decoration none
font-weight 500
justify-content center
text-align center
letter-spacing 1px
display none
&:hover
background-color #00FFFF


.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction
bottom 10px
left 0
width 100%

.blog-slider__pagination
position absolute
z-index 1
right 20px
width 11px !important
text-align center
left auto !important
top 50%
bottom auto !important
transform translateY(-50%)
&.swiper-pagination-bullets
.swiper-pagination-bullet
margin 8px 0 !important
.swiper-pagination-bullet
width 11px
height 11px
display block
border-radius 10px
background #00FF00
opacity 0.2
transition all .3s
.swiper-pagination-bullet-active
opacity 1
background #FFA500
height 30px

@media screen and (max-width: 600px)
.blog-slider__pagination
transform translateX(-50%)
left 50% !important
top 320px
width 100% !important
display flex
justify-content center
align-items center

.blog-slider__pagination
&.swiper-pagination-bullets
.swiper-pagination-bullet
margin 0 5px !important

.blog-slider__pagination
.swiper-pagination-bullet-active
height 11px
width 30px

.blog-slider__button
display inline-flex
width 70%
background #87CEFA
.blog-slider__text
margin-bottom 10px

.blog-slider
min-height 350px
height auto
margin-bottom 10px

.blog-slider__content
margin-top 20px
text-align center
padding 0 30px

.blog-slider__item
flex-direction column

.blog-slider__img
.blog-slider__content
padding-left 10px
padding-right 10px

.blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets
top 230px

添加自定义文件之后需要在 themes/stellar/source/css/main.styl 中引用

1
2
// 自定义样式
@import '_custom/*'

💢 修改 themes/stellar/layout/_partial/scripts/index.ejs

添加如下代码:

1
2
3
4
5
// -------- start 自定义首页文章轮播
if ('<%- theme.customSwiperTopArticle.enable %>' == 'true') {
stellar.plugins.customSwiperTopArticle = Object.assign(<%- JSON.stringify(theme.customSwiperTopArticle) %>);
}
// -------- end 自定义首页文章轮播

💢 修改 themes/stellar/layout/index.ejs

点击展开代码
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
function layout_post_pin_article(type,post,content){
var el='';
if(post.post===undefined){
post.post='article';
}
//文章简述
var articleDescription='';
if(post.excerpt){
articleDescription=strip_html(post.excerpt)
}else if(post.description){
articleDescription=post.description
}else if(post.content&&theme.article.auto_excerpt>0){
articleDescription=truncate(strip_html(post.content),{length:theme.article.auto_excerpt})
}

el +='<div class="blog-slider__item swiper-slide">';
el +='<a class="blog-slider__img" href="' + url_for(post.link || post.path) + '">';
el +='<img width="48" height="48" no-lazy src="' + post.swiper_thumbnail + '" alt=""/>';
el +='</a>';
el +='<div class="blog-slider__content">';
el +='<span class="blog-slider__code">'+ date(post.date,config.date_format) +'</span>';
el +='<a class="blog-slider__title" href="' + url_for(post.link || post.path) + '" title="'+ (post.title || post.seo_title) +'">'+(post.title || post.seo_title) +'</a>';
el +='<div class="blog-slider__text">'+articleDescription +'</div>';
el +='<a class="blog-slider__button" href="' + url_for(post.link || post.path) + '">详情</a>';
el +='</div>';
el +='</div>';
return el;
}

function layout_posts(partial) {
var el = '';
el += '<div class="post-list post">';
if (is_home()) {
// pinned posts
const pinned = site.posts.filter(function(post){
return post.pin !== undefined;
}).sort((config.index_generator && config.index_generator.order_by) || '-date');

if (page.current === 1) {
el += '<div id="_custom-post-categories"></div>';
if(theme.customSwiperTopArticle.enable){
el+='<div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container">';
el+='<div class="blog-slider__wrp swiper-wrapper">';
pinned.forEach((post,i)=>{
el+=layout_post_pin_article('post',post,partial(post));
});
el+='</div>';
el+='<div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div>';
el+='</div>';
}else{
pinned.forEach((post,i)=>{
el += layout_post_card('post',post,partial(post));
});
}
}
// unpinned posts
page.posts.each(function(post){
if (theme.customSwiperTopArticle.enable) {
el += layout_post_card('post', post, partial(post));
}else{
if(post.pin == undefined){
el += layout_post_card('post',post,partial(post));
}
}
})
} else {
page.posts.each(function(post){
el += layout_post_card('post', post, partial(post));
})
}
el += '</div>';
return el;
}

💢 修改 themes/stellar/source/js/main.js

修改插件 swipper部分 if (stellar.plugins.swiper)

点击展开代码
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
// ------------------- start 首页置顶文章轮播  新增
if (stellar.plugins.swiper) {
const swiper_container = document.getElementById('swiper_container');
if (swiper_container !== undefined) {
stellar.loadCSS(stellar.plugins.customSwiperTopArticle.css);
stellar.loadScript(stellar.plugins.customSwiperTopArticle.js, {defer:true}).then(function () {
var swiper = new Swiper('.blog-slider', {
passiveListeners: true,
spaceBetween: 30,
effect: 'fade',
loop: true,
autoplay: {
disableOnInteraction: true,
delay: 3000
},
mousewheel: false,
// autoHeight: true,
pagination: {
el: '.blog-slider__pagination',
clickable: true,
}
});
swiper_container.onmouseenter = function() {
swiper.autoplay.stop();
};
swiper_container.onmouseleave = function() {
swiper.autoplay.start();
}
});
}
// ------------------- end 首页置顶文章轮播 新增

// swiper
const swiper_api = document.getElementById('swiper-api');
if (swiper_api != undefined) {
stellar.loadCSS(stellar.plugins.swiper.css);
stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
spaceBetween: 8,
centeredSlides: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})
}
}

💢 在主题配置文件中添加如下配置

1
2
3
4
5
6
# 自定义swiper文章置顶
customSwiperTopArticle:
enable: true
css: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/css/swiper/swiper.min.css
js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper.min.js
init_js: https://cdn.jsdelivr.net/gh/XuxuGood/simple-blog-cdn@main/js/swiper/swiper_init.js

💢 正式使用

在文章中添加如下内容即可在轮播中展示

1
2
pin: true
swiper_thumbnail: https://cdn.jsdelivr.net/gh/gaoyanliang/cdn@main/blog/img/post/hello1.jpg

原文参考(图片)