Hexo Icarus 新年倒计时挂件

效果如下图所示：

挂件的背景图片采用 swiper 轮播图的方式（滑动鼠标滚轮或长按图片左右移动可切换图片）。

由于 Icarus 官方文档未详细提及挂件的自定义方法，在网上也未找到此类信息，故将详细操作记录在下，希望能起到抛砖引玉的作用。

主题文档中添加挂件内容

在 [BlogRoot]/_config.icarus.yml 中找到 widgets，添加以下代码：

# Countdown widget configurations
-
    # Where should the widget be placed, left sidebar or right sidebar
    position: left
    type: countdown

新建 schema 文件

记主题文件夹为 /icarus/（一般为 [BlogRoot]/node_modules/hexo-theme-icarus。建议把此文件夹移入 [BlogRoot]/themes/ 并改文件夹名为 icarus，如主题文件已在此目录中，忽略此括号内容）

新建 /icarus/include/schema/widget/countdown.json 文件，添加以下代码：

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "/widget/countdown.json",
    "description": "Countdown widget configurations",
    "type": "object",
    "properties": {
      "type": {
        "type": "string",
        "const": "countdown"
      }
    },
    "required": ["type"]
}

在 /icarus/include/schema/common/widgets.json 的 items.oneOf 末尾处添加以下代码：

,{
    "$ref": "/widget/countdown.json"
}

新建挂件显主代码文件

新建 /icarus/layout/widget/countdown.jsx，添加以下代码：

const { Component } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

class Countdown extends Component {
    render() {
        const {CountdownJsUrl, SwiperJsUrl} = this.props;
        return <div class="card widget" data-type="countdown">
            <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css" />
            <div id="newYear">
                <div class="newYear-slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="background-image:url(/imgs/longnian.webp)"></div>
                    <div class="swiper-slide" style="background-image:url(/imgs/longnian1.webp)"></div>
                    <div class="swiper-slide" style="background-image:url(/imgs/longnian2.webp)"></div>
                    <div class="swiper-slide" style="background-image:url(/imgs/longnian3.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>
            </div>
            <script src={SwiperJsUrl}/>
            <script src={CountdownJsUrl}/>
        </div>;
    }
}

module.exports = cacheComponent(Countdown, 'widget.countdown', props => {
    const { helper } = props;
    return {
        CountdownJsUrl: helper.url_for('/js/Countdown.min.js'),
        SwiperJsUrl: "https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js",
    };
});

准备依赖文件

在 [BlogRoot]/source/js/ 或 /icarus/source/js/ 文件夹中新建 Countdown.min.js，添加以下代码：

function newYear(){if(!document.querySelector("#newYear"))return;let e=new Date("2024-02-10 00:00:00"),n=e.getTime()/1e3,t={0:"周日",1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六"};function a(e){return(e=Number(e))>9?e:"0"+e}!function r(){let l=new Date;document.querySelector("#newYear .today").innerHTML=l.getFullYear()+"-"+(l.getMonth()+1)+"-"+l.getDate()+" "+t[l.getDay()];let o=n-Math.round(l.getTime()/1e3);if(o<0)window.newYearTimer=null,document.querySelector("#newYear .title").innerHTML="Happy New Year!",document.querySelector("#newYear .newYear-time").innerHTML='<span class="happyNewYear">新年快乐</span>';else if(document.querySelector("#newYear .title").innerHTML="距离"+e.getFullYear()+"年春节：",o>86400)document.querySelector("#newYear .newYear-time").innerHTML=`<span class="day">${Math.ceil(o/86400)}</span><span class="unit">天</span>`;else{let e=a(parseInt(o/3600));o%=3600;let n=a(parseInt(o/60)),t=a(o%=60);document.querySelector("#newYear .newYear-time").innerHTML=`<span class="time">${e}:${n}:${t}</span></span>`,window.newYearTimer||(window.newYearTimer=setInterval(r,1e3))}}()}function newYearSwiper(){var e=new Swiper(".newYear-slider",{passiveListeners:!0,loop:!0,autoplay:{disableOnInteraction:!0,delay:5e3},effect:"fade",mousewheel:!0,autoHeight:!0}),n=document.querySelector(".newYear-slider");null!==n&&(n.onmouseenter=(()=>{e.autoplay.stop()}),n.onmouseleave=(()=>{e.autoplay.start()}))}function whenDOMReady(){newYear(),newYearSwiper()}whenDOMReady(),document.addEventListener("pjax:complete",whenDOMReady);

你可以在此 js 文件中修改要显示的文字内容和倒计时截止的时间点。

在 [BlogRoot]/source/imgs/ 或 /icarus/imgs/ 文件夹中准备轮播图。

新建 /icarus/include/style/countdown.styl，添加以下代码：

#newYear
    color white
    padding 0 !important
    .item-headline
        display none

#newYear p,
#newYear h3
    font-weight normal
    color inherit
    margin 0

.newYear-slider
    position absolute
    width 100%
    left 0
    top 0
    .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
    height 160px !important
    z-index 1
    *
        position relative
        line-height 1.3
    .newYear-time
        font-weight bold
        text-align center
    .day
        font-size 4rem
        letter-spacing 6px
        margin-right -6px
    .unit
        font-size 1rem
    .mask
        position absolute
        left 0
        top 0
        height 100%
        width 100%
        background-color rgba(0, 0, 0, .2)

@media screen and (min-width: 765px) and (max-width: 880px)
    #newYear
        p
            font-size 1.69em
            margin 0

#newYear-main .time,
#newYear-main .happyNewYear
    font-size 3rem
    margin 8px 0
    display block

在 /icarus/source/css/style.styl，添加以下代码：

@import '../../include/style/countdown'

hexo cl && hexo g && hexo s 查看效果！

你可以根据自己的需求修改相应的代码。灵感来自 新年倒计时改良&随便说说 | Leonus。