[{"data":1,"prerenderedAt":663},["ShallowReactive",2],{"post-/2026/anheyu":3,"surround-/2026/anheyu":652},{"id":4,"title":5,"body":6,"categories":623,"date":625,"description":626,"draft":627,"extension":628,"image":629,"meta":630,"navigation":632,"path":633,"permalink":634,"podcastAudio":635,"podcastLyric":636,"podcastTitle":637,"published":634,"readingTime":638,"recommend":593,"references":634,"seo":643,"sitemap":644,"stem":645,"tags":646,"type":650,"updated":625,"__hash__":651},"content/posts/2026/anheyu博客侧边栏创建倒数卡片.md","anheyu博客侧边栏创建倒数卡片",{"type":7,"value":8,"toc":592},"minimark",[9,13,28,42,46,50,53,62,65,69,128,131,169,172,176,179,182,212,222,226,233,239,242,245,356,359,362,370,373,376,382,385,388,417,420,456,459,494,497,501,507,518,522,531,535,540,548,551,554,571,574,577,584,587],[10,11,12],"h1",{"id":12},"anheyu博客侧边栏创建日历卡片",[14,15,16],"blockquote",{},[17,18,19,20,27],"p",{},"基于的",[21,22,26],"a",{"href":23,"rel":24},"https://everfu.github.io/solitude-demo/posts/874ddadb.html",[25],"nofollow","伍拾柒","教程进行修改",[29,30,32,33,32,38],"div",{"style":31},"border: 1px solid #ccc; border-left: 4px solid #4a90e2; border-radius: 4px; padding: 10px 15px; display: flex; align-items: center; gap: 8px; background: transparent;","\n  ",[34,35,37],"span",{"style":36},"background: #4a90e2; color: white; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;","i",[17,39,41],{"style":40},"margin: 0; font-size: 14px;","无需修改主题源文件且代码经过适配",[29,43,45],{"style":44},"margin: 16px 0; padding: 12px; border: 1px solid #888; border-radius: 4px; font-size: 15px; line-height: 1.6; background: transparent;","\n本人大学专业并不与开发相关，仅保证代码可正常运行，不保证其美观性\n",[47,48,49],"h2",{"id":49},"介绍",[17,51,52],{},"博客侧边栏倒数组件是一个轻量级的前端组件，用于在网页侧边栏显示距离目标日期的倒计时，以及今日、本周、本月、本年的进度条和剩余时间。该组件支持响应式设计，在不同设备上都能良好显示。",[54,55,57],"folding",{"title":56},"效果图",[58,59],"pic",{"caption":60,"src":61},"倒数组件效果图","https://dev.jiugg.top/i/029f0404-ae9f-4567-acd2-53d9b91a6866.webp",[47,63,64],{"id":64},"功能介绍",[66,67,68],"h3",{"id":68},"核心功能",[70,71,72,80,86,92,98,104,110,116,122],"ul",{},[73,74,75,79],"li",{},[76,77,78],"strong",{},"目标日期倒计时","：显示距离目标日期的天数",[73,81,82,85],{},[76,83,84],{},"目标日期信息","：显示目标日期的名称和具体日期",[73,87,88,91],{},[76,89,90],{},"今日进度","：显示当天的时间进度条和剩余小时数",[73,93,94,97],{},[76,95,96],{},"本周进度","：显示本周的时间进度条和剩余天数",[73,99,100,103],{},[76,101,102],{},"本月进度","：显示本月的时间进度条和剩余天数",[73,105,106,109],{},[76,107,108],{},"本年进度","：显示本年的时间进度条和剩余天数",[73,111,112,115],{},[76,113,114],{},"悬停效果","：鼠标悬停时显示剩余时间，隐藏百分比",[73,117,118,121],{},[76,119,120],{},"定时更新","：每分钟自动更新一次倒计时和进度条",[73,123,124,127],{},[76,125,126],{},"响应式设计","：在不同设备上都能良好显示",[66,129,130],{"id":130},"技术特点",[70,132,133,139,145,151,157,163],{},[73,134,135,138],{},[76,136,137],{},"模块化设计","：代码采用模块化结构，易于理解和扩展",[73,140,141,144],{},[76,142,143],{},"性能优化","：使用CSS动画和定时更新，避免频繁DOM操作",[73,146,147,150],{},[76,148,149],{},"用户体验","：悬停效果增强用户交互体验",[73,152,153,156],{},[76,154,155],{},"样式隔离","：使用独立的样式标签，避免与现有样式冲突",[73,158,159,162],{},[76,160,161],{},"兼容性良好","：支持所有现代浏览器，代码结构清晰易维护",[73,164,165,168],{},[76,166,167],{},"适配性强","：支持Pjax和页面加载，确保在各种场景下正常工作",[47,170,171],{"id":171},"安装方法",[66,173,175],{"id":174},"方法一安和鱼博客系统适配","方法一：安和鱼博客系统适配",[17,177,178],{},"如果你使用的是安和鱼（AnHeYu）博客系统，可以将以下代码添加到后台侧边栏配置中：",[66,180,181],{"id":181},"配置步骤",[183,184,185,193,209],"ol",{},[73,186,187,188,192],{},"登录安和鱼博客系统后台（通常为 ",[189,190,191],"code",{"code":191},"你的域名/admin","）",[73,194,195,196,199,200,199,203,199,206],{},"进入 ",[76,197,198],{},"系统管理"," → ",[76,201,202],{},"系统设置",[76,204,205],{},"外观配置",[76,207,208],{},"侧边栏",[73,210,211],{},"将以下代码添加到侧边栏配置中",[213,214,220],"pre",{"className":215,"code":217,"language":218,"meta":219},[216],"language-html","\u003Cstyle>\n  .card-countdown .item-content {\n    display: flex;\n    align-items: center;\n  }\n\n  .cd-count-left {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin-right: 0.8rem;\n    line-height: 1.5;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .cd-count-left .cd-text {\n    font-size: 14px;\n  }\n\n  .cd-count-left .cd-name {\n    font-weight: bold;\n    font-size: 18px;\n  }\n\n  .cd-count-left .cd-time {\n    font-size: 30px;\n    font-weight: bold;\n    color: var(--anzhiyu-main);\n  }\n\n  .cd-count-left .cd-date {\n    font-size: 12px;\n    opacity: 0.6;\n  }\n\n  .cd-count-left::after {\n    content: \"\";\n    position: absolute;\n    right: -0.8rem;\n    width: 2px;\n    height: 80%;\n    background-color: var(--anzhiyu-main);\n    opacity: 0.5;\n  }\n\n  .cd-count-right {\n    flex: 1;\n    margin-left: .8rem;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .cd-count-item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 24px;\n  }\n\n  .cd-item-name {\n    font-size: 14px;\n    margin-right: 0.8rem;\n    white-space: nowrap;\n  }\n\n  .cd-item-progress {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    height: 100%;\n    width: 100%;\n    border-radius: 8px;\n    background-color: var(--anzhiyu-background);\n    overflow: hidden;\n  }\n\n  .cd-progress-bar {\n    height: 100%;\n    border-radius: 8px;\n    background-color: var(--anzhiyu-main);\n  }\n\n  .cd-percentage,\n  .cd-remaining {\n    position: absolute;\n    font-size: 12px;\n    margin: 0 6px;\n    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n  }\n\n  .cd-many {\n    color: #fff;\n  }\n\n  .cd-remaining {\n    opacity: 0;\n    transform: translateX(10px);\n  }\n\n  .card-countdown .item-content:hover .cd-remaining {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  .card-countdown .item-content:hover .cd-percentage {\n    transform: translateX(-10px);\n    opacity: 0;\n  }\n\u003C/style>\n\n\u003Cdiv class=\"card-countdown\">\n  \u003Cdiv class=\"item-content\">\n    \u003Cdiv class=\"cd-count-left\">\n      \u003Cspan class=\"cd-text\">距离\u003C/span>\n      \u003Cspan class=\"cd-name\" id=\"eventName\">\u003C/span>\n      \u003Cspan class=\"cd-time\" id=\"daysUntil\">\u003C/span>\n      \u003Cspan class=\"cd-date\" id=\"eventDate\">\u003C/span>\n    \u003C/div>\n    \u003Cdiv id=\"countRight\" class=\"cd-count-right\">\u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003Cscript>\n  (() => {\n    const config = {\n      targetDate: \"2026-02-17\",\n      targetName: \"春节\",\n      units: {\n        day: { text: \"今日\", unit: \"小时\" },\n        week: { text: \"本周\", unit: \"天\" },\n        month: { text: \"本月\", unit: \"天\" },\n        year: { text: \"本年\", unit: \"天\" }\n      }\n    };\n\n    const calculators = {\n      day: () => {\n        const hours = new Date().getHours();\n        return {\n          remaining: 24 - hours,\n          percentage: (hours / 24) * 100\n        };\n      },\n      week: () => {\n        const day = new Date().getDay();\n        const passed = day === 0 ? 6 : day - 1;\n        return {\n          remaining: 6 - passed,\n          percentage: ((passed + 1) / 7) * 100\n        };\n      },\n      month: () => {\n        const now = new Date();\n        const total = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();\n        const passed = now.getDate() - 1;\n        return {\n          remaining: total - passed,\n          percentage: (passed / total) * 100\n        };\n      },\n      year: () => {\n        const now = new Date();\n        const start = new Date(now.getFullYear(), 0, 1);\n        const total = 365 + (now.getFullYear() % 4 === 0 ? 1 : 0);\n        const passed = Math.floor((now - start) / 86400000);\n        return {\n          remaining: total - passed,\n          percentage: (passed / total) * 100\n        };\n      }\n    };\n\n    function updateCountdown() {\n      const elements = ['eventName', 'eventDate', 'daysUntil', 'countRight']\n        .map(id => document.getElementById(id));\n\n      if (elements.some(el => !el)) return;\n\n      const [eventName, eventDate, daysUntil, countRight] = elements;\n      const now = new Date();\n      const target = new Date(config.targetDate);\n\n      eventName.textContent = config.targetName;\n      eventDate.textContent = config.targetDate;\n      daysUntil.textContent = Math.round((target - now.setHours(0, 0, 0, 0)) / 86400000);\n\n      countRight.innerHTML = Object.entries(config.units)\n        .map(([key, { text, unit }]) => {\n          const { remaining, percentage } = calculators[key]();\n          return `\n            \u003Cdiv class=\"cd-count-item\">\n                \u003Cdiv class=\"cd-item-name\">${text}\u003C/div>\n                \u003Cdiv class=\"cd-item-progress\">\n                    \u003Cdiv class=\"cd-progress-bar\" style=\"width: ${percentage}%; opacity: ${percentage / 100}\">\u003C/div>\n                    \u003Cspan class=\"cd-percentage ${percentage >= 46 ? 'cd-many' : ''}\">${percentage.toFixed(2)}%\u003C/span>\n                    \u003Cspan class=\"cd-remaining ${percentage >= 60 ? 'cd-many' : ''}\">\n                        \u003Cspan class=\"cd-tip\">还剩\u003C/span>${remaining}\u003Cspan class=\"cd-tip\">${unit}\u003C/span>\n                    \u003C/span>\n                \u003C/div>\n            \u003C/div>\n          `;\n        }).join('');\n    }\n\n    let timer;\n    const start = () => {\n      updateCountdown();\n      if (timer) clearInterval(timer);\n      timer = setInterval(updateCountdown, 600000);\n    };\n\n    start();\n\n    ['pjax:complete', 'DOMContentLoaded'].forEach(event => document.addEventListener(event, start));\n    document.addEventListener('pjax:send', () => timer && clearInterval(timer));\n  })();\n\u003C/script>\n","html","",[189,221,217],{"__ignoreMap":219},[66,223,225],{"id":224},"方法二外部引入","方法二：外部引入",[17,227,228,229,232],{},"将代码保存为 ",[189,230,231],{"code":231},"countdown.js"," 文件，然后在HTML中引入：",[213,234,237],{"className":235,"code":236,"language":218,"meta":219},[216],"\u003Clink rel=\"stylesheet\" href=\"path/to/countdown.css\">\n\u003Cdiv class=\"card-countdown\">\n  \u003C!-- 倒数组件HTML结构 -->\n\u003C/div>\n\u003Cscript src=\"path/to/countdown.js\">\u003C/script>\n",[189,238,236],{"__ignoreMap":219},[47,240,241],{"id":241},"自定义配置",[17,243,244],{},"倒数组件的样式和行为可以通过修改CSS和JavaScript来调整：",[54,246,248],{"title":247},"配置项说明",[249,250,251,270],"table",{},[252,253,254],"thead",{},[255,256,257,261,264,267],"tr",{},[258,259,260],"th",{},"配置项",[258,262,263],{},"类型",[258,265,266],{},"默认值",[258,268,269],{},"说明",[271,272,273,288,301,315,329,342],"tbody",{},[255,274,275,279,282,285],{},[276,277,278],"td",{},"targetDate",[276,280,281],{},"String",[276,283,284],{},"\"2026-02-17\"",[276,286,287],{},"目标日期，格式为YYYY-MM-DD",[255,289,290,293,295,298],{},[276,291,292],{},"targetName",[276,294,281],{},[276,296,297],{},"\"春节\"",[276,299,300],{},"目标日期的名称",[255,302,303,306,309,312],{},[276,304,305],{},"units",[276,307,308],{},"Object",[276,310,311],{},"包含day, week, month, year",[276,313,314],{},"时间单位配置",[255,316,317,320,323,326],{},[276,318,319],{},"--anzhiyu-main",[276,321,322],{},"CSS变量",[276,324,325],{},"主题主色",[276,327,328],{},"进度条和倒计时颜色",[255,330,331,334,336,339],{},[276,332,333],{},"--anzhiyu-background",[276,335,322],{},[276,337,338],{},"主题背景色",[276,340,341],{},"进度条背景颜色",[255,343,344,347,350,353],{},[276,345,346],{},"updateInterval",[276,348,349],{},"Number",[276,351,352],{},"600000",[276,354,355],{},"更新间隔，单位为毫秒",[66,357,358],{"id":358},"修改目标日期",[17,360,361],{},"如果你想修改目标日期和名称，可以调整JavaScript配置：",[213,363,368],{"className":364,"code":366,"language":367,"meta":219},[365],"language-javascript","const config = {\n  targetDate: \"2026-02-17\", // 修改为你想要的目标日期\n  targetName: \"春节\", // 修改为你想要的目标名称\n  // 其他配置...\n};\n","javascript",[189,369,366],{"__ignoreMap":219},[66,371,372],{"id":372},"修改时间单位显示",[17,374,375],{},"如果你想修改时间单位的显示文本，可以调整JavaScript配置：",[213,377,380],{"className":378,"code":379,"language":367,"meta":219},[365],"const config = {\n  // 其他配置...\n  units: {\n    day: { text: \"今日\", unit: \"小时\" },\n    week: { text: \"本周\", unit: \"天\" },\n    month: { text: \"本月\", unit: \"天\" },\n    year: { text: \"本年\", unit: \"天\" }\n  }\n};\n",[189,381,379],{"__ignoreMap":219},[47,383,384],{"id":384},"实现原理",[66,386,68],{"id":387},"核心功能-1",[183,389,390,396,402,408,412],{},[73,391,392,395],{},[76,393,394],{},"倒计时计算","：计算距离目标日期的天数",[73,397,398,401],{},[76,399,400],{},"进度条计算","：计算今日、本周、本月、本年的进度和剩余时间",[73,403,404,407],{},[76,405,406],{},"DOM更新","：动态生成进度条和倒计时内容",[73,409,410,121],{},[76,411,120],{},[73,413,414,416],{},[76,415,114],{},"：使用CSS过渡实现悬停时的显示/隐藏效果",[66,418,419],{"id":419},"代码结构",[54,421,424],{"title":422,":open":423},"代码结构解析","true",[183,425,426,432,438,444,450],{},[73,427,428,431],{},[76,429,430],{},"配置定义","：定义目标日期、名称和时间单位配置",[73,433,434,437],{},[76,435,436],{},"计算器","：提供不同时间单位的进度和剩余时间计算",[73,439,440,443],{},[76,441,442],{},"更新函数","：更新倒计时和进度条显示",[73,445,446,449],{},[76,447,448],{},"启动函数","：初始化和定时更新",[73,451,452,455],{},[76,453,454],{},"事件监听","：支持Pjax和页面加载",[47,457,458],{"id":458},"注意事项",[54,460,462],{"title":461},"使用注意事项",[183,463,464,470,476,482,488],{},[73,465,466,469],{},[76,467,468],{},"兼容性","：该组件使用了现代JavaScript语法，在IE浏览器上可能无法正常工作",[73,471,472,475],{},[76,473,474],{},"性能","：在低配置设备上，定时更新可能会影响性能",[73,477,478,481],{},[76,479,480],{},"样式冲突","：如果你的网站使用了相同的CSS类名，可能会产生样式冲突",[73,483,484,487],{},[76,485,486],{},"目标日期","：确保目标日期设置正确，格式为YYYY-MM-DD",[73,489,490,493],{},[76,491,492],{},"时区问题","：倒计时计算基于本地时区，可能会与服务器时区产生差异",[47,495,496],{"id":496},"常见问题",[66,498,500],{"id":499},"q-倒计时不显示怎么办","Q: 倒计时不显示怎么办？",[17,502,503,506],{},[76,504,505],{},"A:"," 请检查以下几点：",[183,508,509,512,515],{},[73,510,511],{},"确认代码是否正确复制到HTML文件中",[73,513,514],{},"检查浏览器控制台是否有错误信息",[73,516,517],{},"确认目标日期设置正确，格式为YYYY-MM-DD",[66,519,521],{"id":520},"q-进度条不更新怎么办","Q: 进度条不更新怎么办？",[17,523,524,526,527,530],{},[76,525,505],{}," 进度条会每分钟自动更新一次，如果你想立即更新，可以刷新页面或调用 ",[189,528,529],{"code":529},"updateCountdown()"," 函数。",[66,532,534],{"id":533},"q-如何修改进度条的颜色","Q: 如何修改进度条的颜色？",[17,536,537,539],{},[76,538,505],{}," 可以修改CSS变量或直接修改CSS样式：",[213,541,546],{"className":542,"code":544,"language":545,"meta":219},[543],"language-css",":root {\n  --anzhiyu-main: #ff4500; /* 修改为你想要的颜色 */\n  --anzhiyu-background: #f0f0f0; /* 修改为你想要的背景颜色 */\n}\n\n/* 或者直接修改 */\n.cd-progress-bar {\n  background-color: #ff4500; /* 修改为你想要的颜色 */\n}\n\n.cd-item-progress {\n  background-color: #f0f0f0; /* 修改为你想要的背景颜色 */\n}\n","css",[189,547,544],{"__ignoreMap":219},[47,549,550],{"id":550},"总结",[17,552,553],{},"博客侧边栏倒数组件是一个功能丰富、易于使用的前端组件，可以为你的网站增添实用的倒计时和进度显示功能。它具有以下特点：",[70,555,556,559,562,565,568],{},[73,557,558],{},"✅ 功能完整，显示目标日期倒计时和各种时间单位的进度",[73,560,561],{},"✅ 交互友好，悬停效果增强用户体验",[73,563,564],{},"✅ 响应式设计，自动适配不同设备",[73,566,567],{},"✅ 性能优化，定时更新避免频繁DOM操作",[73,569,570],{},"✅ 可自定义，支持修改目标日期、名称和样式",[17,572,573],{},"希望这个教程对你有所帮助，祝你使用愉快！",[47,575,576],{"id":576},"联系方式",[17,578,579,580],{},"如有问题或建议，欢迎在评论区交流或联系我：\n",[21,581,583],{"href":582},"mailto:naiwenzhu123@qq.com","发送邮件",[585,586],"hr",{},[14,588,589],{},[17,590,591],{},"本教程基于anheyu-app主题开发，无需修改主题源文件且代码经过适配\n其他博客系统可能需要适当调整。\n代码已优化，兼容大部分现代浏览器。",{"title":219,"searchDepth":593,"depth":593,"links":594},4,[595,597,602,607,611,615,616,621,622],{"id":49,"depth":596,"text":49},2,{"id":64,"depth":596,"text":64,"children":598},[599,601],{"id":68,"depth":600,"text":68},3,{"id":130,"depth":600,"text":130},{"id":171,"depth":596,"text":171,"children":603},[604,605,606],{"id":174,"depth":600,"text":175},{"id":181,"depth":600,"text":181},{"id":224,"depth":600,"text":225},{"id":241,"depth":596,"text":241,"children":608},[609,610],{"id":358,"depth":600,"text":358},{"id":372,"depth":600,"text":372},{"id":384,"depth":596,"text":384,"children":612},[613,614],{"id":387,"depth":600,"text":68},{"id":419,"depth":600,"text":419},{"id":458,"depth":596,"text":458},{"id":496,"depth":596,"text":496,"children":617},[618,619,620],{"id":499,"depth":600,"text":500},{"id":520,"depth":600,"text":521},{"id":533,"depth":600,"text":534},{"id":550,"depth":596,"text":550},{"id":576,"depth":596,"text":576},[624],"博客美化","2026-03-10 22:41:02","本文介绍 anheyu 博客侧边栏倒数组件的安装与配置，包含代码、可自定义项、实现原理与常见问题。",false,"md","https://dev.jiugg.top/i/4897fd93-4760-4344-b0e1-3a1f52bb885f.webp",{"slots":631},{},true,"/2026/anheyu",null,"https://cdn.jiugg.top/boke/%E5%88%9B%E5%BB%BA%E5%AE%89%E5%92%8C%E9%B1%BC%E5%8D%9A%E5%AE%A2%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%80%92%E6%95%B0%E5%8D%A1%E7%89%87.mp3","https://cdn.jiugg.top/boke/%E5%88%9B%E5%BB%BA%E5%AE%89%E5%92%8C%E9%B1%BC%E5%8D%9A%E5%AE%A2%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%80%92%E6%95%B0%E5%8D%A1%E7%89%87.lrc","AI播客",{"text":639,"minutes":640,"time":641,"words":642},"11 min read",10.65,639000,2130,{"title":5,"description":626},{"loc":633},"posts/2026/anheyu博客侧边栏创建倒数卡片",[647,648,208,649],"anheyu","anheyu-app","倒计时","tech","HkrAeaT3-4nBQZwdmnhz9f_QaM_sa_0pDRE6AVpLzkE",[653,658],{"title":654,"path":655,"stem":656,"date":657,"type":650,"children":-1},"anheyu博客添加侧边栏日历卡片","/2026/20260308-1","posts/2026/20260308-1","2026-03-10 22:41:01",{"title":659,"path":660,"stem":661,"date":662,"type":650,"children":-1},"侧边栏地区欢迎卡片教程","/2026/20260314-1","posts/2026/20260314-1","2026-03-14 21:50:09",1775556257714]