Nafsi

基于 Thumbhash + Sharp 进行图片优化

Mon, 15 Dec 2025 00:00:00 GMT

const{Fragment:i,jsx:h,jsxs:s}=arguments[0];function _createMdxContent(l){const n={a:"a",button:"button",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",rect:"rect",span:"span",strong:"strong",svg:"svg",ul:"ul",...l.components};return s(i,{children:[h(n.h2,{id:"前言",children:h(n.a,{className:"anchor",href:"#前言",children:"前言"})}),"\n",s(n.p,{children:["当页面加载完成时，图片尚未加载完成，并且没有宽度与高度的信息，导致图片加载完成时会撑开页面，造成",h(n.strong,{children:"累计布局偏移（CLS）"}),"。"]}),"\n",h(n.p,{children:"解决思路：在图片加载前显示占位符，预先占据空间，防止布局跳动。"}),"\n",h(n.h2,{id:"技术选型",children:h(n.a,{className:"anchor",href:"#技术选型",children:"技术选型"})}),"\n",h(n.h3,{id:"thumbhash占位符生成",children:h(n.a,{className:"anchor",href:"#thumbhash占位符生成",children:"Thumbhash：占位符生成"})}),"\n",h(n.p,{children:"Thumbhash 是一个轻量级图片占位符算法，相比 BlurHash："}),"\n",s(n.ul,{children:["\n",s(n.li,{children:[h(n.strong,{children:"更小体积"}),"：仅 25 bytes"]}),"\n",s(n.li,{children:[h(n.strong,{children:"更多细节"}),"：在相同空间内编码更丰富的颜色信息"]}),"\n",s(n.li,{children:[h(n.strong,{children:"内置宽高比"}),"：自带图片尺寸信息"]}),"\n"]}),"\n",s(n.p,{children:["参考：",h(n.a,{href:"https://evanw.github.io/thumbhash/",children:"Thumbhash 官方"})]}),"\n",h(n.h3,{id:"sharp图片处理",children:h(n.a,{className:"anchor",href:"#sharp图片处理",children:"Sharp：图片处理"})}),"\n",h(n.p,{children:"Sharp 是基于 libvips 的高性能图片处理库："}),"\n",s(n.ul,{children:["\n",s(n.li,{children:[h(n.strong,{children:"高性能"}),"：C++ 底层实现，处理速度快"]}),"\n",s(n.li,{children:[h(n.strong,{children:"功能完整"}),"：支持多种格式（JPEG、PNG、WebP、GIF 等）"]}),"\n",s(n.li,{children:[h(n.strong,{children:"元数据提取"}),"：可同时获取宽高信息和处理图片"]}),"\n"]}),"\n",h(n.h2,{id:"实现自定义-rehype-插件",children:h(n.a,{className:"anchor",href:"#实现自定义-rehype-插件",children:"实现：自定义 Rehype 插件"})}),"\n",h(n.h3,{id:"为什么需要插件",children:h(n.a,{className:"anchor",href:"#为什么需要插件",children:"为什么需要插件？"})}),"\n",s(n.p,{children:["博客使用 Velite 构建，它在编译时将 Markdown 转换为 MDX。通过 Rehype 插件可以在构建时拦截 ",h(n.code,{children:""})," 标签，提前处理图片。"]}),"\n",h(n.h3,{id:"插件核心逻辑",children:h(n.a,{className:"anchor",href:"#插件核心逻辑",children:"插件核心逻辑"})}),"\n",s(n.figure,{"data-rehype-pretty-code-figure":"",children:[h(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"src/lib/rehypeThumbhash.ts"}),s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" type"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"Root"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"hast"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" crypto"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"node:crypto"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" fs"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"node:fs/promises"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" path"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"node:path"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" sharp"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"sharp"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"rgbaToThumbHash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"thumbHashToDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"thumbhash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"visit"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"unist-util-visit"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" MAX_THUMB_SIZE"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" 64"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" CACHE_DIR"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:".next/cache/thumbhash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" rehypeThumbhashPlaceholder"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" async"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"tree"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Root"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" tasks"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Promise"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:"void"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:">[] "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" []"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" cache"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" loadCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 遍历 AST，找到所有节点"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" visit"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"tree"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"element"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"tagName"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" !=="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"img"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"return"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" rawSrc"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" typeof"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"?."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ==="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"string"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ?"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" :"}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" null"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"rawSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"return"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" tasks"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"push"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(("}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" () "}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" meta"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" getPlaceholderMeta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"rawSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"return"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 跳过 GIF 动图"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" isGif"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" rawSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"toLowerCase"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"endsWith"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:".gif"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 注入元数据到 img 节点"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ..."}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ??"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {}),"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" width: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"?."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ??"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" height: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"node"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"properties"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"?."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ??"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ..."}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"isGif"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ?"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {} "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { blurDataURL: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }),"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 更新缓存"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" &&"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" !"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"fromCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"] "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" width: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" height: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" blurDataURL: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })())"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#005CC5"},children:" Promise"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"all"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"tasks"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" saveCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(n.h3,{id:"图片处理函数",children:h(n.a,{className:"anchor",href:"#图片处理函数",children:"图片处理函数"})}),"\n",s(n.figure,{"data-rehype-pretty-code-figure":"",children:[h(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"src/lib/rehypeThumbhash.ts"}),s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" getPlaceholderMeta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" ThumbhashCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" normalizedSrc"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"replaceAll"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"%20"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" try"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" buffer"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" loadImageBuffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"normalizedSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 使用内容哈希作为缓存键"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" hash"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" crypto"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"createHash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"sha256"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"update"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"buffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"digest"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"hex"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"slice"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"0"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"16"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"]) {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"..."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"], "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", fromCache: "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"true"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 1. 提取原始图片尺寸"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" image"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" sharp"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"buffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" meta"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" image"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"metadata"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ||"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" !"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" throw"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Error"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"无法获取图片尺寸: "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"normalizedSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}`"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 2. 缩放到 64×64 用于 Thumbhash"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"data"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"info"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" image"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"resize"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" width: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"MAX_THUMB_SIZE"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" height: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"MAX_THUMB_SIZE"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" fit: "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"inside"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 保持宽高比"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" withoutEnlargement: "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"true"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 小图不放大"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"ensureAlpha"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"raw"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"toBuffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({ resolveWithObject: "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"true"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 3. 生成 Thumbhash"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" thumbHash"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" rgbaToThumbHash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"info"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"info"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"data"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" thumbHashToDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"thumbHash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" width: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 返回原始尺寸用于布局"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" height: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"meta"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" fromCache: "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"false"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" catch"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"error"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" console"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"warn"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"[rehype-thumbhash] 处理失败: "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"normalizedSrc"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}`"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"error"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" undefined"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" loadImageBuffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 支持远程图片"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"/"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"^"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"https"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:":"}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-dark-font-weight":"inherit","--shiki-light":"#22863A","--shiki-light-font-weight":"bold"},children:"\\/\\/"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"/"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"test"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")) {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" res"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" fetch"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"res"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"ok"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" throw"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Error"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Failed to fetch: "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}`"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" Buffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" res"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"arrayBuffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"())"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // 本地图片从 public/ 目录读取"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" normalized"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"startsWith"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"slice"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"1"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" src"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" fs"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"readFile"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"path"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"join"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"process"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"cwd"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(), "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"public"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"normalized"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"))"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" loadCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Promise"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:"ThumbhashCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"> {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" cachePath"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" path"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"join"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"process"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"cwd"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(), "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"CACHE_DIR"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"metadata.json"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" try"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" JSON"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"parse"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" fs"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"readFile"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cachePath"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"utf-8"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"))"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" catch"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {}"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" saveCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" ThumbhashCache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Promise"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:"void"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"> {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" cacheDir"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" path"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"join"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"process"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"cwd"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(), "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"CACHE_DIR"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" fs"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"mkdir"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cacheDir"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", { recursive: "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"true"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" fs"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"writeFile"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" path"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"join"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cacheDir"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"metadata.json"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"),"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" JSON"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"stringify"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"null"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"2"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"),"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",s(n.p,{children:[h(n.strong,{children:"关键点"}),"："]}),"\n",s(n.ol,{children:["\n",s(n.li,{children:[h(n.strong,{children:"原始尺寸 vs 缩略图尺寸"}),"：返回 ",h(n.code,{children:"meta.width/height"}),"（原始尺寸），而不是 ",h(n.code,{children:"info.width/height"}),"（64px），前端需要真实尺寸设置 ",h(n.code,{children:"aspect-ratio"})]}),"\n",s(n.li,{children:[h(n.strong,{children:"并行处理"}),"：使用 ",h(n.code,{children:"Promise.all()"})," 同时处理多张图片"]}),"\n",s(n.li,{children:[h(n.strong,{children:"跳过 GIF"}),"：动图不生成占位符，避免第一帧造成视觉不连续"]}),"\n"]}),"\n",h(n.h3,{id:"配置-velite",children:h(n.a,{className:"anchor",href:"#配置-velite",children:"配置 Velite"})}),"\n",s(n.p,{children:["在 ",h(n.code,{children:"velite.config.ts"})," 中注册插件："]}),"\n",s(n.figure,{"data-rehype-pretty-code-figure":"",children:[h(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"velite.config.ts"}),s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"rehypeThumbhashPlaceholder"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"./src/lib/rehypeThumbhash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" default"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" defineConfig"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" mdx: {"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" rehypePlugins: ["})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" rehypeSlug"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" rehypePrettyCode"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" rehypeUnwrapImages"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 移除

包裹"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" rehypeThumbhashPlaceholder"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 生成占位符"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ],"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" },"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"})"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(n.h2,{id:"前端自定义-image-组件",children:h(n.a,{className:"anchor",href:"#前端自定义-image-组件",children:"前端：自定义 Image 组件"})}),"\n",h(n.h3,{id:"nextjs-image-的局限",children:h(n.a,{className:"anchor",href:"#nextjs-image-的局限",children:"Next.js Image 的局限"})}),"\n",s(n.p,{children:["Next.js 的 ",h(n.code,{children:""})," 组件支持 ",h(n.code,{children:'placeholder="blur"'})," 和 ",h(n.code,{children:"blurDataURL"}),"，但存在问题："]}),"\n",s(n.ol,{children:["\n",s(n.li,{children:[h(n.strong,{children:"缺少过渡动画"}),"：图片加载完成后直接切换，没有淡入效果"]}),"\n",s(n.li,{children:[h(n.strong,{children:"占位符模糊度固定"}),"：无法自定义模糊程度和过渡时长"]}),"\n",s(n.li,{children:[h(n.strong,{children:"需要外部工具"}),"：",h(n.code,{children:"blurDataURL"})," 需要手动生成或使用 ",h(n.code,{children:"next-image-loader"})]}),"\n"]}),"\n",h(n.h3,{id:"自定义组件实现",children:h(n.a,{className:"anchor",href:"#自定义组件实现",children:"自定义组件实现"})}),"\n",s(n.p,{children:["创建 ",h(n.code,{children:"src/components/ui/OptimizeImage.tsx"}),"："]}),"\n",s(n.figure,{"data-rehype-pretty-code-figure":"",children:[h(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"src/components/ui/OptimizeImage.tsx"}),s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"use client"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" type"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"ComponentProps"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"react"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" Image"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"next/image"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"useState"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"react"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"useImageZoom"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"@/hooks/useImageZoom"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cn"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"@/lib/utils"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"interface"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" OptimizeImageProps"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" extends"}),h(n.span,{style:{"--shiki-dark":"#D19A66","--shiki-light":"#6F42C1"},children:" Omit"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:"ComponentProps"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"typeof"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" Image"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:">, "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" |"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"alt"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" |"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"placeholder"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"> {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" alt"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" width"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" number"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" height"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" number"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" wrapperClassName"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"?:"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" OptimizeImage"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" alt"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" ''"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" ''"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" wrapperClassName"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ..."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"rest"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" OptimizeImageProps"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"isLoaded"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"setIsLoaded"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"] "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" useState"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"false"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" imageRef"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" useImageZoom"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:"HTMLImageElement"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:">()"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ||"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" !"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ||"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" !"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"return"}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" null"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" <"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"div"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"cn"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"relative mx-auto my-6 block transform-gpu cursor-zoom-in overflow-hidden rounded-lg shadow-sm"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" wrapperClassName"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )}"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" style"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{{ "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#6F42C1"},children:"aspectRatio"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" / "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}`"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }}"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" >"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"/* 占位符层 */"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" && !"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"isLoaded"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" && ("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" <"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"div"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"absolute inset-0 opacity-70 hover:opacity-100"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" style"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{{"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#6F42C1"},children:" backgroundImage"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"url("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:")"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#6F42C1"},children:" backgroundSize"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"cover"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#6F42C1"},children:" backgroundPosition"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"center"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }}"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" />"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"/* 真实图片层 */"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" <"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"Image"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" ref"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"imageRef"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" src"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"src"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" alt"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"alt"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" width"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" height"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" loading"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"lazy"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"cn"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"relative size-full rounded-lg object-cover transition-[transform,opacity,filter] duration-300 ease-[cubic-bezier(0.2,0,0.2,1),ease-in-out,ease-in-out] hover:opacity-100"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"[&.medium-zoom-image--opened]:blur-0 [&.medium-zoom-image--opened]:opacity-100"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" isLoaded"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ?"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"blur-0 opacity-70"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" :"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"opacity-0 blur-lg"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )}"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" onLoad"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{() => {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" requestAnimationFrame"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(() "}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" setIsLoaded"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"true"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" })"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }}"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"..."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"rest"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" />"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" "})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",s(n.p,{children:[h(n.strong,{children:"实现要点"}),"："]}),"\n",s(n.ol,{children:["\n",s(n.li,{children:[h(n.strong,{children:"层叠布局"}),"：占位符用 ",h(n.code,{children:"absolute"})," 定位，与真实图片层叠显示"]}),"\n",s(n.li,{children:[h(n.strong,{children:"aspect-ratio"}),"：外层 ",h(n.code,{children:"div"})," 设置宽高比，防止 CLS"]}),"\n",s(n.li,{children:[h(n.strong,{children:"过渡动画"}),"：","\n",s(n.ul,{children:["\n",s(n.li,{children:["占位符：",h(n.code,{children:"opacity-70"}),"，加载完成后消失"]}),"\n",s(n.li,{children:["真实图片：从 ",h(n.code,{children:"opacity-0 blur-lg"})," 过渡到 ",h(n.code,{children:"opacity-70 blur-0"})]}),"\n",s(n.li,{children:["使用 ",h(n.code,{children:"requestAnimationFrame"})," 确保在下一帧更新状态，避免卡顿"]}),"\n"]}),"\n"]}),"\n",s(n.li,{children:[h(n.strong,{children:"性能优化"}),"：",h(n.code,{children:"transform-gpu"})," 启用 GPU 加速"]}),"\n"]}),"\n",h(n.h3,{id:"注册到-mdx",children:h(n.a,{className:"anchor",href:"#注册到-mdx",children:"注册到 MDX"})}),"\n",s(n.p,{children:["在 ",h(n.code,{children:"src/components/MDXContent.tsx"})," 中："]}),"\n",s(n.figure,{"data-rehype-pretty-code-figure":"",children:[h(n.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"src/components/MDXContent.tsx"}),s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"OptimizeImage"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:" '"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"@/components/ui/OptimizeImage"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" defaultComponents"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Record"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:"string"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:"ComponentType"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"<"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:"any"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:">> "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" img: "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"OptimizeImage"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" MDXContent"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({ "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"code"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"components"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"className"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(n.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" MDXContentProps"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" Component"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" useMDXComponent"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"code"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" <"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"div"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" className"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"className"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:">"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" <"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"Component"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" components"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{{ "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"..."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"defaultComponents"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"..."}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"components"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }} "}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"/>"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" "})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" )"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(n.h2,{id:"nextjs-构建缓存优化",children:h(n.a,{className:"anchor",href:"#nextjs-构建缓存优化",children:"NextJS 构建缓存优化"})}),"\n",h(n.h3,{id:"问题",children:h(n.a,{className:"anchor",href:"#问题",children:"问题"})}),"\n",s(n.p,{children:["每次 ",h(n.code,{children:"pnpm build"})," 都要重新处理所有图片："]}),"\n",h(n.figure,{"data-rehype-pretty-code-figure":"",children:s(n.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 10 张图片 × 200ms = 2 秒"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"✓"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" Processing"}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" 10"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" images:"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" 2000ms"})]})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(n.p,{children:"即使图片没变，也要等待 2 秒，影响开发体验。"}),"\n",h(n.h3,{id:"解决方案内容哈希缓存",children:h(n.a,{className:"anchor",href:"#解决方案内容哈希缓存",children:"解决方案：内容哈希缓存"})}),"\n",h(n.p,{children:"使用图片内容的 SHA-256 哈希作为缓存键："}),"\n",h(n.figure,{"data-rehype-pretty-code-figure":"",children:s(n.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" hash"}),h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" crypto"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"createHash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"sha256"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"update"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"buffer"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"digest"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"hex"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ."}),h(n.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"slice"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"0"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"16"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:")"})]}),"\n",h(n.span,{"data-line":"",children:" "}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"if"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"]) {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" cache"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"hash"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"] "}),h(n.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 命中缓存，跳过处理"})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(n.h3,{id:"缓存存储",children:h(n.a,{className:"anchor",href:"#缓存存储",children:"缓存存储"})}),"\n",s(n.p,{children:["缓存保存在 ",h(n.code,{children:".next/cache/thumbhash/metadata.json"}),"："]}),"\n",h(n.figure,{"data-rehype-pretty-code-figure":"",children:s(n.pre,{tabIndex:"0","data-language":"json","data-theme":"plastic github-light",children:[s(n.code,{"data-language":"json","data-theme":"plastic github-light",style:{display:"grid"},children:[h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"{"})}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:' "'}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"a1b2c3d4e5f6g7h8"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": {"})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:' "'}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"width"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"1920"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:' "'}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"height"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"1080"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(n.span,{"data-line":"",children:[h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:' "'}),h(n.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"blurDataURL"}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#005CC5"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(n.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"data:image/png;base64,..."}),h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(n.span,{"data-line":"",children:h(n.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(n.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(n.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(n.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(n.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(n.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",s(n.p,{children:[h(n.code,{children:".next/cache"})," 目录是 NextJS 的缓存目录，详细可查看: ",h(n.a,{href:"https://vercel.com/docs/deployments/troubleshoot-a-build#understanding-build-cache",children:"Vercel 构建缓存"})]}),"\n",h(n.h2,{id:"总结",children:h(n.a,{className:"anchor",href:"#总结",children:"总结"})}),"\n",h(n.p,{children:"通过 Thumbhash + Sharp + 自定义组件，实现了："}),"\n",s(n.ol,{children:["\n",s(n.li,{children:[h(n.strong,{children:"解决 CLS"}),"：构建时提取宽高，前端预留空间"]}),"\n",s(n.li,{children:[h(n.strong,{children:"视觉连续"}),"：25 bytes 占位符，自定义淡入动画"]}),"\n",s(n.li,{children:[h(n.strong,{children:"开发效率"}),"：内容哈希缓存，增量构建提速 99%"]}),"\n",s(n.li,{children:[h(n.strong,{children:"运行时零开销"}),"：所有处理在构建时完成"]}),"\n"]}),"\n",h(n.p,{children:"关键技术点："}),"\n",s(n.ul,{children:["\n",h(n.li,{children:"Rehype 插件在 AST 层拦截图片节点"}),"\n",h(n.li,{children:"Sharp 提取原始尺寸 + 生成 64×64 缩略图"}),"\n",h(n.li,{children:"Thumbhash 算法生成 Data URL"}),"\n",h(n.li,{children:"React 状态管理 + CSS 过渡实现加载动画"}),"\n",h(n.li,{children:"SHA-256 内容哈希实现智能缓存"}),"\n"]}),"\n",h(n.h2,{id:"参考",children:h(n.a,{className:"anchor",href:"#参考",children:"参考"})}),"\n",s(n.ul,{children:["\n",h(n.li,{children:h(n.a,{href:"https://github.com/evanw/thumbhash",children:"Thumbhash 官方仓库"})}),"\n",h(n.li,{children:h(n.a,{href:"https://sharp.pixelplumbing.com/",children:"Sharp 图片处理库"})}),"\n",h(n.li,{children:h(n.a,{href:"https://nextjs.org/docs/app/api-reference/components/image",children:"Next.js Image 组件文档"})}),"\n",h(n.li,{children:h(n.a,{href:"https://vercel.com/docs/deployments/troubleshoot-a-build#understanding-build-cache",children:"Vercel 缓存"})}),"\n",h(n.li,{children:h(n.a,{href:"https://buycoffee.top/blog/tech/image-optimization",children:"博客图片优化"})}),"\n"]})]})}return{default:function(i={}){const{wrapper:s}=i.components||{};return s?h(s,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

