此功能始于Leonus的博客,并感谢其对此之分享。后借sco之手实现此功能,从而能应用于此博客,在此,感谢二位。特将此过程记录下来,以备忘!本教程适用于有一定博客基础以及动手能力的人群。
添加侧边栏
路径:[Blogroot]\source\_data\aside.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| home: noSticky: - class_name: id_name: newYear name: icon: order: 9 html: ' <div class="newYear-slider"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(https://img.haiskyblog.top/b/202401012125434.webp)"></div> <div class="swiper-slide" style="background-image:url(https://img.haiskyblog.top/b/202401012125435.webp)"></div> <div class="swiper-slide" style="background-image:url(https://img.haiskyblog.top/b/202401012125436.webp)"></div> <div class="swiper-slide" style="background-image:url(https://img.haiskyblog.top/b/202401012125437.webp)"></div> </div> </div> <div id="newYear-main"> <div class="mask"></div> <p class="title"></p> <div class="newYear-time"></div> <p class="today" style="text-align: right;"></p> </div>' Sticky:
|
添加css
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
| #newYear { color: white; padding: 0 !important; }
#newYear p, #newYear h3 { font-weight: normal; color: inherit; margin: 0; }
#newYear .item-headline { display: none; }
.newYear-slider { position: absolute; width: 100%; left: 0; top: 0; }
.newYear-slider .swiper-slide { min-height: 160px; background-position: center; background-size: cover; }
#newYear-main { width: 100%; pointer-events: none; padding: 1rem; position: relative; left: 0; top: 0; z-index: 1; }
#newYear-main * { position: relative; line-height: 1.3; }
#newYear-main .time, #newYear-main .happyNewYear { font-size: 3rem; margin: 8px 0; display: block; }
#newYear-main .newYear-time { font-weight: bold; text-align: center; }
#newYear-main .day { font-size: 4rem; letter-spacing: 6px; margin-right: -6px; }
#newYear-main .unit { font-size: 1rem; }
#newYear-main .mask { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, .2); }
[data-theme=dark] #newYear-main .mask { background-color: rgba(0, 0, 0, .3); } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: 100%!important; } .swiper-wrapper { height: 100%!important; }
|
引入swiper和创建、引入newYear.js
1 2 3 4 5 6 7 8
| extends: head: - <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"> body: - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script> - <script src="/custom/newYear.js"></script>
|
下面创建一下newYear.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 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
| let newYearTimer = null; var newYear = ()=>{ if (clearTimeout(newYearTimer), !document.querySelector("#newYear")) return; let e = new Date("2024-02-10 00:00:00").getTime() / 1e3 , n = { 0: "周日", 1: "周一", 2: "周二", 3: "周三", 4: "周四", 5: "周五", 6: "周六" }; function t(e) { return e > 9 ? e : "0" + e } !function r() { let a = new Date; document.querySelector("#newYear .today").innerHTML = a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日 " + n[a.getDay()]; let l = e - Math.round(a.getTime() / 1e3); if (l < 0) document.querySelector("#newYear .title").innerHTML = "喜迎新年", document.querySelector("#newYear .newYear-time").innerHTML = '<span class="happyNewYear">新年快乐!</span>'; else if (document.querySelector("#newYear .title").innerHTML = "距离2024年春节:", l > 86400) document.querySelector("#newYear .newYear-time").innerHTML = `<span class="day">${Math.ceil(l / 86400)}<span class="unit">天</span></span>`; else { let e = t(parseInt(l / 3600)); l %= 3600; let n = t(parseInt(l / 60)); l %= 60; let a = t(l); document.querySelector("#newYear .newYear-time").innerHTML = `<span class="time">${e}:${n}:${a}</span></span>`, newYearTimer = setTimeout(r, 1e3) } }() }; function newYearSwiper() { var swiper = new Swiper('.newYear-slider', { passiveListeners: true, loop: true, autoplay: { disableOnInteraction: true, delay: 5000 }, effect: 'fade', mousewheel: true, autoHeight: true }); var comtainer = document.querySelector('.newYear-slider'); if (comtainer !== null) { comtainer.onmouseenter = () => { swiper.autoplay.stop() }; comtainer.onmouseleave = () => { swiper.autoplay.start() }; } } function whenDOMReady() { newYear() newYearSwiper() } whenDOMReady(), document.addEventListener("pjax:complete", whenDOMReady);
|
教程至此结束,阁下成功与否,全凭悟性也!