[{"data":1,"prerenderedAt":152},["ShallowReactive",2],{"work-\u002Fworks\u002Fmoon-phase-widget":3,"work-surround-\u002Fworks\u002Fmoon-phase-widget":147},{"id":4,"title":5,"body":6,"cover":129,"date":130,"demo":131,"description":132,"draft":133,"extension":134,"featured":133,"meta":135,"navigation":136,"path":137,"repo":138,"seo":139,"stack":140,"stem":144,"updated":145,"__hash__":146},"works\u002Fworks\u002Fmoon-phase-widget.md","月相小组件",{"type":7,"value":8,"toc":123},"minimark",[9,13,17,93,96,99,112,116,119],[10,11,12],"p",{},"关于页那个月相卡片的独立组件版。起因是看到不少站点想挂个月相装饰，但现成方案不是图片素材就是需要引入框架。",[14,15,16],"h2",{"id":16},"用法",[18,19,24],"pre",{"className":20,"code":21,"language":22,"meta":23,"style":23},"language-html shiki shiki-themes tokyo-night github-light","\u003Cmoon-phase>\u003C\u002Fmoon-phase>\n\u003Cscript type=\"module\" src=\"moon-phase.js\">\u003C\u002Fscript>\n","html","",[25,26,27,48],"code",{"__ignoreMap":23},[28,29,32,36,40,43,45],"span",{"class":30,"line":31},"line",1,[28,33,35],{"class":34},"sUpvg","\u003C",[28,37,39],{"class":38},"sQz7t","moon-phase",[28,41,42],{"class":34},">\u003C\u002F",[28,44,39],{"class":38},[28,46,47],{"class":34},">\n",[28,49,51,53,57,61,65,69,73,75,78,80,82,85,87,89,91],{"class":30,"line":50},2,[28,52,35],{"class":34},[28,54,56],{"class":55},"seN_b","script",[28,58,60],{"class":59},"s71bh"," type",[28,62,64],{"class":63},"szu1u","=",[28,66,68],{"class":67},"sbW-k","\"",[28,70,72],{"class":71},"snP_1","module",[28,74,68],{"class":67},[28,76,77],{"class":59}," src",[28,79,64],{"class":63},[28,81,68],{"class":67},[28,83,84],{"class":71},"moon-phase.js",[28,86,68],{"class":67},[28,88,42],{"class":34},[28,90,56],{"class":55},[28,92,47],{"class":34},[10,94,95],{},"就这两行。没有依赖，gzip 后不到 4KB。",[14,97,98],{"id":98},"实现",[100,101,102,106,109],"ul",{},[103,104,105],"li",{},"月相用简化版康威算法，误差在一天以内，装饰用途足够。",[103,107,108],{},"绘制用 Canvas：先画满月，再用离屏合成擦掉阴影部分，暗面加一层微光避免纯黑死区。",[103,110,111],{},"自定义元素封装，属性可以改尺寸与配色，Shadow DOM 隔离样式，不会污染宿主页。",[14,113,115],{"id":114},"为什么用-web-components","为什么用 Web Components",[10,117,118],{},"组件的归宿是被各种技术栈引用。Web Components 是浏览器原生标准，Vue、React、纯 HTML 都能直接用，不需要为每个框架单独打包一版。",[120,121,122],"style",{},"html pre.shiki code .sUpvg, html code.shiki .sUpvg{--shiki-default:#BA3C97;--shiki-light:#24292E}html pre.shiki code .sQz7t, html code.shiki .sQz7t{--shiki-default:#DE5971;--shiki-light:#22863A}html pre.shiki code .seN_b, html code.shiki .seN_b{--shiki-default:#F7768E;--shiki-light:#22863A}html pre.shiki code .s71bh, html code.shiki .s71bh{--shiki-default:#BB9AF7;--shiki-light:#6F42C1}html pre.shiki code .szu1u, html code.shiki .szu1u{--shiki-default:#89DDFF;--shiki-light:#24292E}html pre.shiki code .sbW-k, html code.shiki .sbW-k{--shiki-default:#89DDFF;--shiki-light:#032F62}html pre.shiki code .snP_1, html code.shiki .snP_1{--shiki-default:#9ECE6A;--shiki-light:#032F62}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":23,"searchDepth":124,"depth":124,"links":125},3,[126,127,128],{"id":16,"depth":50,"text":16},{"id":98,"depth":50,"text":98},{"id":114,"depth":50,"text":115},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmoonstream-moon\u002F1600\u002F1000","2025-05-08","https:\u002F\u002Fmoonstream.cn\u002Fabout","一个零依赖的 Web Component，根据当天日期计算月相并画出对应的月亮，可以直接嵌入任何页面。",false,"md",{},true,"\u002Fworks\u002Fmoon-phase-widget","https:\u002F\u002Fgithub.com",{"title":5,"description":132},[141,142,143],"TypeScript","Web Components","Canvas","works\u002Fmoon-phase-widget",null,"Rs0L8087vKo-b0g-htm6n9-hyzoBUWMoSl4OUtnDDDk",[148,145],{"title":149,"path":150,"stem":151,"children":-1},"Socket Server - Rust 实时通信服务端","\u002Fworks\u002Fsocket-server","works\u002Fsocket-server",1787046421831]