又快过年了，去年写的过年倒计时卡片又该用上了：博客新年倒计时卡片
但是感觉之前图片轮播写的不是怎么好，便换成了swiper，其他就没做什么改变了。

好了，现在是随便说说时间。
首先祝大家圣诞快乐，顺便把元旦也祝了：祝你一帆风顺，二龙腾飞，三羊开泰，四季平安，五福临门，六六大顺，七星高照，八方来财，九九同心，十全十美，百事亨通，元旦节快乐。

说实话这段时间很多次都想更新博客，都hexo n不知道几次了，但是每次都没有写完。主要还是生活太无趣了，公司宿舍两点一线，本人又特别懒，天又特别冷，没出去玩过，休息了就在宿舍玩玩饥荒和泰拉，实在没什么可写的。真不是我鸽啊，我又不是轻笑。

工作之后说实话真的是干什么都提不起兴致来，说是5天8小时的工作但是通勤加准备一天还要加上一两个小时，回到宿舍什么都不想干。休息日就只想着睡觉，一觉醒来12点。害，真的无趣。不想上班！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

倒计时卡片

新版我给去掉了元宝掉落特效，感觉没什么用，单独为了它引入一个jq属实没必要，有需要的可以参考之前的文章添加：博客新年倒计时卡片

1. 添加侧边栏

注意代码中的图片要自行替换哈，有几张图片就向下复制粘贴即可

路径：[Blogroot]\source\_data\widget.yml
建议查看butterfly官方文档：自定义侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# top: 创建的 widget 会出现在非 sticky 区域（即所有页面都会显示)
# bottom: 创建的 widget 会出现在 sticky 区域（除了文章页都会显示)
top:
  - class_name:
    id_name: newYear
    name:
    icon:
    order: 1
    html: '
      <div class="newYear-slider">
          <div class="swiper-wrapper">
              <div class="swiper-slide" style="background-image:url(/img/longnian.jpg)"></div>
              <div class="swiper-slide" style="background-image:url(/img/longnian1.jpg)"></div>
              <div class="swiper-slide" style="background-image:url(/img/longnian2.png)"></div>
              <div class="swiper-slide" style="background-image:url(/img/longnian3.jpg)"></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>
    '

2. 添加css

不会自定义css请查看：Hexo博客添加自定义css和js文件

自定义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
/* 新年侧边栏 */
#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);
}

3. 引入swiper和创建newYear.js

在_config.butterfly.yml的inject下引入文件：
不会自定义js也请查看：Hexo博客添加自定义css和js文件

1
2
3
4
5
6
7
8
9
10
inject:
  head:
    # swiper的css
    - <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css">
  bottom:
    # swiper的js
    - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>
    # newYear.js 
    # 或者你也可以写到其他自定义js文件内，只有保证自定义js在swiper的js下面即可
    - <script src="/js/newYear.js"></script>

3. 向newYear.js添加代码

最后添加一下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
69
70
71
72
73
74
75
76

function newYear() {
  if (!document.querySelector('#newYear')) return;
  // 新年时间戳 and 星期对象
  let SpringFestival = new Date('2024-02-10 00:00:00')
  let newYear = SpringFestival.getTime() / 1000,
    week = { 0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六' }
  function nol(h) { h = Number(h); return h > 9 ? h : '0' + h; }
  time();

  function time() {
    // 现在 时间对象
    let now = new Date();

    // 右下角 今天
    document.querySelector('#newYear .today').innerHTML = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + week[now.getDay()]

    // 现在与新年相差秒数
    let second = newYear - Math.round(now.getTime() / 1000);

    // 小于0则表示已经过年
    if (second < 0) {
      window.newYearTimer = null
      document.querySelector('#newYear .title').innerHTML = 'Happy New Year!';
      document.querySelector('#newYear .newYear-time').innerHTML = '<span class="happyNewYear">新年快乐</span>';
    } else {
      // 大于0则还未过年
      document.querySelector('#newYear .title').innerHTML = '距离' + SpringFestival.getFullYear() + '年春节：'
      // 大于一天则直接渲染天数
      if (second > 86400) {
        document.querySelector('#newYear .newYear-time').innerHTML = `<span class="day">${Math.ceil(second / 86400)}</span><span class="unit">天</span>`
      } else {
        // 小于一天则使用时分秒计时。
        let h = nol(parseInt(second / 3600));
        second %= 3600;
        let m = nol(parseInt(second / 60));
        second %= 60;
        let s = nol(second);
        document.querySelector('#newYear .newYear-time').innerHTML = `<span class="time">${h}:${m}:${s}</span></span>`;
        // 计时
        if (!window.newYearTimer) window.newYearTimer = setInterval(time, 1000);
      }
    }
  }
}

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) // pjax加载完成（切换页面）后再执行一次

好了，欢迎第一个小白鼠进行尝试，有问题欢迎留言。