GitHub Actions Self-Hosted Runner 部署实践

Wed, 03 Dec 2025 00:00:00 GMT

const{Fragment:i,jsx:h,jsxs:n}=arguments[0];function _createMdxContent(e){const l={a:"a",button:"button",code:"code",em:"em",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",rect:"rect",span:"span",strong:"strong",svg:"svg",ul:"ul",...e.components};return n(i,{children:[h(l.h2,{id:"前言",children:h(l.a,{className:"anchor",href:"#前言",children:"前言"})}),"\n",h(l.p,{children:"最近帮团队伙伴搭建了 JAVA 项目的 CI/CD 自动化部署工作流，过程中遇到的问题:"}),"\n",n(l.ol,{children:["\n",n(l.li,{children:[h(l.strong,{children:"重复下载"}),": 每次构建都要从 Gihub 重新拉取 JDK、Maven,浪费大量时间"]}),"\n",n(l.li,{children:[h(l.strong,{children:"打包到服务器"}),": Github Runner 打包构建完成后，上传到国内服务器速度慢"]}),"\n"]}),"\n",h(l.p,{children:"于是决定在自己的服务器上部署一个 Self-Hosted Runner,预装所有构建工具，同时持久化 Maven 本地仓库。"}),"\n",h(l.h2,{id:"核心思路",children:h(l.a,{className:"anchor",href:"#核心思路",children:"核心思路"})}),"\n",h(l.p,{children:h(l.strong,{children:"常规做法的问题:"})}),"\n",n(l.ul,{children:["\n",n(l.li,{children:["使用 GitHub 官方的 ",h(l.code,{children:"actions/setup-java"})," 每次都要下载 JDK"]}),"\n",n(l.li,{children:["使用 ",h(l.code,{children:"actions/cache"})," 缓存 Maven 依赖,但首次构建还是慢"]}),"\n",h(l.li,{children:"网络波动导致构建失败率高"}),"\n"]}),"\n",h(l.p,{children:h(l.strong,{children:"优化方案:"})}),"\n",n(l.ul,{children:["\n",n(l.li,{children:["基于 ",h(l.code,{children:"myoung34/github-runner"})," 构建自定义镜像"]}),"\n",h(l.li,{children:"预装 JDK 21 和 Maven 3.9.11"}),"\n",h(l.li,{children:"通过 Docker 卷映射持久化 Maven 本地仓库"}),"\n",h(l.li,{children:"所有下载都走国内镜像源"}),"\n"]}),"\n",h(l.h2,{id:"准备工作",children:h(l.a,{className:"anchor",href:"#准备工作",children:"准备工作"})}),"\n",h(l.h3,{id:"1-获取-runner-token",children:h(l.a,{className:"anchor",href:"#1-获取-runner-token",children:"1. 获取 Runner Token"})}),"\n",h(l.p,{children:"首先需要在 GitHub 仓库中生成 Runner 注册令牌:"}),"\n",h(l.p,{children:h(l.em,{children:"仓库 Settings → Actions → Runners → New self-hosted runner"})}),"\n",h(l.p,{children:"选择对应的系统，我这里服务器是 Ubuntu 20.04, 选择 Linux x64"}),"\n",h(l.img,{src:"https://imgs.nafsi.me/blog/new-runner.png",alt:"new-runner",title:"new-runner",width:"2940",height:"1594",blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAYAAAA6yNxSAAAJcklEQVR4AQCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8AgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/wCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8AgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/wCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8AgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/wCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8AgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/wCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8AgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/wCBAH7/ABIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/AIEAfv8AEhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8BgQB+/wASFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/xIWIP8SFiD/EhYg/18M39+L43S1AAAAAElFTkSuQmCC"}),"\n",h(l.h3,{id:"2-服务器环境准备",children:h(l.a,{className:"anchor",href:"#2-服务器环境准备",children:"2. 服务器环境准备"})}),"\n",h(l.p,{children:"确保服务器已安装 Docker 和 Docker Compose:"}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:n(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 检查版本"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"docker"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" --version"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"docker-compose"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" --version"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 创建工作目录"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"mkdir"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -p"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" /data/github-runner/{_work,.m2,actions-temp}"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(l.p,{children:h(l.strong,{children:"目录规划说明:"})}),"\n",n(l.ul,{children:["\n",n(l.li,{children:[h(l.code,{children:"/data/github-runner/_work"}),": GitHub Actions 的工作目录,存放代码和构建产物"]}),"\n",n(l.li,{children:[h(l.code,{children:"/data/github-runner/.m2"}),": Maven 本地仓库,持久化依赖避免重复下载"]}),"\n",n(l.li,{children:[h(l.code,{children:"/data/github-runner/actions-temp"}),": Actions 临时文件目录"]}),"\n"]}),"\n",h(l.h2,{id:"构建自定义-runner-镜像",children:h(l.a,{className:"anchor",href:"#构建自定义-runner-镜像",children:"构建自定义 Runner 镜像"})}),"\n",h(l.h3,{id:"编写-dockerfile",children:h(l.a,{className:"anchor",href:"#编写-dockerfile",children:"编写 Dockerfile"})}),"\n",n(l.p,{children:["创建 ",h(l.code,{children:"Dockerfile"}),":"]}),"\n",n(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"dockerfile","data-theme":"plastic github-light",children:"Dockerfile"}),n(l.pre,{tabIndex:"0","data-language":"dockerfile","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"dockerfile","data-theme":"plastic github-light",style:{display:"grid"},children:[h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 基于社区维护的 GitHub Runner 镜像"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"FROM"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" myoung34/github-runner:latest"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"USER"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" root"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 安装基础工具"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"RUN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" apt-get update && apt-get install -y \\"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" tar \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" curl \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" git \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" unzip \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" && rm -rf /var/lib/apt/lists/*"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 安装 JDK 21 (使用清华大学 TUNA 镜像源)"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"ARG"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" JDK_URL=https://mirrors.tuna.tsinghua.edu.cn/Adoptium/21/jdk/x64/linux/OpenJDK21U-jdk_x64_linux_hotspot_21.0.9_10.tar.gz"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"RUN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" mkdir -p /opt/java && \\"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" curl -fsSL "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:'"$JDK_URL"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" -o /opt/java/jdk.tar.gz && \\"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" tar -xzf /opt/java/jdk.tar.gz -C /opt/java && \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" rm /opt/java/jdk.tar.gz && \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ln -s /opt/java/jdk-21* /opt/java/current"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 安装 Maven 3.9.11 (使用阿里云镜像源)"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"ARG"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" MAVEN_VERSION=3.9.11"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"RUN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" curl -fsSL "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:'"https://mirrors.aliyun.com/apache/maven/maven-3/${MAVEN_VERSION}/binaries/apache-maven-${MAVEN_VERSION}-bin.tar.gz"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" \\"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" -o /opt/maven.tar.gz && \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" tar -xzf /opt/maven.tar.gz -C /opt && \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ln -s /opt/apache-maven-${MAVEN_VERSION} /opt/maven && \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" rm /opt/maven.tar.gz"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 配置环境变量"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"ENV"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" JAVA_HOME=/opt/java/current"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"ENV"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" PATH=$JAVA_HOME/bin:/opt/maven/bin:$PATH"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"WORKDIR"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" /actions-runner"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(l.h3,{id:"构建镜像",children:h(l.a,{className:"anchor",href:"#构建镜像",children:"构建镜像"})}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:n(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 构建自定义 Runner 镜像"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"docker"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" build"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -t"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" github-runner:latest"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" ."})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(l.h2,{id:"docker-compose-配置",children:h(l.a,{className:"anchor",href:"#docker-compose-配置",children:"Docker Compose 配置"})}),"\n",n(l.p,{children:["创建 ",h(l.code,{children:"docker-compose.yml"}),":"]}),"\n",n(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"yaml","data-theme":"plastic github-light",children:"docker-compose.yml"}),n(l.pre,{tabIndex:"0","data-language":"yaml","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"yaml","data-theme":"plastic github-light",style:{display:"grid"},children:[n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"version"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"3"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"services"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" runner"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" image"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"github-runner:latest"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" container_name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"github-runner"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" restart"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"always"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" environment"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" REPO_URL"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"https://github.com/YOUR_ORG/YOUR_REPO"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" RUNNER_NAME"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"github-runner"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" RUNNER_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"YOUR_RUNNER_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" RUNNER_WORKDIR"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/_work"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" volumes"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # Docker Socket 映射 - 允许容器内执行 docker 命令(Docker-in-Docker)"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/var/run/docker.sock:/var/run/docker.sock"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 工作目录映射 - 存放代码和构建产物"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/data/github-runner/_work:/_work"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # Maven 本地仓库映射 - 持久化依赖避免重复下载"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/data/github-runner/.m2:/home/runner/.m2"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # Actions 临时文件目录"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/data/github-runner/actions-temp:/opt/actions/temp"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(l.h3,{id:"启动-runner",children:h(l.a,{className:"anchor",href:"#启动-runner",children:"启动 Runner"})}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:n(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 启动服务"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"docker-compose"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" up"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -d"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"# 查看日志确认注册成功"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"docker-compose"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" logs"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -f"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" runner"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",n(l.p,{children:["此时在 GitHub 仓库的 ",h(l.em,{children:"Settings → Actions → Runners"}),' 页面应该能看到绿色的 "Idle" 状态。']}),"\n",h(l.img,{src:"https://imgs.nafsi.me/blog/status-idle.png",alt:"status-idle",title:"status-idle",width:"2200",height:"1120",blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAYAAAA6yNxSAAAJcklEQVR4AQCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8AgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/wCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8AgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/wCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8AgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/wCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8AgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/wCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8AgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/wCBAH7/AA4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/AIEAfv8ADhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8BgQB+/wAOEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/w4SHP8OEhz/DhIc/9dXxN+3kgFIAAAAAElFTkSuQmCC"}),"\n",h(l.h2,{id:"github-actions-工作流配置",children:h(l.a,{className:"anchor",href:"#github-actions-工作流配置",children:"GitHub Actions 工作流配置"})}),"\n",n(l.p,{children:["创建 ",h(l.code,{children:".github/workflows/deploy.yml"}),":"]}),"\n",n(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"yaml","data-theme":"plastic github-light",children:".github/workflows/deploy.yml"}),n(l.pre,{tabIndex:"0","data-language":"yaml","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"yaml","data-theme":"plastic github-light",style:{display:"grid"},children:[n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"CI/CD Deploy"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"on"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" push"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" branches"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": [ "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"main"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ]"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"jobs"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" build-deploy"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{className:"highlighted","data-line":"","data-highlighted-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" runs-on"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"self-hosted"}),h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 指定使用自托管 Runner"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" env"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 显式声明环境变量"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" JAVA_HOME"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/opt/java/current"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" MAVEN_HOME"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/opt/maven"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" PATH"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/opt/java/current/bin:/opt/maven/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" steps"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"uses"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"actions/checkout@v4"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 验证工具链可用性"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Verify toolchain"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" run"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"|"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" tar --version"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" java -version"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" mvn -v"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # Maven 构建"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Build with Maven"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" run"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"mvn -B -T1C package --file pom.xml"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # Docker 部署"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Deploy app with Docker"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" run"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"|"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" docker stop my-app || true"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" docker rm my-app || true"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" docker build -t my-app:latest ."})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" docker run -d -p 8888:8888 \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" --name my-app \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" --network app-network \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" --restart always \\"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" my-app:latest"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 清理悬空镜像"})}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"name"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Clean dangling Docker images"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:" run"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:": "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"docker image prune -f"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(l.h2,{id:"docker-in-docker-原理解析",children:h(l.a,{className:"anchor",href:"#docker-in-docker-原理解析",children:"Docker-in-Docker 原理解析"})}),"\n",n(l.p,{children:["为什么在 ",h(l.code,{children:"github-runner"})," 容器内能执行 ",h(l.code,{children:"docker build"})," 和 ",h(l.code,{children:"docker run"})," 部署另一个容器?"]}),"\n",h(l.h3,{id:"核心原理",children:h(l.a,{className:"anchor",href:"#核心原理",children:"核心原理"})}),"\n",n(l.p,{children:['这里并不是真正的 "容器套容器",而是通过 ',h(l.strong,{children:"Docker Socket 共享"})," 实现的:"]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:n(l.pre,{tabIndex:"0","data-language":"yaml","data-theme":"plastic github-light",children:[n(l.code,{"data-language":"yaml","data-theme":"plastic github-light",style:{display:"grid"},children:[n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#22863A"},children:"volumes"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:":"})]}),"\n",n(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" - "}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/var/run/docker.sock:/var/run/docker.sock"}),h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" # 关键配置"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:n(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",n(l.p,{children:["通过将宿主机的 Docker Socket 映射到容器内,容器内的 ",h(l.code,{children:"docker"})," 命令实际上是在调用 ",h(l.strong,{children:"宿主机的 Docker Daemon"}),",所有新创建的容器都运行在宿主机层面,与 ",h(l.code,{children:"github-runner"})," 容器平级。"]}),"\n",h(l.h3,{id:"完整流程解析",children:h(l.a,{className:"anchor",href:"#完整流程解析",children:"完整流程解析"})}),"\n",h(l.img,{src:"https://imgs.nafsi.me/blog/workflow-mermaid.png",alt:"workflow-mermaid",title:"workflow-mermaid",width:"1983",height:"1290",blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAXCAYAAABqBU3hAAAMEElEQVR4AQCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AIEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8AgQB+/wD38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5/wCBAH7/APfz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/AYEAfv8A9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f/38/n/9/P5//fz+f8bIypmRVH9ZgAAAABJRU5ErkJggg=="}),"\n",h(l.p,{children:h(l.strong,{children:"关键步骤说明:"})}),"\n",n(l.ol,{children:["\n",n(l.li,{children:[h(l.strong,{children:"构建阶段"}),": GitHub Actions 触发 ",h(l.code,{children:"docker build"})," 命令"]}),"\n",n(l.li,{children:[h(l.strong,{children:"请求转发"}),": Runner 容器内的 Docker Client 通过映射的 Socket 将请求发送到宿主机"]}),"\n",n(l.li,{children:[h(l.strong,{children:"镜像构建"}),": 宿主机的 Docker Daemon 执行实际的镜像构建工作"]}),"\n",n(l.li,{children:[h(l.strong,{children:"容器创建"}),": ",h(l.code,{children:"docker run"})," 同样通过 Socket 转发,在宿主机层面创建新容器"]}),"\n"]}),"\n",h(l.h2,{id:"参考资料",children:h(l.a,{className:"anchor",href:"#参考资料",children:"参考资料"})}),"\n",n(l.ul,{children:["\n",h(l.li,{children:h(l.a,{href:"https://docs.github.com/en/actions/hosting-your-own-runners",children:"GitHub Actions Self-Hosted Runners 官方文档"})}),"\n",h(l.li,{children:h(l.a,{href:"https://github.com/myoung34/docker-github-actions-runner",children:"myoung34/docker-github-actions-runner"})}),"\n"]})]})}return{default:function(i={}){const{wrapper:n}=i.components||{};return n?h(n,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

Next.js 接入 Telegram Bot 的不完整指南

Mon, 24 Nov 2025 00:00:00 GMT

const{Fragment:i,jsx:h,jsxs:s}=arguments[0];function _createMdxContent(e){const l={a:"a",blockquote:"blockquote",button:"button",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",rect:"rect",span:"span",strong:"strong",svg:"svg",ul:"ul",...e.components};return s(i,{children:[h(l.h2,{id:"前言",children:h(l.a,{className:"anchor",href:"#前言",children:"前言"})}),"\n",s(l.p,{children:["想法源于网站的 ",h(l.a,{href:"https://nafsi.me/moments",children:"Moments"})," 页面，因为设计 Moment 的初衷就是为了时刻发布和记录有趣的事情和想法。"]}),"\n",h(l.p,{children:"但是这就要寻求一个便捷能快速发布，以及支持全端，某时某刻某地我就可以发布想法的方案。"}),"\n",h(l.p,{children:"所以就有了接入 Telegram Bot 的这个想法，不需要额外的后端服务和页面，就能实现快速的发布，编辑，删除。"}),"\n",h(l.p,{children:"Moments 使用的相关技术栈："}),"\n",s(l.ul,{children:["\n",h(l.li,{children:"grammy.js - Telegram Bot 的核心，提供了 Bot 对话流管理，Webhook 接收消息，以及消息转发等能力。"}),"\n",h(l.li,{children:"Cloudflare D1 - 用于存储 Moments 的数据。"}),"\n",h(l.li,{children:"Cloudflare R2 - 用于存储 Telegram Bot 的图片，以及图片自动上传。"}),"\n"]}),"\n",h(l.p,{children:"本文将实现一个最小 Demo 在 Next.js 中接入 Telegram Bot :)"}),"\n",h(l.h2,{id:"实现步骤",children:h(l.a,{className:"anchor",href:"#实现步骤",children:"实现步骤"})}),"\n",h(l.h3,{id:"创建-telegram-bot",children:h(l.a,{className:"anchor",href:"#创建-telegram-bot",children:"创建 Telegram Bot"})}),"\n",s(l.ol,{children:["\n",s(l.li,{children:["\n",s(l.p,{children:["前往 Telegram 的 ",h(l.a,{href:"https://t.me/botfather",children:"@BotFather"})," 对话，使用 ",h(l.code,{children:"/newbot"})," 命令后，按照提示输入ID、名称进行创建 Bot"]}),"\n"]}),"\n",s(l.li,{children:["\n",h(l.p,{children:"创建完成后你会得到这样一段对话，下面将会用到这个 Token"}),"\n"]}),"\n"]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:s(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"Done!"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" Congratulations"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" on"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" your"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" bot."}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" You"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" will"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" find"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" it"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" at"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" t.me/"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"<"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"botusernam"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"e"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:">"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"."}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" You"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" can"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" now"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" add"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" a"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" description,"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" about"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" section"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" and"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" profile"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" picture"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" for"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" your"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" bot,"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" see"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" /help"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" for"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" a"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" list"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" of"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" commands."}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" By"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" the"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" way,"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" when"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" you"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"'"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"ve finished creating your cool bot, ping our Bot Support if you want a better username for it. Just make sure the bot is fully operational before you do this."})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Use this token to access the HTTP API:"})}),"\n",h(l.span,{className:"highlighted","data-line":"","data-highlighted-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"8249757183:AAH2-jYYA_PppSpqyODg3lJC3iMU3E_f7Rg"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Keep your token secure and store it safely, it can be used by anyone to control your bot."})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"For a description of the Bot API, see this page: https://core.telegram.org/bots/api"})})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",s(l.p,{children:["更多可以参考 ",h(l.a,{href:"https://core.telegram.org/bots",children:"Telegram Bot 开发指南"})," 了解相关帮助。"]}),"\n",h(l.h3,{id:"安装-grammyjs",children:h(l.a,{className:"anchor",href:"#安装-grammyjs",children:"安装 Grammy.js"})}),"\n",s(l.blockquote,{children:["\n",h(l.p,{children:"什么是 grammY？"}),"\n",s(l.p,{children:["是一个用于创建 Telegram Bot 的框架。它可以从 TypeScript 和 JavaScript 中使用，在 Node.js、 Deno 和浏览器中运行。 - ",h(l.a,{href:"https://grammy.dev/",children:"grammy.js"})]}),"\n"]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:s(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[h(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"pnpm"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" add"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" grammy"})]})}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(l.h3,{id:"配置环境变量",children:h(l.a,{className:"anchor",href:"#配置环境变量",children:"配置环境变量"})}),"\n",s(l.p,{children:["在项目根目录创建或更新 ",h(l.code,{children:".env.local"})]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:s(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"TELEGRAM_BOT_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"8249757183:AAH2-jYYA_PppSpqyODg3lJC3iMU3E_f7Rg"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" //"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" 从"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" BotFather"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" 获取的"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" Bot"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" Token"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"TELEGRAM_WEBHOOK_SECRET_KEY"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"=<"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"自定义随机字符串"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:">"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"TELEGRAM_ALLOWED_CHAT_ID"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"="}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"123456789"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",h(l.h3,{id:"实现最小-demo-实例",children:h(l.a,{className:"anchor",href:"#实现最小-demo-实例",children:"实现最小 Demo 实例"})}),"\n",h(l.h4,{id:"初始化",children:h(l.a,{className:"anchor",href:"#初始化",children:"初始化"})}),"\n",s(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"ts","data-theme":"plastic github-light",children:"src/telegram/bot.ts"}),s(l.pre,{tabIndex:"0","data-language":"ts","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"ts","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"Bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"grammy"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" token"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" process"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"env"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"TELEGRAM_BOT_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" bot"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"token"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:");"})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(l.p,{children:"新建一个 Bot 对象，传入 Bot Token，初始化 Bot 对象。"}),"\n",h(l.h4,{id:"绑定指令",children:h(l.a,{className:"anchor",href:"#绑定指令",children:"绑定指令"})}),"\n",s(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"ts","data-theme":"plastic github-light",children:"src/telegram/bot.ts"}),s(l.pre,{className:"has-diff",tabIndex:"0","data-language":"ts","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"ts","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"Bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"grammy"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" token"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" process"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"env"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"TELEGRAM_BOT_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" bot"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"token"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:");"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{className:"diff add","data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"command"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"ping"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"async"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"ctx"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "})]}),"\n",s(l.span,{className:"diff add","data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" ctx"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"reply"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Telegram Bot 连通性检测成功"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"); "})]}),"\n",h(l.span,{className:"diff add","data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}); "})})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",h(l.p,{children:"只到这里是不够的，还需要配置 Webhook API，以便 Telegram 可以推送消息给我们，然后我们根据消息内容进行处理和返回。"}),"\n",h(l.h3,{id:"配置-telegram-webhook-api",children:h(l.a,{className:"anchor",href:"#配置-telegram-webhook-api",children:"配置 Telegram Webhook API"})}),"\n",h(l.h4,{id:"什么是-webhook-",children:h(l.a,{className:"anchor",href:"#什么是-webhook-",children:"什么是 Webhook ？"})}),"\n",h(l.p,{children:"Webhook 是 Telegram 推送消息给我们的方式。每次用户发送消息到 Bot，Telegram 就会把更新内容转发到我们指定的 HTTPS Endpoint。Next.js App Router 下使用 Route Handler 即可完成这一层 API。"}),"\n",s(l.p,{children:["在 grammY 官方的",h(l.a,{href:"https://grammy.dev/zh/guide/deployment-types",children:"部署方式指南"}),"中，主要介绍了两种部署方式："]}),"\n",s(l.ul,{children:["\n",s(l.li,{children:[h(l.strong,{children:"长轮询（Long Polling）"}),"：本地开发或临时脚本的首选，无需公网域名，但需要常驻进程主动拉取消息。"]}),"\n",s(l.li,{children:[h(l.strong,{children:"Webhook"}),"：本文采用的方式，引用官方的解释 “Webhook 比长轮询的主要优势在于它们更",h(l.strong,{children:"便宜"}),"”。"]}),"\n"]}),"\n",h(l.h5,{id:"webhook-配置",children:h(l.a,{className:"anchor",href:"#webhook-配置",children:"Webhook 配置"})}),"\n",s(l.p,{children:["这里就可以用到之前 .env.local 中的 ",h(l.code,{children:"TELEGRAM_WEBHOOK_SECRET_KEY"})," 了，用于验证请求来自 Telegram 官方，避免恶意调用，引用官方的解释："]}),"\n",s(l.blockquote,{children:["\n",s(l.p,{children:["如果您想确保 webhook 是您自己设置的，可以在参数",h(l.strong,{children:"secret_token"}),"中指定秘密数据。如果指定了该参数，请求将包含一个名为",h(l.code,{children:"X-Telegram-Bot-Api-Secret-Token"}),"的标头，其内容为秘密令牌。"]}),"\n"]}),"\n",s(l.figure,{"data-rehype-pretty-code-figure":"",children:[h(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"ts","data-theme":"plastic github-light",children:"src/app/api/telegram/webhook/route.ts"}),s(l.pre,{tabIndex:"0","data-language":"ts","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"ts","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"webhookCallback"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"grammy"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"import"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"from"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"@/telegram/bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" webhookSecret"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" process"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"env"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"TELEGRAM_WEBHOOK_SECRET_KEY"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"if"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"!"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"webhookSecret"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" throw"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Error"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"TELEGRAM_WEBHOOK_SECRET_KEY is required for webhook security"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:");"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// 通过 secretToken 验证请求来自 Telegram 官方，避免恶意调用"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"const"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" handleUpdate"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" webhookCallback"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"std/http"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", { secretToken: "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"webhookSecret"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" });"})]}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" async"}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" POST"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"request"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),h(l.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#6F42C1"},children:" Request"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" try"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" {"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:" // Telegram 推送消息时会走到这里，我们把请求交给 grammY 处理"})}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" await"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" handleUpdate"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"request"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" } "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"catch"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"error"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" console"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"error"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"[Webhook] Error processing update:"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"error"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:");"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" new"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Response"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"OK"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", { status: "}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"200"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" });"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" }"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})}),"\n",h(l.span,{"data-line":"",children:" "}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" async"}),h(l.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" GET"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"() {"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" return"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" Response"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"json"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"({"})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" status: "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"ok"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:","})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" timestamp: "}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"new"}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" Date"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"()."}),h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"toISOString"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(),"})]}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" });"})}),"\n",h(l.span,{"data-line":"",children:h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",s(l.p,{children:["如果我们想在本地进行调试怎么办呢？那么就可以用到 ",h(l.a,{href:"https://ngrok.com/",children:"ngrok"})]}),"\n",h(l.h3,{id:"利用-ngrok-进行本地调试",children:h(l.a,{className:"anchor",href:"#利用-ngrok-进行本地调试",children:"利用 ngrok 进行本地调试"})}),"\n",h(l.h4,{id:"安装-ngrok",children:h(l.a,{className:"anchor",href:"#安装-ngrok",children:"安装 ngrok"})}),"\n",s(l.ul,{children:["\n",s(l.li,{children:["前往",h(l.strong,{children:"ngrok"}),"官网 ",h(l.a,{href:"https://ngrok.com/download",children:"下载"})," 对应安装文件"]}),"\n",s(l.li,{children:["注册 ngrok 账号，获取并保存自己的 ",h(l.code,{children:"ngrok token"})]}),"\n",s(l.li,{children:["首次运行后执行 ",h(l.code,{children:"ngrok config add-authtoken <你的 ngrok token>"})," 添加自己刚刚获取的 Token"]}),"\n"]}),"\n",h(l.h4,{id:"本地调试",children:h(l.a,{className:"anchor",href:"#本地调试",children:"本地调试"})}),"\n",s(l.ol,{children:["\n",s(l.li,{children:["在项目根目录启动 ",h(l.code,{children:"pnpm dev"}),"，确认浏览器访问 ",h(l.a,{href:"http://localhost:3000/api/telegram/webhook",children:"http://localhost:3000/api/telegram/webhook"})," 能返回正确状态"]}),"\n",s(l.li,{children:["新建窗口，在终端运行 ",h(l.code,{children:"ngrok http 3000"})," 记录输出的域名地址"]}),"\n",s(l.li,{children:["调用 Telegram 官方",h(l.strong,{children:"setWebhook"}),"接口，把临时域名与我们在 Next.js 中编写的 Webhook Route 绑定，同时附带 ",h(l.strong,{children:"secret_token"})]}),"\n"]}),"\n",h(l.figure,{"data-rehype-pretty-code-figure":"",children:s(l.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[s(l.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" curl"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -sS"}),h(l.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" -X"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" POST"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"https://api.telegram.org/bot"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"TELEGRAM_BOT_TOKEN"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"/setWebhook"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" -H"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Content-Type: application/json"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]}),"\n",s(l.span,{"data-line":"",children:[h(l.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" -d"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:' "'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"{"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"url"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"https://"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"<"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"子"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"域"}),h(l.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:">"}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:".ngrok.app/api/telegram/webhook"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:", "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"secret_token"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:": "}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"${"}),h(l.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"TELEGRAM_WEBHOOK_SECRET_KEY"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'}),h(l.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"}"}),h(l.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:'"'})]})]}),h(l.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:s(l.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[h(l.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),h(l.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),h(l.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",s(l.p,{children:["现在通过 Telegram Bot 输入指令 ",h(l.code,{children:"/ping"}),"，就可以看到 ",h(l.strong,{children:'"Telegram Bot 连通性检测成功"'})," 的成功返回信息了。"]}),"\n",h(l.h2,{id:"总结",children:h(l.a,{className:"anchor",href:"#总结",children:"总结"})}),"\n",h(l.p,{children:"当然，文章这里只做了简单的步骤和实现说明，主要是给后来者提供一种思路。"}),"\n",s(l.p,{children:["目前的功能也还尚未完善，如果你有任何问题，欢迎在 ",h(l.a,{href:"https://github.com/nafsifan/nafsi.me/issues",children:"issues"})," 中提出，或者直接查看该",h(l.a,{href:"https://github.com/nafsifan/nafsi.me",children:"项目源码"}),"。"]})]})}return{default:function(i={}){const{wrapper:s}=i.components||{};return s?h(s,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

Hello, World !

Fri, 10 Oct 2025 00:00:00 GMT

const{Fragment:i,jsx:e,jsxs:l}=arguments[0];function _createMdxContent(h){const t={a:"a",blockquote:"blockquote",br:"br",button:"button",code:"code",del:"del",em:"em",figcaption:"figcaption",figure:"figure",h1:"h1",h2:"h2",h3:"h3",img:"img",input:"input",li:"li",ol:"ol",p:"p",path:"path",pre:"pre",rect:"rect",span:"span",strong:"strong",svg:"svg",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...h.components};return l(i,{children:[e(t.h1,{id:"hello-world-",children:e(t.a,{className:"anchor",href:"#hello-world-",children:"Hello, World 👋"})}),"\n",e(t.p,{children:"Welcome to a single post that showcases the Markdown features supported on this site. Feel free to copy sections into new articles when you need a ready-made pattern."}),"\n",e(t.h2,{id:"headings--paragraphs",children:e(t.a,{className:"anchor",href:"#headings--paragraphs",children:"Headings & Paragraphs"})}),"\n",e(t.p,{children:"Markdown gives you six heading levels:"}),"\n",e(t.h3,{id:"level-3-heading",children:e(t.a,{className:"anchor",href:"#level-3-heading",children:"Level 3 Heading"})}),"\n",l(t.p,{children:["Regular paragraphs can mix ",e(t.strong,{children:"bold"}),", ",e(t.em,{children:"italic"}),", ",e(t.del,{children:"strikethrough"}),", ",e(t.code,{children:"inline code"}),", and links like ",e(t.a,{href:"https://nafsi.me",children:"nafsi.me"}),". Two spaces at the end of a line",e(t.br,{}),"\n","force a manual line break."]}),"\n",l(t.blockquote,{children:["\n",e(t.p,{children:"“Clear writing is a sign of clear thinking.” — inspired by many code reviews"}),"\n"]}),"\n",e(t.h2,{id:"lists--tasks",children:e(t.a,{className:"anchor",href:"#lists--tasks",children:"Lists & Tasks"})}),"\n",l(t.ul,{children:["\n",e(t.li,{children:"Unordered lists keep things casual."}),"\n",l(t.li,{children:["Nest items for structure:","\n",l(t.ul,{children:["\n",l(t.li,{children:["Second level item","\n",l(t.ul,{children:["\n",e(t.li,{children:"Third level item"}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",l(t.ol,{children:["\n",e(t.li,{children:"Ordered lists stay precise."}),"\n",e(t.li,{children:"They are great for step-by-step guides."}),"\n"]}),"\n",l(t.ul,{className:"contains-task-list",children:["\n",l(t.li,{className:"task-list-item",children:[e(t.input,{type:"checkbox",checked:!0,disabled:!0})," ","Completed tasks"]}),"\n",l(t.li,{className:"task-list-item",children:[e(t.input,{type:"checkbox",disabled:!0})," ","Pending ideas"]}),"\n"]}),"\n",e(t.h2,{id:"callouts--details",children:e(t.a,{className:"anchor",href:"#callouts--details",children:"Callouts & Details"})}),"\n",l(t.blockquote,{children:["\n",l(t.p,{children:[e(t.strong,{children:"Note:"})," Use blockquotes for lightweight callouts, tips, or warnings."]}),"\n"]}),"\n","\n",l(t.p,{children:["This block renders only when expanded. You can embed ",e(t.strong,{children:"Markdown"}),", ",e(t.code,{children:"code"}),", or even lists inside."]}),"\n","\n",e(t.h2,{id:"code-blocks",children:e(t.a,{className:"anchor",href:"#code-blocks",children:"Code Blocks"})}),"\n",l(t.figure,{"data-rehype-pretty-code-figure":"",children:[e(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"typescript","data-theme":"plastic github-light",children:"greet.ts"}),l(t.pre,{tabIndex:"0","data-language":"typescript","data-theme":"plastic github-light",children:[l(t.code,{"data-language":"typescript","data-theme":"plastic github-light",style:{display:"grid"},children:[l(t.span,{"data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"export"}),e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:" function"}),e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" greet"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"name"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:":"}),e(t.span,{style:{"--shiki-dark":"#E5C07B","--shiki-light":"#005CC5"},children:" string"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",l(t.span,{className:"highlighted","data-line":"","data-highlighted-line":"",children:[e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"\tconsole"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"log"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),e(t.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"Hello, "}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"${"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"name"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"}"}),e(t.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:"!"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#032F62"},children:"`"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),e(t.span,{style:{"--shiki-dark":"#5F6672","--shiki-dark-font-style":"italic","--shiki-light":"#6A737D","--shiki-light-font-style":"inherit"},children:"// highlighted line"})]}),"\n",e(t.span,{"data-line":"",children:e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),e(t.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:l(t.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e(t.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),e(t.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),e(t.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",e(t.figure,{"data-rehype-pretty-code-figure":"",children:l(t.pre,{tabIndex:"0","data-language":"bash","data-theme":"plastic github-light",children:[l(t.code,{"data-language":"bash","data-theme":"plastic github-light",style:{display:"grid"},children:[l(t.span,{"data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"pnpm"}),e(t.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" install"})]}),"\n",l(t.span,{"data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"pnpm"}),e(t.span,{style:{"--shiki-dark":"#98C379","--shiki-light":"#032F62"},children:" dev"})]})]}),e(t.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:l(t.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e(t.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),e(t.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),e(t.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})}),"\n",e(t.h3,{id:"diff-code-block",children:e(t.a,{className:"anchor",href:"#diff-code-block",children:"Diff Code Block"})}),"\n",l(t.figure,{"data-rehype-pretty-code-figure":"",children:[e(t.figcaption,{"data-rehype-pretty-code-title":"","data-language":"javascript","data-theme":"plastic github-light",children:"cart.ts"}),l(t.pre,{className:"has-diff",tabIndex:"0","data-language":"javascript","data-theme":"plastic github-light",children:[l(t.code,{"data-language":"javascript","data-theme":"plastic github-light",style:{display:"grid"},children:[l(t.span,{"data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"function"}),e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:" calculateTotal"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"("}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"items"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") {"})]}),"\n",l(t.span,{className:"diff add","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"\tlet"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" total"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),e(t.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" 0"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"; "})]}),"\n",l(t.span,{className:"diff add","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"\tfor"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" ("}),e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"let"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" i"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),e(t.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:" 0"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"; "}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"i"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" <"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" items"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:"length"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"; "}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"i"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"++"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") { "})]}),"\n",l(t.span,{className:"diff add","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"\t\ttotal"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" +="}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" items"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"["}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"i"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"]."}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"price"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"; "})]}),"\n",e(t.span,{className:"diff add","data-line":"",children:e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"\t} "})}),"\n",l(t.span,{className:"diff remove","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"\tconst"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#005CC5"},children:" total"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" ="}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" items"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),e(t.span,{style:{"--shiki-dark":"#B57EDC","--shiki-light":"#6F42C1"},children:"reduce"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"(("}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"sum"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:", "}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#E36209"},children:"item"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:") "}),e(t.span,{style:{"--shiki-dark":"#61AFEF","--shiki-light":"#D73A49"},children:"=>"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:" { "})]}),"\n",l(t.span,{className:"diff remove","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"\t\treturn"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" sum"}),e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:" +"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" item"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"."}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:"price"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"; "})]}),"\n",l(t.span,{className:"diff remove","data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"\t}, "}),e(t.span,{style:{"--shiki-dark":"#56B6C2","--shiki-light":"#005CC5"},children:"0"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"); "})]}),"\n",e(t.span,{"data-line":"",children:" "}),"\n",l(t.span,{"data-line":"",children:[e(t.span,{style:{"--shiki-dark":"#E06C75","--shiki-light":"#D73A49"},children:"\treturn"}),e(t.span,{style:{"--shiki-dark":"#C6CCD7","--shiki-light":"#24292E"},children:" total"}),e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:";"})]}),"\n",e(t.span,{"data-line":"",children:e(t.span,{style:{"--shiki-dark":"#A9B2C3","--shiki-light":"#24292E"},children:"}"})})]}),e(t.button,{type:"button",className:"copy",title:"Copy to clipboard","data-copy":"code","aria-label":"Copy code",children:l(t.svg,{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e(t.rect,{width:"8",height:"4",x:"8",y:"2",rx:"1",ry:"1"}),e(t.path,{d:"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"}),e(t.path,{className:"check",d:"m9 14 2 2 4-4"})]})})]})]}),"\n",e(t.h2,{id:"tables--media",children:e(t.a,{className:"anchor",href:"#tables--media",children:"Tables & Media"})}),"\n",e(t.p,{children:"Use tables to compare features at a glance."}),"\n",l(t.table,{children:[e(t.thead,{children:l(t.tr,{children:[e(t.th,{children:"Feature"}),e(t.th,{children:"Markdown Syntax"}),e(t.th,{children:"Best For"})]})}),l(t.tbody,{children:[l(t.tr,{children:[e(t.td,{children:"Headings"}),e(t.td,{children:e(t.code,{children:"# Title"})}),e(t.td,{children:"Structuring long-form posts"})]}),l(t.tr,{children:[e(t.td,{children:"Code block"}),e(t.td,{children:e(t.code,{children:"tsx … "})}),e(t.td,{children:"Sharing snippets or configs"})]}),l(t.tr,{children:[e(t.td,{children:"Task list"}),e(t.td,{children:e(t.code,{children:"- [ ]"})}),e(t.td,{children:"Tracking work-in-progress"})]})]})]}),"\n",e(t.p,{children:"Column alignment is controlled with colons in the separator row:"}),"\n",l(t.table,{children:[e(t.thead,{children:l(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"Left Aligned"}),e(t.th,{style:{textAlign:"center"},children:"Centered"}),e(t.th,{style:{textAlign:"right"},children:"Right Aligned"})]})}),l(t.tbody,{children:[l(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:e(t.code,{children:":--"})}),e(t.td,{style:{textAlign:"center"},children:e(t.code,{children:":--:"})}),e(t.td,{style:{textAlign:"right"},children:e(t.code,{children:"--:"})})]}),l(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"Default text"}),e(t.td,{style:{textAlign:"center"},children:"Balanced"}),e(t.td,{style:{textAlign:"right"},children:"Totals (42)"})]})]})]}),"\n",e(t.h2,{id:"image",children:e(t.a,{className:"anchor",href:"#image",children:"Image"})}),"\n",e(t.img,{src:"/avatar.jpeg",alt:"Avatar illustration",width:"460",height:"460",blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAQxklEQVR4AQCBAH7/AP8KAP//CwD//w0A//8RAP//FgD//h4A//QnAf/rMgb/4j4M/9pLEv/TVhj/zGAd/8VoIP+/bCH/u28h/7duIP+2bB3/t2ca/7thFv/BWhP/ylEP/9RIC//gPwj/7TYE//ssAf//JAD//xwA//8VAP//EAD//wwA//8KAP//CAD/AIEAfv8A/wsA//8MAP//DgD//xIA//8XAP/+HwD/9CgD/+s0CP/iQA7/2kwU/9NYGv/MYR7/xWkh/8BuI/+7cCP/uHAh/7dtH/+4aRv/u2IY/8FbFP/KUxD/1EoM/+BACf/tNwX/+y0C//8kAP//HQD//xYA//8RAP//DQD//woA//8JAP8AgQB+/wD/DQD//w4A//8QAP//FAD//xoA//4hAf/0KwX/6zYK/+NCEP/bTxf/01oc/8xkIf/GbCT/wHEm/7tzJv+4cyT/t3Ai/7hrHv+8ZRv/wl4X/8pVE//UTA//4EIL/+w4B//6LwT//yYB//8eAP//FwD//xEA//8NAP//CwD//wkA/wCBAH7/AP8QAf//EQD//xMA//8XAf//HQL//iUF//UuCf/sOg7/40YU/9tTG//UXiD/zWgl/8dwKf/BdSr/vHcq/7l3Kf+4dCb/uXAj/7xpH//CYhv/ylkX/9RQEv/fRg7/7DsK//kyB///KAT//yAB//8ZAP//EwD//w8A//8MAP//CgD/AIEAfv8A/xME//8UBP//FwT//xsF//8hBv/+KQn/9TMN/+w+E//kSxn/3Fgg/9VjJv/Obiv/yHUu/8J6MP+9fTD/unwu/7l6LP+6dSj/vW8k/8NnIP/LXhz/1FQX/99KE//rQA//+DUL//8sB///IwT//xsC//8VAP//EQD//w0A//8MAP8AgQB+/wD/Fwj//xgI//8bCP//Hwn//yUL//4tDv/1OBL/7EQY/+RQH//cXSX/1Wks/89zMf/JezT/w4E2/76DNv+7gzX/uoAy/7t7L/++dSv/w20m/8tkIv/UWh3/308Y/+tEFP/3Og///zAL//8mCP//HwX//xgD//8TAv//EAH//w4B/wCBAH7/AP8bDP//HAz//x8N//8jDv//KhD//TIT//Q9GP/sSR7/5FYl/9xjLP/WbzL/z3o3/8mCO//Dhz3/v4o9/7yKPP+7hzn/u4I2/798Mv/EdC3/y2op/9RgJP/fVR//6koZ//U/Ff//NBD//ysN//8iCv//HAf//xcG//8TBf//EQT/AIEAfv8A/x4Q//8fEP//IhH//ycS//8tFP/7Nhj/8kEd/+pOI//jWyr/22gx/9V1OP/Ofz7/yYhC/8ONRP+/kET/vJBD/7uOQP+7iT3/voI5/8R6NP/LcS//1GYq/95bJf/oTx//9EQa//85Fv//LxH//yYO//8fC///Ggr//xYI//8VCP8AgQB+/wD/IBP//yET//8kFP//KRX//zAY//g5HP/vRSH/51Eo/+BfL//ZbTf/03o+/82EQ//HjUf/wpNK/76WSv+7lkn/uZNH/7qPRP+9iED/woA7/8l2Nv/SbDD/3GAr/+ZUJf/xSSD//D0a//8zFv//KhL//yMP//8dDf//Ggz//xgM/wCBAH7/AP8hFP//IhX//yUW//8rF//7Mhr/8zwf/+tHJP/jVCv/3GIz/9ZwO//QfUL/yohI/8SRTP+/l0//u5pQ/7iaT/+3mE3/uJNJ/7uNRf/AhUH/x3s7/89wNv/YZDD/4lgq/+1MJP/4QR///zYa//8tFv//JRP//yAR//8cEP//Gg//AIEAfv8A/yAV//8iFv//Jhf//CsZ//UzHP/tPCH/5kgn/95WLv/YZDb/0XI+/8t/Rv/Fi0z/wJRQ/7uaU/+3nVT/tJ5T/7ObUf+0l07/t5BK/7yIRf/DfkD/y3M6/9RnNP/eWy7/6E8o//JDIv/8OB3//y8Z//8nFv//IRT//x4S//8cEv8AgQB+/wD/IBb//yEX//wlGP/2Kxr/7zId/+c9Iv/gSSn/2Vcx/9JlOf/MdEH/xoFJ/8GNT/+7llT/tpxX/7KfWP+woFf/r55V/7CZUv+yk07/t4tJ/76BRP/Gdj7/z2k4/9hdMf/iUCv/7EQl//Y6IP//MBz//ygZ//8iFv//HxX//x0U/wCBAH7/APwfF//6IBj/9iQZ//AqG//pMh//4j0k/9pJK//UVzP/zWY8/8d1RP/Bgkz/vI5S/7eXV/+ynlr/rqFb/6uiW/+qoFn/q5tW/66VUf+yjE3/uYJH/8B3Qf/Jazv/0140/9xRLv/mRSj/8Doj//kxHv//KRv//yMZ//8fF///HRf/AIEAfv8A9x8Z//UgGv/wJBv/6yoe/+QzIv/dPif/1kou/89YNv/JZz//w3ZI/76EUP+4kFb/s5lb/66fXv+qo1//p6Rf/6ahXf+nnVr/qZZV/66OUP+0hEv/vHhF/8RsPv/NXzf/11Ix/+FGK//qOyb/8zIh//sqHv//JBz//yAa//8eGv8AgQB+/wD0IB3/8SId/+0mH//oLCL/4TQm/9o/LP/TTDP/zVs7/8dqRP/BeU3/u4ZV/7WSW/+wm2D/q6Jj/6elZP+kpmT/o6Ri/6SfXv+mmVr/q5BV/7CGT/+4ekn/wG5C/8lhO//TVDX/3Ecv/+Y8Kf/vMyX/9ysi//0lIP//IR7//x8d/wCBAH7/APIiIv/wJCP/7Cgl/+cvKP/gNyz/2UIy/9NPOf/MXkH/xm1K/8B8U/+6ilv/tZVh/6+fZv+qpWn/pqlq/6Opav+ip2j/oqJk/6ScYP+pk1v/rohV/7V9Tv+9cEf/xmNA/9BWOv/ZSTP/4z4u/+w1Kv/0LSf/+ick//8kI///IiL/AIEAfv8A8yYp//EoKv/tLCv/5zIu/+E7M//aRjn/01NA/81iSP/HcVH/wYBa/7uNYv+1mWj/sKJt/6upcP+mrHH/o61w/6Krbv+ipmv/pJ9m/6iWYf+ti1v/tH9U/7xyTf/FZUb/zlg//9dMOf/hQTT/6jcv//IwLP/4Kir//SYp//8kKP8AgQB+/wD1KTD/8isx/+4wM//pNjb/4z86/9xKQP/VV0f/zmVP/8h0WP/Cg2H/vJFp/7adb/+wpnT/q6x3/6eweP+ksHf/oq51/6Kpcf+kom3/qJln/62OYf+zglr/u3VT/8RnTP/NWkX/1k4//+BDOf/pOjX/8TIy//gtMP/9KS///ycu/wCBAH7/APYsN//0Ljf/8DM5/+s5PP/kQkD/3U1G/9ZaTf/PaFX/yXde/8OFZ/+9k2//t591/7Goev+srn3/p7J+/6Syff+isHr/oqt3/6Skcv+nmmz/rJBm/7ODX/+6dlj/wmlQ/8tcSv/VT0P/3kQ+/+g7Ov/wNDf/9y42//wrNf/+KTT/AIEAfv8A9y08//UvPP/xMz7/6zpB/+RCRf/dTUv/1lpS/89oWf/Id2L/woVq/7uTcv+1nnj/r6d9/6qugP+msYH/orKA/6Cvfv+gqnr/oqN2/6WacP+qj2n/sYNi/7h2W//AaFT/yVtN/9NPR//cREL/5js+/+40O//1Lzr/+is5//0qOP8AgQB+/wD2LD7/8y4//+8yQP/pOEP/4kBH/9tLTP/UV1P/zGVa/8VzY/++gmv/uI9y/7Kbef+spH3/pqqA/6Ktgf+eroH/nax+/52ne/+eoHb/oZdw/6aMav+tf2P/tHJc/7xlVP/FWE7/z0xI/9lBQ//iOD//6zI9//ItPP/4KTv/+ig6/wCBAH7/APInPv/wKT7/7C1A/+UzQv/eO0b/1kVL/89RUf/HX1j/v21g/7h7aP+yiG//q5N2/6Wdev+go33/m6Z+/5infv+WpXz/lqB4/5iZdP+bkG7/oIVo/6Z5Yf+ubFr/tl9S/8BSTP/JRkb/1DxC/900P//mLTz/7ig7//MlOv/2JDr/AIEAfv8A7SE7/+siO//mJj3/4Cs//9gzQv/QPUf/x0lM/79WU/+3ZFv/sHFi/6l+av+iiXD/nJJ0/5eZd/+SnHj/j514/46bdv+Ol3P/kJBv/5OHaf+YfWP/n3Fc/6ZkVf+vV07/uEpI/8I/Q//NNT//1y08/+AmOv/oIjn/7R84//AeOP8AgQB+/wDnGTf/5Ro3/+AdOP/ZIzr/0So9/8gzQf+/Pkb/tktN/65YVP+mZlv/n3Ji/5h9aP+Shmz/jI1v/4iRcP+FknD/hJBv/4SMbP+GhWj/in1j/49yXf+WZ1b/nlpP/6dNSf+wQUP/uzY+/8UsOv/QJTf/2R82/+EaNf/nGDX/6hY1/wCBAH7/AOIRM//fEjP/2hU0/9IaNf/KITf/wCk7/7c0QP+uQEX/pU1M/51aU/+VZln/jnFf/4d6Y/+CgGb/foRo/3uGaP96hGf/eoBk/316YP+Bclv/hmhW/41dUP+VUEn/n0RD/6k4Pv+zLTn/viQ2/8kdM//TFzL/2xMy/+ERMv/kEDL/AIEAfv8A3gow/9sLMP/VDjD/zRMx/8QZM/+6ITb/sCs6/6Y2P/+dQ0X/lE9M/4xbUv+FZlf/fm9c/3l1X/91eWD/cnth/3F6X/9ydl3/dXBa/3loVf9/X1D/hlRK/45IRP+YPD7/ojA5/64mNf+5HTL/xBYw/84RL//XDS//3Qsv/+AKMP8AgQB+/wDcBi//2Qcv/9MKL//LDi//wRMx/7cbM/+sJDb/oS87/5c7QP+OR0b/hVJM/35dUf93ZVb/cmxZ/25wWv9rclv/a3Fa/2xuWP9vaFX/c2FR/3lXTP+BTUf/ikFB/5Q2PP+fKzf/qiEz/7YYMP/BEi//zA0u/9UJL//bBy//3gYv/wCBAH7/AN0FMP/aBjD/0wgw/8sLMP/BETH/thgy/6ogNf+fKzn/lDY+/4tBRP+CTEn/eldO/3NfUv9tZlX/aWpX/2dsWP9na1f/aGhV/2tjU/9wXE//d1NK/39JRf+IPkD/kjI7/50oNv+pHjP/tRYx/8EQMP/MCzD/1Qgw/9sGMf/fBTH/AIEAfv8A4AY0/90HM//WCTP/zQwy/8IQM/+3FzT/qx82/58pOv+UMz7/ij5D/4BJSP94U03/cVxR/2xiVP9oZlb/ZWhX/2VoVv9nZlX/amFS/3BaT/92UUv/fkdG/4g8Qf+SMTz/nic4/6oeNf+3FjP/wxAy/84MMv/XCTP/3gc0/+EGNP8AgQB+/wDkCDj/4Ak3/9oLNv/QDTb/xRI2/7kYNv+tHzj/oCk7/5UzP/+KPkT/gUhJ/3hSTf9xWlH/bGFU/2hlVv9mZ1f/ZWdX/2dlVv9rYFP/cFlQ/3dRTP+AR0j/iT1D/5QyPv+gKDv/rB84/7kXNv/GEjb/0Q02/9oLN//hCTj/5Qk4/wCBAH7/AOcLO//kCzv/3Q06/9QPOf/IFDn/vBk5/68hO/+iKT3/lzNB/4w+Rf+CSEr/eVJO/3JaUv9sYFX/aGVX/2ZnWP9mZ1j/aGVX/2xgVf9yWlL/eVFO/4FISv+LPkX/ljNB/6IpPf+vIDv/vBk5/8gTOf/UEDn/3Q06/+QMO//oCzz/AYEAfv8A6gw+/+YNPf/fDjz/1RE7/8oVO/+9Gjv/sCE8/6QqP/+YNEL/jT5G/4NJS/96Uk//c1pT/21hVv9pZVj/Z2dZ/2dnWf9pZVj/bWFW/3NaU/96Uk//g0lL/40+Rv+YNEL/pCo//7AhPP+9Gjv/yhU7/9URO//fDjz/5g09/+oMPv94Ijkx74xgbQAAAABJRU5ErkJggg=="})]})}return{default:function(i={}){const{wrapper:l}=i.components||{};return l?e(l,{...i,children:e(_createMdxContent,{...i})}):_createMdxContent(i)}};