stellar主题添加置顶轮播功能
酷小呵博客 kuhehe.top 谢谢支持!
具体改动可以查看 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 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 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 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 .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 opacity 0.2 transition all .3s .swiper-pagination-bullet-active opacity 1 background 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 .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 中引用
💢 修改 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()) { 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)); }); } } 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 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 , pagination : { el : '.blog-slider__pagination' , clickable : true , } }); swiper_container.onmouseenter = function ( ) { swiper.autoplay .stop (); }; swiper_container.onmouseleave = function ( ) { swiper.autoplay .start (); } }); } 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 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/g aoyanliang/cdn@main/ blog/img/ post/hello1.jpg
原文参考(图片)