文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

此功能始于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: # 在head中插入
    - <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css">
  body: # 在body中插入
    # swiper的js
    - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>
    # 自定义js必须放到这两个下面，如
    - <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: false,
      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() };
    }
  }
  
  // 适配了pjax
  function whenDOMReady() {
    // pjax加载完成（切换页面）后需要执行的函数和代码
    newYear()
    newYearSwiper()
  }
  whenDOMReady(),
document.addEventListener("pjax:complete", whenDOMReady);

教程至此结束，阁下成功与否，全凭悟性也！