侧边栏日历卡片

侧边栏日历卡片

03215

效果预览

图片[1]-侧边栏日历卡片-四次元拾光

教程

  • 在博客源码根目录的sourcecsscustom.css添加css代码，没有这个文件就新建一个，这样就不用修改主题源码了
.card-widget {
    padding: 0px!important;     /* 原文padding: 10px!important;这样会导致微信卡css发生错误 */
    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: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#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: absolute;
    top: calc(50% - 2.1rem);
}

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

#calendar-solar {
    bottom: 1.5rem;  /* 原文bottom: 2.1rem;这样会导致微信卡css发生错误 */
}

#calendar-lunar {
    bottom: 0.5rem;   /* 原文bottom: 1rem;这样会导致微信卡css发生错误 */
    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);
}
  • 在博客源码根目录的sourcejscustom.js添加js代码
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("2025/01/28 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;
    }
}

引入文件

打开主题配置文件_config.anzhiyu.yml，搜索找到inject，加入以下代码

inject:
  head:
  # 自定义css
    - <link rel="stylesheet" href="/css/custom.css?1">

  bottom:
  # 自定义js
    - <script async src="/js/custom.js?1"></script>
    - <script src="https://open.lightxi.com/unpkg/chinese-lunar@0.1.4/lib/chinese-lunar.js"></script>

创建数据文件

在 source_data 文件夹下创建 widget.yml 文件，并添加以下内容

top: #若只想要在主页显示则改为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>
© 版权声明
版权声明 1 本网站名称：四次元拾光
2 本站永久网址： https://sonic.520717.xyz
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 进行删除处理。
4 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
5 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
THE END
Hexo烂笔头
# hexo# 美化
喜欢就支持一下吧
点赞15 分享
anyaer的头像-四次元拾光
博客添加石蒜模拟器-四次元拾光
博客添加石蒜模拟器
博客添加石蒜模拟器
2年前 75
博客新增待办清单页面-四次元拾光
博客新增待办清单页面
博客新增待办清单页面
2年前 67
飞牛云fnOS搭建WordPress网站并实现公网访问-四次元拾光
飞牛云fnOS搭建WordPress网站并实现公网访问
飞牛云fnOS搭建WordPress网站并实现公网访问
6个月前 64
Hexo自定义字体-四次元拾光
Hexo自定义字体
Hexo自定义字体
2年前 60
使用lucky为bt提供公网-四次元拾光
使用lucky为bt提供公网
使用lucky为bt提供公网
2个月前 60
Apple Music Wrapper On WSL2-四次元拾光
Apple Music Wrapper On WSL2
Apple Music Wrapper On WSL2
10个月前 59
相关推荐
博客添加石蒜模拟器-四次元拾光
博客添加石蒜模拟器
博客添加石蒜模拟器
2年前 75
博客新增待办清单页面-四次元拾光
博客新增待办清单页面
博客新增待办清单页面
2年前 67
使用lucky为bt提供公网-四次元拾光
使用lucky为bt提供公网
使用lucky为bt提供公网
2个月前 60
Hexo自定义字体-四次元拾光
Hexo自定义字体
Hexo自定义字体
2年前 60
Apple Music Wrapper On WSL2-四次元拾光
Apple Music Wrapper On WSL2
Apple Music Wrapper On WSL2
10个月前 59
Hexo节日弹窗与公祭日变灰-四次元拾光
Hexo节日弹窗与公祭日变灰
Hexo节日弹窗与公祭日变灰
2年前 58
评论 抢沙发

请登录后发表评论

    暂无评论内容

搜索
开启精彩搜索

热门搜索

标签云
音乐刮销音乐随笔运营面板软路由美化笔记甘城猫图演唱会测试服务器日本音乐壁纸图床兰空yt-dlpyoutube下载youtubeWSL2