[{"data":1,"prerenderedAt":667},["ShallowReactive",2],{"post-/2026/20260308-1":3,"surround-/2026/20260308-1":656},{"id":4,"title":5,"body":6,"categories":628,"date":630,"description":631,"draft":632,"extension":633,"image":634,"meta":635,"navigation":637,"path":638,"permalink":639,"podcastAudio":640,"podcastLyric":641,"podcastTitle":642,"published":639,"readingTime":643,"recommend":605,"references":639,"seo":648,"sitemap":649,"stem":650,"tags":651,"type":654,"updated":630,"__hash__":655},"content/posts/2026/20260308-1.md","anheyu博客添加侧边栏日历卡片",{"type":7,"value":8,"toc":597},"minimark",[9,12,27,41,45,49,52,65,74,77,81,128,131,169,172,176,179,182,212,222,226,233,239,242,245,248,329,332,335,343,346,349,355,358,361,390,393,396,451,454,457,489,492,496,502,513,517,522,533,536,540,545,551,554,557,574,577,581,589,592],[10,11,5],"h1",{"id":5},[13,14,15],"blockquote",{},[16,17,18,19,26],"p",{},"基于的",[20,21,25],"a",{"href":22,"rel":23},"https://everfu.github.io/solitude-demo/posts/874ddadb.html",[24],"nofollow","伍拾柒","教程进行修改",[28,29,31,32,31,37],"div",{"style":30},"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  ",[33,34,36],"span",{"style":35},"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",[16,38,40],{"style":39},"margin: 0; font-size: 14px;","无需修改主题源文件且代码经过适配",[28,42,44],{"style":43},"margin: 16px 0; padding: 12px; border: 1px solid #888; border-radius: 4px; font-size: 15px; line-height: 1.6; background: transparent;","\n本人大学专业并不与开发相关，仅保证代码可正常运行，不保证其美观性\n",[46,47,48],"h2",{"id":48},"介绍",[16,50,51],{},"博客侧边栏日历组件是一个轻量级的前端组件，用于在网页侧边栏显示当前日期、周数、阳历和农历信息，以及当月的日历网格。该组件支持响应式设计，在不同设备上都能良好显示。",[28,53,31,54,57],{"style":30},[33,55,36],{"style":56},"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; box-sizing: border-box; flex-shrink: 0;",[16,58,60,61,64],{"style":59},"margin: 0; font-size: 14px; line-height: 1.5;","该教程的公开版源码未必能有此效果，请自行修改或者参考",[20,62,25],{"href":22,"style":63},"color: #4a90e2; text-decoration: none; font-weight: 500;","，本源码仅可用，与本站使用的日历卡片源码毫无关系，因接口写法问题修改了大量代码，与自用接口挂钩导致无法公开使用，请谅解。",[66,67,69],"folding",{"title":68},"效果图",[70,71],"pic",{"caption":72,"src":73},"anheyu-app侧边栏日历示例图","https://dev.jiugg.top/i/fa0961d9-f966-43ad-8e79-5729867e0296.webp",[46,75,76],{"id":76},"功能介绍",[78,79,80],"h3",{"id":80},"核心功能",[82,83,84,92,98,104,110,116,122],"ul",{},[85,86,87,91],"li",{},[88,89,90],"strong",{},"周数显示","：显示当前是当年的第几周和星期几",[85,93,94,97],{},[88,95,96],{},"日期显示","：大号字体显示当前日期",[85,99,100,103],{},[88,101,102],{},"阳历信息","：显示当前年份、月份和一年中的第几天",[85,105,106,109],{},[88,107,108],{},"农历信息","：显示农历年份、月份和日期，包括干支纪年和生肖",[85,111,112,115],{},[88,113,114],{},"日历网格","：显示当月的日历网格，标记当天日期",[85,117,118,121],{},[88,119,120],{},"响应式设计","：在移动端设备上自动调整布局和字体大小",[85,123,124,127],{},[88,125,126],{},"智能农历转换","：优先使用本地农历库，失败时自动切换到API和备用计算方案",[78,129,130],{"id":130},"技术特点",[82,132,133,139,145,151,157,163],{},[85,134,135,138],{},[88,136,137],{},"模块化设计","：代码采用模块化结构，易于理解和扩展",[85,140,141,144],{},[88,142,143],{},"性能优化","：DOM元素缓存，避免重复查询",[85,146,147,150],{},[88,148,149],{},"容错处理","：农历转换失败时自动切换到备用方案",[85,152,153,156],{},[88,154,155],{},"响应式布局","：使用CSS Grid和媒体查询实现响应式设计",[85,158,159,162],{},[88,160,161],{},"样式隔离","：使用独立的样式标签，避免与现有样式冲突",[85,164,165,168],{},[88,166,167],{},"兼容性良好","：支持所有现代浏览器，代码结构清晰易维护",[46,170,171],{"id":171},"安装方法",[78,173,175],{"id":174},"方法一安和鱼博客系统适配","方法一：安和鱼博客系统适配",[16,177,178],{},"如果你使用的是安和鱼（AnHeYu）博客系统，可以将以下代码添加到后台侧边栏配置中：",[78,180,181],{"id":181},"配置步骤",[183,184,185,193,209],"ol",{},[85,186,187,188,192],{},"登录安和鱼博客系统后台（通常为 ",[189,190,191],"code",{"code":191},"你的域名/admin","）",[85,194,195,196,199,200,199,203,199,206],{},"进入 ",[88,197,198],{},"系统管理"," → ",[88,201,202],{},"系统设置",[88,204,205],{},"外观配置",[88,207,208],{},"侧边栏",[85,210,211],{},"将以下代码添加到侧边栏配置中",[213,214,220],"pre",{"className":215,"code":217,"language":218,"meta":219},[216],"language-html","\u003Cstyle>\n    .calendar-container {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      padding: 0;\n    }\n    \n    .calendar-left {\n      width: 50%;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding-right: 16px;\n      text-align: center;\n      min-height: 120px;\n      justify-content: center;\n    }\n    \n    .calendar-week {\n      font-size: 14px;\n      font-weight: 600;\n      margin-bottom: 12px;\n      width: 100%;\n      text-align: center;\n    }\n    \n    .calendar-date {\n      font-size: 48px;\n      font-weight: 700;\n      color: var(--anzhiyu-main, #1e88e5);\n      line-height: 1;\n      margin-bottom: 12px;\n    }\n    \n    .calendar-solar {\n      font-size: 12px;\n      margin-bottom: 4px;\n      text-align: center;\n    }\n    \n    .calendar-lunar {\n      font-size: 12px;\n      color: #a1a2b8;\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    \n    .calendar-right {\n      width: 50%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    .calendar-grid {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      gap: 4px;\n      width: 100%;\n    }\n    \n    .calendar-day {\n      aspect-ratio: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: clamp(8px, 2vw, 12.7px);\n      border-radius: 50%;\n      transition: all 0.2s ease;\n      width: 100%;\n      max-width: 40px;\n      margin: 0 auto;\n    }\n    \n    .calendar-day a {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      text-decoration: none;\n      font-size: inherit;\n    }\n    \n    .calendar-day a:hover {\n      background-color: rgba(30, 136, 229, 0.1);\n    }\n    \n    .calendar-day a.now {\n      background-color: var(--anzhiyu-main, #1e88e5);\n      color: white;\n      font-weight: 600;\n    }\n    \n    .calendar-day.other-month a {\n      color: #ccc;\n    }\n    \n    @media (max-width: 768px) {\n      .calendar-container {\n        padding: 0;\n        flex-direction: column;\n      }\n      \n      .calendar-left {\n        width: 100%;\n        padding-right: 0;\n        margin-bottom: 16px;\n      }\n      \n      .calendar-right {\n        width: 100%;\n      }\n      \n      .calendar-date {\n        font-size: 36px;\n      }\n      \n      .calendar-day {\n        max-width: 36px;\n      }\n    }\n    \n    @media (max-width: 480px) {\n      .calendar-date {\n        font-size: 28px;\n      }\n      \n      .calendar-day {\n        max-width: 32px;\n        font-size: clamp(6px, 2vw, 10px);\n      }\n      \n      .calendar-grid {\n        gap: 2px;\n      }\n    }\n\u003C/style>\n\n\u003Cdiv class=\"calendar-container\">\n  \u003Cdiv class=\"calendar-left\">\n    \u003Cdiv class=\"calendar-week\" id=\"calendar-week\">\u003C/div>\n    \u003Cdiv class=\"calendar-date\" id=\"calendar-date\">\u003C/div>\n    \u003Cdiv class=\"calendar-solar\" id=\"calendar-solar\">\u003C/div>\n    \u003Cdiv class=\"calendar-lunar\" id=\"calendar-lunar\">\u003C/div>\n  \u003C/div>\n  \u003Cdiv class=\"calendar-right\">\n    \u003Cdiv class=\"calendar-grid\" id=\"calendar-main\">\u003C/div>\n  \u003C/div>\n\u003C/div>\n\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js\" defer>\u003C/script>\n\n\u003Cscript>\n(function() {\n  'use strict';\n  const now = new Date();\n  let calendarElements = null;\n  \n  function getLunarFromAPI() {\n    return new Promise((resolve, reject) => {\n      const controller = new AbortController();\n      const timeoutId = setTimeout(() => controller.abort(), 3000);\n      \n      fetch('https://api.lolimi.cn/API/rl/api?type=json', {\n        signal: controller.signal\n      })\n        .then(response => {\n          clearTimeout(timeoutId);\n          if (!response.ok) {\n            throw new Error('API request failed');\n          }\n          return response.json();\n        })\n        .then(data => {\n          if (data.code === 1 && data.data) {\n            resolve(data.data);\n          } else {\n            reject(new Error('Invalid API response'));\n          }\n        })\n        .catch(() => {\n          clearTimeout(timeoutId);\n          reject(new Error('API request failed'));\n        });\n    });\n  }\n\n  function getSimpleLunarDate(year, month, date) {\n    const lunarMonths = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];\n    const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];\n    \n    const monthIndex = month;\n    const dayIndex = date - 1;\n    \n    return {\n      month: lunarMonths[monthIndex] || '正月',\n      day: lunarDays[dayIndex] || '初一'\n    };\n  }\n\n  function cacheElements() {\n    if (!calendarElements) {\n      calendarElements = {\n        container: document.querySelector('.calendar-container'),\n        week: document.getElementById('calendar-week'),\n        date: document.getElementById('calendar-date'),\n        solar: document.getElementById('calendar-solar'),\n        lunar: document.getElementById('calendar-lunar'),\n        main: document.getElementById('calendar-main')\n      };\n    }\n    return calendarElements;\n  }\n\n  function generateCalendarDays(year, month, date, daysInMonth, startDay) {\n    const elements = cacheElements();\n    if (!elements.main) return;\n    \n    elements.main.innerHTML = '';\n    \n    const weeksNeeded = Math.ceil((daysInMonth + startDay) / 7);\n    let currentDay = '';\n    let isCurrentMonth = false;\n    \n    for (let week = 0; week \u003C weeksNeeded; week++) {\n      for (let day = 0; day \u003C 7; day++) {\n        if (week === 0 && day === startDay) {\n          currentDay = 1;\n          isCurrentMonth = true;\n        }\n        \n        const dayEl = document.createElement('div');\n        dayEl.className = 'calendar-day';\n        \n        if (currentDay === '' || currentDay > daysInMonth) {\n          dayEl.classList.add('other-month');\n        }\n        \n        const isToday = currentDay === date;\n        const nowClass = isToday ? \" class='now'\" : \"\";\n        dayEl.innerHTML = `\u003Ca${nowClass}>${currentDay}\u003C/a>`;\n        elements.main.appendChild(dayEl);\n        \n        if (currentDay >= daysInMonth) {\n          currentDay = '';\n          isCurrentMonth = false;\n        }\n        if (isCurrentMonth) {\n          currentDay += 1;\n        }\n      }\n    }\n  }\n\n  function calculateWeekNumber() {\n    const startOfYear = new Date(now.getFullYear(), 0, 1);\n    const dayOfYear = Math.floor((now - startOfYear) / (1000 * 60 * 60 * 24));\n    const dayOfWeek = now.getDay();\n    return dayOfWeek - (dayOfYear % 7) >= 0 ? Math.ceil(dayOfYear / 7) : Math.ceil(dayOfYear / 7) + 1;\n  }\n\n  function updateCalendarDisplay() {\n    const elements = cacheElements();\n    if (!elements.container) return;\n    \n    const year = now.getFullYear();\n    const month = now.getMonth();\n    const date = now.getDate();\n    const dayOfWeek = now.getDay();\n    \n    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;\n    const weekNames = [\"周日\", \"周一\", \"周二\", \"周三\", \"周四\", \"周五\", \"周六\"];\n    const monthData = [\n      { month: \"1月\", days: 31 },\n      { month: \"2月\", days: isLeapYear ? 29 : 28 },\n      { month: \"3月\", days: 31 },\n      { month: \"4月\", days: 30 },\n      { month: \"5月\", days: 31 },\n      { month: \"6月\", days: 30 },\n      { month: \"7月\", days: 31 },\n      { month: \"8月\", days: 31 },\n      { month: \"9月\", days: 30 },\n      { month: \"10月\", days: 31 },\n      { month: \"11月\", days: 30 },\n      { month: \"12月\", days: 31 },\n    ];\n    \n    const currentMonth = monthData[month];\n    const monthName = currentMonth.month;\n    const daysInMonth = currentMonth.days;\n    \n    const firstDayOfMonth = new Date(year, month, 1);\n    const startDay = firstDayOfMonth.getDay();\n    \n    generateCalendarDays(year, month, date, daysInMonth, startDay);\n    \n    const weekNumber = calculateWeekNumber();\n    \n    if (elements.week) elements.week.innerHTML = `第${weekNumber}周 ${weekNames[dayOfWeek]}`;\n    if (elements.date) elements.date.innerHTML = date.toString().padStart(2, \"0\");\n    \n    const startOfYear = new Date(year, 0, 1);\n    const dayOfYear = Math.floor((now - startOfYear) / (1000 * 60 * 60 * 24)) + 1;\n    if (elements.solar) elements.solar.innerHTML = `${year}年${monthName} 第${dayOfYear}天`;\n    \n    if (elements.lunar) {\n      updateLunarDisplay(year, month, date, elements.lunar);\n    }\n  }\n\n  function updateLunarDisplay(year, month, date, lunarEl) {\n    if (typeof chineseLunar !== 'undefined' && chineseLunar) {\n      try {\n        const lunarDate = chineseLunar.solarToLunar(new Date(year, month, date));\n        const animalYear = chineseLunar.format(lunarDate, \"A\");\n        const ganzhiYear = chineseLunar.format(lunarDate, \"T\").slice(0, -1);\n        const lunarMon = chineseLunar.format(lunarDate, \"M\");\n        const lunarDay = chineseLunar.format(lunarDate, \"d\");\n        const lunarText = `${ganzhiYear}${animalYear}年 ${lunarMon}${lunarDay}`;\n        lunarEl.innerHTML = lunarText;\n        return;\n      } catch (e) {\n      }\n    }\n    fallbackToAPI(lunarEl);\n  }\n\n  function fallbackToAPI(lunarEl) {\n    getLunarFromAPI().then(data => {\n      if (data && data.lunar) {\n        lunarEl.innerHTML = data.lunar;\n      } else {\n        fallbackToSimpleCalculation(lunarEl);\n      }\n    }).catch(() => {\n      fallbackToSimpleCalculation(lunarEl);\n    });\n  }\n\n  function fallbackToSimpleCalculation(lunarEl) {\n    const year = now.getFullYear();\n    const month = now.getMonth();\n    const date = now.getDate();\n    const simpleLunar = getSimpleLunarDate(year, month, date);\n    lunarEl.innerHTML = `${year}年 ${simpleLunar.month}${simpleLunar.day}`;\n  }\n\n  function initializeCalendar() {\n    try {\n      updateCalendarDisplay();\n    } catch (e) {\n      updateCalendarDisplay();\n    }\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initializeCalendar);\n  } else {\n    initializeCalendar();\n  }\n\n  if (window.addEventListener) {\n    window.addEventListener('pjax:complete', initializeCalendar);\n  }\n\n  window.initializeCalendar = initializeCalendar;\n})();\n\u003C/script>\n","html","",[189,221,217],{"__ignoreMap":219},[78,223,225],{"id":224},"方法二外部引入","方法二：外部引入",[16,227,228,229,232],{},"将代码保存为 ",[189,230,231],{"code":231},"calendar.js"," 文件，然后在HTML中引入：",[213,234,237],{"className":235,"code":236,"language":218,"meta":219},[216],"\u003Clink rel=\"stylesheet\" href=\"path/to/calendar.css\">\n\u003Cdiv class=\"calendar-container\">\n  \u003C!-- 日历HTML结构 -->\n\u003C/div>\n\u003Cscript src=\"https://cdn.jsdelivr.net/npm/chinese-lunar@0.1.4/lib/chinese-lunar.js\" defer>\u003C/script>\n\u003Cscript src=\"path/to/calendar.js\">\u003C/script>\n",[189,238,236],{"__ignoreMap":219},[46,240,241],{"id":241},"自定义配置",[16,243,244],{},"日历组件的样式和行为可以通过修改CSS和JavaScript来调整：",[16,246,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,302,315],"tbody",{},[255,274,275,279,282,285],{},[276,277,278],"td",{},"--anzhiyu-main",[276,280,281],{},"CSS变量",[276,283,284],{},"#1e88e5",[276,286,287],{},"主题主色调，用于日期和当天标记",[255,289,290,293,296,299],{},[276,291,292],{},"calendar-date",[276,294,295],{},"CSS类",[276,297,298],{},"font-size: 48px",[276,300,301],{},"当前日期字体大小",[255,303,304,307,309,312],{},[276,305,306],{},"calendar-grid",[276,308,295],{},[276,310,311],{},"grid-template-columns: repeat(7, 1fr)",[276,313,314],{},"日历网格布局",[255,316,317,320,323,326],{},[276,318,319],{},"MOBILE_WIDTH",[276,321,322],{},"媒体查询",[276,324,325],{},"768px",[276,327,328],{},"判定为移动端的宽度阈值",[78,330,331],{"id":331},"修改主题颜色",[16,333,334],{},"如果你想修改日历的主题颜色，可以调整CSS变量：",[213,336,341],{"className":337,"code":339,"language":340,"meta":219},[338],"language-css",":root {\n  --anzhiyu-main: #ff4500; /* 修改为你想要的颜色 */\n}\n","css",[189,342,339],{"__ignoreMap":219},[78,344,345],{"id":345},"修改字体大小",[16,347,348],{},"如果你想调整日期显示的字体大小，可以修改CSS：",[213,350,353],{"className":351,"code":352,"language":340,"meta":219},[338],".calendar-date {\n  font-size: 40px; /* 修改为你想要的大小 */\n  /* 其他样式... */\n}\n",[189,354,352],{"__ignoreMap":219},[46,356,357],{"id":357},"实现原理",[78,359,80],{"id":360},"核心功能-1",[183,362,363,369,375,381,386],{},[85,364,365,368],{},[88,366,367],{},"DOM元素缓存","：使用缓存机制避免重复查询DOM元素，提升性能",[85,370,371,374],{},[88,372,373],{},"周数计算","：根据当前日期计算当年的周数",[85,376,377,380],{},[88,378,379],{},"日历网格生成","：根据当月天数和起始星期几生成日历网格",[85,382,383,127],{},[88,384,385],{},"农历转换",[85,387,388,156],{},[88,389,155],{},[78,391,392],{"id":392},"代码结构",[16,394,395],{},":::folding open\n代码结构解析",[183,397,398,404,410,416,422,427,433,439,445],{},[85,399,400,403],{},[88,401,402],{},"全局变量","：定义当前日期和DOM元素缓存",[85,405,406,409],{},[88,407,408],{},"农历获取","：提供API和备用计算方案",[85,411,412,415],{},[88,413,414],{},"DOM操作","：缓存和生成日历元素",[85,417,418,421],{},[88,419,420],{},"日历生成","：计算并生成日历网格",[85,423,424,426],{},[88,425,373],{},"：计算当年的周数",[85,428,429,432],{},[88,430,431],{},"显示更新","：更新日历各部分的显示内容",[85,434,435,438],{},[88,436,437],{},"农历显示","：处理农历信息的显示",[85,440,441,444],{},[88,442,443],{},"初始化函数","：初始化日历组件",[85,446,447,450],{},[88,448,449],{},"事件监听","：支持DOM加载和Pjax\n:::",[46,452,453],{"id":453},"注意事项",[16,455,456],{},"使用注意事项",[183,458,459,465,471,477,483],{},[85,460,461,464],{},[88,462,463],{},"兼容性","：该组件使用了现代JavaScript语法，在IE浏览器上可能无法正常工作",[85,466,467,470],{},[88,468,469],{},"性能","：在低配置设备上，农历API请求可能会影响性能",[85,472,473,476],{},[88,474,475],{},"依赖","：依赖外部农历库和API，网络不稳定时可能会影响农历显示",[85,478,479,482],{},[88,480,481],{},"样式冲突","：如果你的网站使用了相同的CSS类名，可能会产生样式冲突",[85,484,485,488],{},[88,486,487],{},"移动端","：在宽度小于768px的设备上，日历布局会自动调整",[46,490,491],{"id":491},"常见问题",[78,493,495],{"id":494},"q-日历不显示怎么办","Q: 日历不显示怎么办？",[16,497,498,501],{},[88,499,500],{},"A:"," 请检查以下几点：",[183,503,504,507,510],{},[85,505,506],{},"确认代码是否正确复制到HTML文件中",[85,508,509],{},"检查浏览器控制台是否有错误信息",[85,511,512],{},"确认网络连接正常，能够加载农历库和API",[78,514,516],{"id":515},"q-农历信息显示不正确怎么办","Q: 农历信息显示不正确怎么办？",[16,518,519,521],{},[88,520,500],{}," 农历转换使用了多级备用方案：",[183,523,524,527,530],{},[85,525,526],{},"首先尝试使用本地农历库",[85,528,529],{},"失败时尝试使用API",[85,531,532],{},"最后使用备用计算方案",[16,534,535],{},"如果所有方案都失败，可能是网络问题或农历库加载失败。",[78,537,539],{"id":538},"q-如何修改日历的大小","Q: 如何修改日历的大小？",[16,541,542,544],{},[88,543,500],{}," 可以修改CSS中的相关样式：",[213,546,549],{"className":547,"code":548,"language":340,"meta":219},[338],".calendar-container {\n  width: 100%; /* 修改为你想要的宽度 */\n  /* 其他样式... */\n}\n\n.calendar-date {\n  font-size: 48px; /* 修改为你想要的大小 */\n  /* 其他样式... */\n}\n",[189,550,548],{"__ignoreMap":219},[46,552,553],{"id":553},"总结",[16,555,556],{},"博客侧边栏日历组件是一个功能丰富、易于使用的前端组件，可以为你的网站增添实用的日期显示功能。它具有以下特点：",[82,558,559,562,565,568,571],{},[85,560,561],{},"✅ 功能完整，显示周数、日期、阳历和农历信息",[85,563,564],{},"✅ 响应式设计，自动适配不同设备",[85,566,567],{},"✅ 智能农历转换，多级备用方案确保显示稳定",[85,569,570],{},"✅ 轻量级实现，加载速度快",[85,572,573],{},"✅ 可自定义，支持修改颜色、字体大小等样式",[16,575,576],{},"希望这个教程对你有所帮助，祝你使用愉快！",[46,578,580],{"id":579},"联系方式","📞 联系方式",[16,582,583,584],{},"如有问题或建议，欢迎在评论区交流或联系我：\n",[20,585,588],{"href":586,"style":587},"https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=naiwenzhu123@qq.com","display: inline-block; padding: 8px 16px; background-color: #4a90e2; color: white; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 500;","发送邮件 📧",[590,591],"hr",{},[13,593,594],{},[16,595,596],{},"本教程基于anheyu-app主题开发，无需修改主题源文件且代码经过适配\n其他博客系统可能需要适当调整。\n代码已优化，兼容大部分现代浏览器。",{"title":219,"searchDepth":598,"depth":598,"links":599},4,[600,602,607,612,616,620,621,626,627],{"id":48,"depth":601,"text":48},2,{"id":76,"depth":601,"text":76,"children":603},[604,606],{"id":80,"depth":605,"text":80},3,{"id":130,"depth":605,"text":130},{"id":171,"depth":601,"text":171,"children":608},[609,610,611],{"id":174,"depth":605,"text":175},{"id":181,"depth":605,"text":181},{"id":224,"depth":605,"text":225},{"id":241,"depth":601,"text":241,"children":613},[614,615],{"id":331,"depth":605,"text":331},{"id":345,"depth":605,"text":345},{"id":357,"depth":601,"text":357,"children":617},[618,619],{"id":360,"depth":605,"text":80},{"id":392,"depth":605,"text":392},{"id":453,"depth":601,"text":453},{"id":491,"depth":601,"text":491,"children":622},[623,624,625],{"id":494,"depth":605,"text":495},{"id":515,"depth":605,"text":516},{"id":538,"depth":605,"text":539},{"id":553,"depth":601,"text":553},{"id":579,"depth":601,"text":580},[629],"博客美化","2026-03-10 22:41:01","本文为anheyu博客侧边栏日历卡片美化教程，无需改主题源码，含安装、样式自定义、功能说明及常见问题解决。",false,"md","https://dev.jiugg.top/i/4e0f4a4a-ff2d-4e6f-a501-60f783f8b8f2.webp",{"slots":636},{},true,"/2026/20260308-1",null,"https://cdn.jiugg.top/boke/2026/anheyu+博客添加侧边栏日历.mp3","https://cdn.jiugg.top/boke/2026/anheyu+博客添加侧边栏日历.lrc","AI播客",{"text":644,"minutes":645,"time":646,"words":647},"14 min read",13.035,782100,2607,{"title":5,"description":631},{"loc":638},"posts/2026/20260308-1",[652,653,208],"anheyu","anheyu-app","tech","_QdufsmHP5yeFZjQroJZbYaUJe6gpMyC2iCmJ4y8xd8",[657,662],{"title":658,"path":659,"stem":660,"date":661,"type":654,"children":-1},"在安和鱼（Anheyu）博客中添加网页悬浮立牌","/2026/20260310-2","posts/2026/20260310-2","2026-03-10 22:28:39",{"title":663,"path":664,"stem":665,"date":666,"type":654,"children":-1},"anheyu博客侧边栏创建倒数卡片","/2026/anheyu","posts/2026/anheyu博客侧边栏创建倒数卡片","2026-03-10 22:41:02",1775556257714]