AI正在绞尽脑汁想思路ING···
BiのAI摘要
HunYuan-Lite

突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）
效果图：

# 添加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
    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
    document.addEventListener("DOMContentLoaded", () => {
        initializeCard();
    });

    document.addEventListener("pjax:complete", () => {
        initializeCard();
    });

    function initializeCard() {
        cardTimes();
        cardRefreshTimes();
    }

    let year, month, week, date, dates, weekStr, monthStr, asideTime, asideDay, asideDayNum, animalYear, ganzhiYear, lunarMon, lunarDay;
    const now = new Date();

    function cardRefreshTimes() {
        const e = document.getElementById("card-widget-schedule");
        if (e) {
            asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
            e.querySelector("#pBar_year").value = asideDay;
            e.querySelector("#p_span_year").innerHTML = (asideDay / 365 * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r0 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(365 - asideDay).toFixed(0)} </a>天`;
            e.querySelector("#pBar_month").value = date;
            e.querySelector("#pBar_month").max = dates;
            e.querySelector("#p_span_month").innerHTML = (date / dates * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r1 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(dates - date)} </a>天`;
            e.querySelector("#pBar_week").value = week === 0 ? 7 : week;
            e.querySelector("#p_span_week").innerHTML = ((week === 0 ? 7 : week) / 7 * 100).toFixed(1) + "%";
            e.querySelector(".schedule-r2 .schedule-d1 .aside-span2").innerHTML = `还剩<a> ${(7 - (week === 0 ? 7 : week))} </a>天`;
        }
    }

    function cardTimes() {
        year = now.getFullYear();
        month = now.getMonth();
        week = now.getDay();
        date = now.getDate();

        const e = document.getElementById("card-widget-calendar");
        if (e) {
            const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
            weekStr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][week];
            const monthData = [
                { month: "1月", days: 31 },
                { month: "2月", days: isLeapYear ? 29 : 28 },
                { month: "3月", days: 31 },
                { month: "4月", days: 30 },
                { month: "5月", days: 31 },
                { month: "6月", days: 30 },
                { month: "7月", days: 31 },
                { month: "8月", days: 31 },
                { month: "9月", days: 30 },
                { month: "10月", days: 31 },
                { month: "11月", days: 30 },
                { month: "12月", days: 31 }
            ];
            monthStr = monthData[month].month;
            dates = monthData[month].days;

            const t = (week + 8 - date % 7) % 7;
            let n = "", d = false, s = 7 - t;
            const o = (dates - s) % 7 === 0 ? Math.floor((dates - s) / 7) + 1 : Math.floor((dates - s) / 7) + 2;
            const c = e.querySelector("#calendar-main");
            const l = e.querySelector("#calendar-date");

            l.style.fontSize = ["64px", "48px", "36px"][Math.min(o - 3, 2)];

            for (let i = 0; i < o; i++) {
                if (!c.querySelector(`.calendar-r${i}`)) {
                    c.innerHTML += `<div class='calendar-r${i}'></div>`;
                }
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j === t) {
                        n = 1;
                        d = true;
                    }
                    const r = n === date ? " class='now'" : "";
                    if (!c.querySelector(`.calendar-r${i} .calendar-d${j} a`)) {
                        c.querySelector(`.calendar-r${i}`).innerHTML += `<div class='calendar-d${j}'><a${r}>${n}</a></div>`;
                    }
                    if (n >= dates) {
                        n = "";
                        d = false;
                    }
                    if (d) {
                        n += 1;
                    }
                }
            }

            const lunarDate = chineseLunar.solarToLunar(new Date(year, month, date));
            animalYear = chineseLunar.format(lunarDate, "A");
            ganzhiYear = chineseLunar.format(lunarDate, "T").slice(0, -1);
            lunarMon = chineseLunar.format(lunarDate, "M");
            lunarDay = chineseLunar.format(lunarDate, "d");

            const newYearDate = new Date("2026/02/16 00:00:00");
            const daysUntilNewYear = Math.floor((newYearDate - now) / 1e3 / 60 / 60 / 24);
            asideTime = new Date(`${new Date().getFullYear()}/01/01 00:00:00`);
            asideDay = (now - asideTime) / 1e3 / 60 / 60 / 24;
            asideDayNum = Math.floor(asideDay);
            const weekNum = week - asideDayNum % 7 >= 0 ? Math.ceil(asideDayNum / 7) : Math.ceil(asideDayNum / 7) + 1;

            e.querySelector("#calendar-week").innerHTML = `第${weekNum}周 ${weekStr}`;
            e.querySelector("#calendar-date").innerHTML = date.toString().padStart(2, "0");
            e.querySelector("#calendar-solar").innerHTML = `${year}年${monthStr} 第${asideDay.toFixed(0)}天`;
            e.querySelector("#calendar-lunar").innerHTML = `${ganzhiYear}${animalYear}年 ${lunarMon}${lunarDay}`;
            document.getElementById("schedule-days").innerHTML = daysUntilNewYear;
        }
    }

