[{"data":1,"prerenderedAt":231},["ShallowReactive",2],{"content:\u002Fposts\u002Ftime-greeting":3,"surround:\u002Fposts\u002Ftime-greeting":220},{"id":4,"title":5,"body":6,"categories":193,"date":195,"description":196,"draft":197,"extension":198,"image":199,"meta":200,"navigation":202,"path":203,"permalink":204,"pinned":197,"published":204,"readingTime":205,"recommend":204,"references":204,"seo":210,"sitemap":211,"stem":212,"tags":213,"type":217,"updated":218,"__hash__":219},"content\u002Fposts\u002Fposts\u002Ftime-greeting.md","Firefly 魔改：时段问候实时时钟组件",{"type":7,"value":8,"toc":179},"minimark",[9,19,22,25,30,37,40,56,60,64,76,80,87,98,105,113,117,123,133,137,143,150,154,164,172,176],[10,11,15],"alert",{"title":12,"type":13,"icon":14},"AI 迁移提示","info","tabler:robot",[16,17,18],"p",{},"本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。",[10,20],{"title":21,"type":13},"> 本文部分内容由 AI 辅助整理，已结合实际操作进行校验，请根据自身环境谨慎使用。",[16,23,24],{},"一个带有温度感的侧边小组件——显示当前时间、日期、星期，并根据早中晚不同时段切换问候语和背景图片，让博客更有\"人味\"。",[26,27,29],"h2",{"id":28},"一功能概览","一、功能概览",[16,31,32],{},[33,34],"img",{"alt":35,"src":36},"时段问候组件","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Ftime-greeting\u002F0001.webp",[16,38,39],{},"主要能力：",[41,42,43,47,50,53],"ul",{},[44,45,46],"li",{},"实时数字时钟，每分钟自动更新",[44,48,49],{},"6 个时段的问候语切换（深夜\u002F早晨\u002F上午\u002F中午\u002F下午\u002F晚上）",[44,51,52],{},"每个时段对应不同的图标和随机风景背景图",[44,54,55],{},"SPA 页面切换时自动恢复运行",[26,57,59],{"id":58},"二核心实现","二、核心实现",[61,62,63],"h3",{"id":63},"组件完整源码",[65,66,72],"pre",{"className":67,"code":69,"language":70,"meta":71},[68],"language-astro","---\nimport { Icon } from \"astro-icon\u002Fcomponents\";\n\ninterface Props { class?: string; style?: string; }\nconst { class: className, style } = Astro.props;\n---\n\n\u003Cdiv id=\"time-greeting\" class:list={[\"card-base flex flex-col relative overflow-hidden\", className]} style={style}>\n    \u003Cdiv class=\"px-5 pt-5 pb-3 flex justify-between items-start\">\n        \u003Cdiv class=\"flex flex-col gap-1\">\n            \u003Cspan class=\"text-base font-bold text-neutral-700 dark:text-neutral-300 greeting-text\">正在获取时间...\u003C\u002Fspan>\n            \u003Cdiv class=\"flex items-end gap-3 text-neutral-800 dark:text-neutral-200\">\n                \u003Cdiv class=\"flex items-baseline\">\n                    \u003Cspan class=\"text-4xl font-bold font-mono time-display\">--:--\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \u003Cdiv class=\"flex flex-col mb-[0.15rem]\">\n                    \u003Cspan class=\"text-xs font-bold opacity-60 uppercase tracking-wider date-week\">---\u003C\u002Fspan>\n                    \u003Cdiv class=\"flex items-baseline text-sm font-bold opacity-80\">\n                        \u003Cspan class=\"date-day\">--\u003C\u002Fspan>\n                        \u003Cspan class=\"opacity-80 ml-0.5 date-month\">\u002F--\u003C\u002Fspan>\n                    \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"text-2xl text-(--primary) greeting-icons mt-1 opacity-80\">\n            \u003CIcon name=\"material-symbols:mode-night-outline-rounded\" class=\"hidden icon-night\" \u002F>\n            \u003CIcon name=\"material-symbols:wb-twilight-rounded\" class=\"hidden icon-morning\" \u002F>\n            \u003CIcon name=\"material-symbols:wb-sunny-outline-rounded\" class=\"hidden icon-noon\" \u002F>\n            \u003CIcon name=\"material-symbols:nightlight-outline-rounded\" class=\"hidden icon-evening\" \u002F>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"w-full h-36 relative overflow-hidden time-image-container\">\n        \u003Cdiv class=\"absolute inset-0 bg-cover bg-center transition-opacity duration-1000 opacity-0 time-image\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"absolute inset-0 bg-gradient-to-t from-(--card-bg) via-transparent to-transparent opacity-60\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cscript is:inline>\n  (() => {\n  const weekDays = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];\n  if (!window.timeGreetingImage) { window.timeGreetingImage = `https:\u002F\u002Frandom-api.czl.net\u002Fpic\u002Ffj?t=${new Date().getTime()}`; }\n  function updateTimeGreeting() {\n    const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes();\n    const month = (now.getMonth()+1).toString().padStart(2,'0');\n    const day = now.getDate().toString().padStart(2,'0');\n    const hoursStr = hours.toString().padStart(2,'0');\n    const minutesStr = minutes.toString().padStart(2,'0');\n    let greeting='', period='';\n    if (hours>=0&&hours\u003C6) { greeting='夜深了，早点休息！'; period='night'; }\n    else if (hours>=6&&hours\u003C9) { greeting='早上好，新的一天！'; period='morning'; }\n    else if (hours>=9&&hours\u003C12) { greeting='上午好，充满活力！'; period='noon'; }\n    else if (hours>=12&&hours\u003C14) { greeting='中午好，记得午休！'; period='noon'; }\n    else if (hours>=14&&hours\u003C18) { greeting='下午好，继续加油！'; period='noon'; }\n    else if (hours>=18&&hours\u003C24) { greeting='晚上好，放松一下！'; period='evening'; }\n    document.querySelectorAll('.date-day').forEach(e=>e.textContent=day);\n    document.querySelectorAll('.date-month').forEach(e=>e.textContent=`\u002F${month}`);\n    document.querySelectorAll('.date-week').forEach(e=>e.textContent=weekDays[now.getDay()]);\n    document.querySelectorAll('.time-display').forEach(e=>e.textContent=`${hoursStr}:${minutesStr}`);\n    document.querySelectorAll('.greeting-text').forEach(e=>e.textContent=greeting);\n    document.querySelectorAll('.greeting-icons').forEach(c=>{c.querySelectorAll('svg').forEach(i=>{i.classList.toggle('hidden',!i.classList.contains(`icon-${period}`));});});\n    document.querySelectorAll('.time-image').forEach(e=>{\n      if(e.getAttribute('data-image-set')!=='true'){e.style.backgroundImage=`url('${window.timeGreetingImage}')`;e.setAttribute('data-image-set','true');setTimeout(()=>e.classList.replace('opacity-0','opacity-100'),50);}\n    });\n  }\n  if(window.timeGreetingInterval) clearInterval(window.timeGreetingInterval);\n  window.timeGreetingInterval=setInterval(updateTimeGreeting,60000);\n  updateTimeGreeting();\n  document.addEventListener(\"swup:contentReplaced\",()=>updateTimeGreeting());\n  })();\n\u003C\u002Fscript>\n","astro","title=\"src\u002Fcomponents\u002Fwidget\u002FTimeGreeting.astro\"",[73,74,69],"code",{"__ignoreMap":75},"",[26,77,79],{"id":78},"三注册组件","三、注册组件",[16,81,82,83,86],{},"在 ",[73,84,85],{"code":85},"src\u002Fcomponents\u002Flayout\u002FSideBar.astro"," 中导入：",[65,88,96],{"className":89,"code":91,"highlights":92,"language":94,"meta":95},[90],"language-js","import Advertisement from \"@\u002Fcomponents\u002Fwidget\u002FAdvertisement.astro\";\nimport Announcement from \"@\u002Fcomponents\u002Fwidget\u002FAnnouncement.astro\";\nimport Calendar from \"@\u002Fcomponents\u002Fwidget\u002FCalendar.astro\";\n\u002F\u002F ...\nimport TimeGreeting from \"@\u002Fcomponents\u002Fwidget\u002FTimeGreeting.astro\";\n",[93],5,"js","title=\"src\u002Fcomponents\u002Flayout\u002FSideBar.astro\" ins=",[73,97,91],{"__ignoreMap":75},[16,99,100,101,104],{},"同时在 ",[73,102,103],{"code":103},"componentMap"," 中注册：",[65,106,111],{"className":107,"code":108,"highlights":109,"language":94,"meta":95},[90],"const componentMap = {\n    profile: Profile,\n    announcement: Announcement,\n    categories: Categories,\n    \u002F\u002F ...\n    timeGreeting: TimeGreeting,\n    dynamic: Dynamic,\n    schedule: Schedule,\n    quoteOfTheDay: QuoteOfTheDay,\n};\n",[110],6,[73,112,108],{"__ignoreMap":75},[26,114,116],{"id":115},"四注册类型","四、注册类型",[16,118,82,119,122],{},[73,120,121],{"code":121},"src\u002Ftypes\u002FsidebarConfig.ts"," 的类型联合中添加组件名：",[65,124,131],{"className":125,"code":127,"highlights":128,"language":129,"meta":130},[126],"language-typescript","export type WidgetComponentType =\n    | \"stats\"\n    | \"calendar\"\n    | \"music\"\n    | \"siteInfo\"\n    | \"timeGreeting\";\n",[110],"typescript","title=\"src\u002Ftypes\u002FsidebarConfig.ts\" ins=",[73,132,127],{"__ignoreMap":75},[26,134,136],{"id":135},"五配置方式","五、配置方式",[16,138,82,139,142],{},[73,140,141],{"code":141},"sidebarConfig.ts"," 的右侧边栏中配置：",[65,144,148],{"className":145,"code":146,"language":129,"meta":147},[126],"{\n  type: \"timeGreeting\",\n  enable: true,\n  position: \"top\",\n  showOnPostPage: false,\n}\n","title=\"src\u002Fconfig\u002FsidebarConfig.ts\"",[73,149,146],{"__ignoreMap":75},[26,151,153],{"id":152},"六相关文件","六、相关文件",[16,155,156,157],{},"组件：",[158,159,163],"a",{"href":160,"rel":161},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog\u002Fblob\u002Fmaster\u002Fsrc\u002Fcomponents\u002Fwidget\u002FTimeGreeting.astro",[162],"nofollow","\u002Fsrc\u002Fcomponents\u002Fwidget\u002FTimeGreeting.astro",[16,165,166,167],{},"相关源码：",[158,168,171],{"href":169,"rel":170},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog",[162],"olinll\u002Ffirefly-blog",[26,173,175],{"id":174},"最后","🔗 最后",[16,177,178],{},"这个组件原本是一个简单的时钟，逐步迭代加入了时段问候和随机背景图。如果你想自定义问候语或时段划分，直接在源码中修改即可。",{"title":75,"searchDepth":180,"depth":180,"links":181},4,[182,184,188,189,190,191,192],{"id":28,"depth":183,"text":29},2,{"id":58,"depth":183,"text":59,"children":185},[186],{"id":63,"depth":187,"text":63},3,{"id":78,"depth":183,"text":79},{"id":115,"depth":183,"text":116},{"id":135,"depth":183,"text":136},{"id":152,"depth":183,"text":153},{"id":174,"depth":183,"text":175},[194],"Firefly","2026-07-04 13:09:20","侧边栏实时时钟组件，根据时段自动切换问候语和背景图。",false,"md","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Ftime-greeting\u002Fcover.webp",{"slots":201},{},true,"\u002Fposts\u002Ftime-greeting",null,{"text":206,"minutes":207,"time":208,"words":209},"4 min read",3.265,195900,653,{"title":5,"description":196},{"loc":203},"posts\u002Fposts\u002Ftime-greeting",[194,214,215,216],"博客","二开","小部件","tech","2026-07-22 19:30:00","oZuRR92JcLZ_La7_7vO3nTaSqIU-Vq-MQzVI8anlExU",[221,226],{"title":222,"path":223,"stem":224,"date":225,"type":217,"children":-1},"Firefly 魔改：Umami Share API 浏览量展示","\u002Fposts\u002Fumami-views","posts\u002Fposts\u002Fumami-views","2026-07-03 21:40:29",{"title":227,"path":228,"stem":229,"date":230,"type":217,"children":-1},"Firefly 魔改：GitHub 贡献热力图侧边栏","\u002Fposts\u002Fgithub-heatmap","posts\u002Fposts\u002Fgithub-heatmap","2026-07-04 13:10:29",1788712222714]