具体改动可以查看 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

原文参考(图片)

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~