# 添加css

在主题文件 `source/css/`新建 `calendar.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
    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
    218
    219
    220
    221
    222
    /* 浅色主题变量覆盖 -------------------------------- */
    :root {
        --anzhiyu-main: #a0d2eb;               /* 主强调色：柔和天空蓝 */
        --anzhiyu-main-op: rgba(160, 210, 235, 0.6);
        --anzhiyu-main-op-deep: rgba(160, 210, 235, 0.4);
        --anzhiyu-main-op-light: rgba(160, 210, 235, 0.2);

        --efu-card-bg: #fdfdfd;                /* 卡片背景：几乎白 */
        --efu-fontcolor: #444;                 /* 主文本：深灰 */
        --efu-secondtext: #999;                /* 次级文本：浅灰 */
    }
    .card-widget {
        padding: 10px!important;
        max-height: calc(100vh - 100px);
    }
    .card-times a, .card-times div {
        color: var(--efu-fontcolor);
    }

    #card-widget-calendar .item-content {
        display: flex;
    }

    #calendar-area-left {
        width: 45%;
    }

    #calendar-area-right {
        width: 55%;
    }

    #calendar-area-left, #calendar-area-right {
        height: 100%;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    #calendar-main {
        width: 100%;
    }

    #calendar-week {
        height: 1.2rem;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 700;
        align-items: center;
        display: flex;
    }

    #calendar-date {
        height: 3rem;
        line-height: 1.3;
        font-size: 64px;
        letter-spacing: 3px;
        color: var(--anzhiyu-main);
        font-weight: 700;
        align-items: center;
        display: flex;
        position: relative;
        top: calc(50% - 2.1rem);
    }

    #calendar-lunar, #calendar-solar {
        height: 1rem;
        font-size: 12px;
        align-items: center;
        display: flex;
        position: absolute;
    }

    #calendar-solar {
        bottom: 2.1rem;
    }

    #calendar-lunar {
        bottom: 1rem;
        color: var(--efu-secondtext);
    }

    #calendar-main a {
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        font-size: 12px;
        line-height: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #calendar-main a.now {
        background: var(--anzhiyu-main);
        color: var(--efu-card-bg);
    }

    #calendar-main .calendar-rh a {
        color: var(--efu-secondtext);
    }

    .calendar-r0, .calendar-r1, .calendar-r2, .calendar-r3, .calendar-r4, .calendar-r5, .calendar-rh {
        height: 1.2rem;
        display: flex;
    }

    .calendar-d0, .calendar-d1, .calendar-d2, .calendar-d3, .calendar-d4, .calendar-d5, .calendar-d6 {
        width: calc(100% / 7);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #card-widget-schedule .item-content {
        display: flex;
    }

    #schedule-area-left, #schedule-area-right {
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #schedule-area-left {
        width: 30%;
    }

    #schedule-area-right {
        width: 70%;
        padding: 0 5px;
    }

    .schedule-r0, .schedule-r1, .schedule-r2 {
        height: 2rem;
        width: 100%;
        align-items: center;
        display: flex;
    }

    .schedule-d0 {
        width: 30px;
        margin-right: 5px;
        text-align: center;
        font-size: 12px;
    }

    .schedule-d1 {
        width: calc(100% - 35px);
        height: 1.5rem;
        align-items: center;
        display: flex;
    }

    progress::-webkit-progress-bar {
        background: linear-gradient(to right, var(--anzhiyu-main-op-deep), var(--anzhiyu-main-op), var(--anzhiyu-main-op-light));
        border-radius: 5px;
        overflow: hidden;
    }

    progress::-webkit-progress-value {
        background: var(--anzhiyu-main);
        border-radius: 5px;
    }

    .aside-span1, .aside-span2 {
        height: 1rem;
        font-size: 12px;
        z-index: 1;
        display: flex;
        align-items: center;
        position: absolute;
    }

    .aside-span1 {
        margin-left: 5px;
    }

    .aside-span2 {
        right: 20px;
        color: var(--efu-secondtext);
    }

    .aside-span2 a {
        margin: 0 3px;
    }

    #pBar_month, #pBar_week, #pBar_year {
        width: 100%;
        border-radius: 5px;
        height: 100%;
    }

    #schedule-date, #schedule-days, #schedule-title {
        display: flex;
        align-items: center;
    }

    #schedule-title {
        height: 25px;
        line-height: 1;
        font-size: 14px;
        font-weight: 700;
    }

    #schedule-days {
        height: 40px;
        line-height: 1;
        font-size: 30px;
        font-weight: 900;
        color: var(--anzhiyu-main);
    }

    #schedule-date {
        height: 20px;
        line-height: 1;
        font-size: 12px;
        color: var(--efu-secondtext);
    }

# 引入

新增+号后面内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    inject:
      head:
      # 自定义css
    +    - <link rel="stylesheet" href="/css/calendar.css">

      bottom:
      # 自定义js
    +    - <script src="/js/calendar.js"></script>
    +    - <script src="https://unpkg.com/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>

在 `blogroot/source/_data` 文件夹下创建 `widget.yml` 文件，并添加以下内容：

    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
    bottom:
      - class_name: calendar
        id_name: card-widget-calendar
        name:
        icon:
        order: -1
        html: |
          <div id="calendar-area-left">
            <div id="calendar-week"></div>
            <div id="calendar-date" style="font-size: 48px;"></div>
            <div id="calendar-solar"></div>
            <div id="calendar-lunar"></div>
          </div>
          <div id="calendar-area-right">
            <div id="calendar-main">
            </div>
          </div>

      - class_name: schedule
        id_name: card-widget-schedule
        name:
        icon:
        order: -1
        html: |
          <div id="schedule-area-left">
            <div id="schedule-title">距离除夕</div>
            <div id="schedule-days"></div>
            <div id="schedule-date">2025-01-28</div>
          </div>
          <div id="schedule-area-right">
            <div class="schedule-r0">
              <div class="schedule-d0">本年</div>
              <div class="schedule-d1">
                <span id="p_span_year" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="365" id="pBar_year"></progress>
              </div>
            </div>
            <div class="schedule-r1">
              <div class="schedule-d0">本月</div>
              <div class="schedule-d1">
                <span id="p_span_month" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="30" id="pBar_month"></progress>
              </div>
            </div>
            <div class="schedule-r2">
              <div class="schedule-d0">本周</div>
              <div class="schedule-d1">
                <span id="p_span_week" class="aside-span1"></span>
                <span class="aside-span2">还剩<a></a>天</span>
                <progress max="7" id="pBar_week"></progress>
              </div>
            </div>
          </div>

# 参考

🪧引用站外地址，不保证站点的可用性和安全性
乐活星球
lohas
文章作者: biss
文章链接: https://blog.biss.click/posts/5ed2f1e6/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
网站
相关推荐
2025-08-14
自定义分类条
修改有风险，请注意备份 今天来自定义分类条 添加pug新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug文件，写入： 12345678910.category-bar-items#category-bar-items(class=is_home() ? 'home' : '') .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home") a(href=url_for('/'))= __('博客首页') each item in site.categories.find({ parent: { $exists: false } }).data .category-bar-item(class=select ? (selec...
2025-08-13
自定义导航栏
最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。 PC 菜单栏修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容 1234567891011121314151617181920212223242526nav#nav span#blog-info a(href=url_for('/') title=config.title) if theme.nav.logo img.site-icon(src=url_for(theme.nav.logo)) if theme.nav.display_title span.site-name=config.title #menus- if (theme.algolia_search.enable || theme.local_search.enable)- #search-button- a.site-page...
2025-08-18
使用GitHub推送Hexo到服务器
1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
2025-08-12
博客添加AI总结
之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
2025-08-26
搭建Owncloud并集成Onlyoffice
引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
2025-08-12
利用插件自定义页脚菜单
安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...

评论
biss
文章
34
标签
11
分类
5
Follow Me
公告
系列文章
添加网站左上角菜单 2026-02-10
添加typesense搜索 2026-02-05
自定义字体 2026-01-16
在侧边栏添加日历和倒计时 2026-01-16
使用GitHub推送Hexo到服务器 2025-08-18
自定义页脚（新）2025-08-14
自定义分类条 2025-08-14
自定义导航栏 2025-08-13
利用 SiteMap 随机访问站内页面 2025-08-12
博客添加AI总结 2025-08-12
利用插件自定义页脚菜单 2025-08-12
自定义右键菜单 2025-08-11
在侧边栏中添加欢迎信息 2025-08-10
配置说说页面 2025-08-10
最新文章
opencv基础操作 2026-03-15
配置opencv 2026-03-14
自建bitwarden服务 2026-02-25
自建renovate-bot 2026-02-23
新年快乐！2026-02-14
随便逛逛昼夜切换繁简转换阅读模式隐私声明 Cookie协议版权声明