[{"data":1,"prerenderedAt":880},["ShallowReactive",2],{"post-\u002Fposts\u002Fff906e7f":3,"post-nav-\u002Fposts\u002Fff906e7f":843,"post-related-\u002Fposts\u002Fff906e7f":862},{"id":4,"title":5,"abbrlink":6,"aisummary":7,"body":8,"category":828,"cover":829,"date":830,"description":831,"draft":832,"extension":833,"featured":832,"meta":834,"navigation":562,"path":835,"pinned":832,"seo":836,"stem":837,"tags":838,"updated":829,"__hash__":842},"posts\u002Fposts\u002Fstatic-search.md","静态博客的搜索为什么不用后端","ff906e7f","作者分享了在静态博客中实现搜索功能的另一种方法，即在构建时生成一个包含关键字段的 JSON 索引，前端按需加载。通过剥离 HTML 标签，可大幅减少索引体积，提升加载速度。该方案无需后端支持，具备离线可用、零延迟和部署即生效的优势，适用于个人博客，但新文章需重新构建才能被索引。技术选型应根据实际规模决定，JSON 方案对小规模博客更为合适。",{"type":9,"value":10,"toc":819},"minimark",[11,15,36,44,48,202,205,208,211,232,239,484,505,508,513,520,717,723,726,742,745,751,754,757,763,769,779,782,785,791,797,800,803,806,812,815],[12,13,14],"p",{},"每次有人问我\"静态博客怎么做搜索\"，标准答案通常是这四种：",[16,17,18,22,25,28],"ol",{},[19,20,21],"li",{},"Algolia（要付费、要联网、要等索引同步）",[19,23,24],{},"MeiliSearch（要跑一个服务）",[19,26,27],{},"Pagefind（好，但更偏向几千页以上的站）",[19,29,30,31,35],{},"搜索引擎的 ",[32,33,34],"code",{},"site:"," 语法（等于没有）",[12,37,38,39,43],{},"我用的是第五种：",[40,41,42],"strong",{},"构建时生成一个 JSON 索引，前端按需加载","。",[45,46,47],"h2",{"id":47},"索引长什么样",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-json shiki shiki-themes github-light github-dark","[\n  {\n    \"id\": \"typography-over-color\",\n    \"title\": \"排版比配色更决定气质\",\n    \"description\": \"把同样一套颜色交给两个人排，出来的东西可以完全不同。\",\n    \"tags\": [\"排版\", \"设计\", \"CSS\"],\n    \"category\": \"设计\",\n    \"text\": \"做前端这些年我逐渐发现一个规律换一套配色页面会变好看改一遍排版页面会变成另一个东西…\",\n    \"path\": \"\u002Fposts\u002Ftypography-over-color\",\n    \"date\": \"2025-10-28T00:00:00.000Z\"\n  }\n]\n","json","",[32,56,57,66,72,89,102,115,141,153,166,179,190,196],{"__ignoreMap":54},[58,59,62],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sVt8B","[\n",[58,67,69],{"class":60,"line":68},2,[58,70,71],{"class":64},"  {\n",[58,73,75,79,82,86],{"class":60,"line":74},3,[58,76,78],{"class":77},"sj4cs","    \"id\"",[58,80,81],{"class":64},": ",[58,83,85],{"class":84},"sZZnC","\"typography-over-color\"",[58,87,88],{"class":64},",\n",[58,90,92,95,97,100],{"class":60,"line":91},4,[58,93,94],{"class":77},"    \"title\"",[58,96,81],{"class":64},[58,98,99],{"class":84},"\"排版比配色更决定气质\"",[58,101,88],{"class":64},[58,103,105,108,110,113],{"class":60,"line":104},5,[58,106,107],{"class":77},"    \"description\"",[58,109,81],{"class":64},[58,111,112],{"class":84},"\"把同样一套颜色交给两个人排，出来的东西可以完全不同。\"",[58,114,88],{"class":64},[58,116,118,121,124,127,130,133,135,138],{"class":60,"line":117},6,[58,119,120],{"class":77},"    \"tags\"",[58,122,123],{"class":64},": [",[58,125,126],{"class":84},"\"排版\"",[58,128,129],{"class":64},", ",[58,131,132],{"class":84},"\"设计\"",[58,134,129],{"class":64},[58,136,137],{"class":84},"\"CSS\"",[58,139,140],{"class":64},"],\n",[58,142,144,147,149,151],{"class":60,"line":143},7,[58,145,146],{"class":77},"    \"category\"",[58,148,81],{"class":64},[58,150,132],{"class":84},[58,152,88],{"class":64},[58,154,156,159,161,164],{"class":60,"line":155},8,[58,157,158],{"class":77},"    \"text\"",[58,160,81],{"class":64},[58,162,163],{"class":84},"\"做前端这些年我逐渐发现一个规律换一套配色页面会变好看改一遍排版页面会变成另一个东西…\"",[58,165,88],{"class":64},[58,167,169,172,174,177],{"class":60,"line":168},9,[58,170,171],{"class":77},"    \"path\"",[58,173,81],{"class":64},[58,175,176],{"class":84},"\"\u002Fposts\u002Ftypography-over-color\"",[58,178,88],{"class":64},[58,180,182,185,187],{"class":60,"line":181},10,[58,183,184],{"class":77},"    \"date\"",[58,186,81],{"class":64},[58,188,189],{"class":84},"\"2025-10-28T00:00:00.000Z\"\n",[58,191,193],{"class":60,"line":192},11,[58,194,195],{"class":64},"  }\n",[58,197,199],{"class":60,"line":198},12,[58,200,201],{"class":64},"]\n",[12,203,204],{},"就这些字段，一个都不多。",[45,206,207],{"id":207},"为什么这么小",[12,209,210],{},"假设你有 100 篇文章，每篇 3000 字。",[212,213,214,217,220,226],"ul",{},[19,215,216],{},"原始 markdown：100 × 3000 × 3 bytes ≈ 900 KB",[19,218,219],{},"HTML 渲染后：大约 2.5 MB（标签很占地方）",[19,221,222,225],{},[40,223,224],{},"剥离 HTML 后的纯文本","：约 850 KB",[19,227,228,229],{},"gzip 之后：",[40,230,231],{},"约 180 KB",[12,233,234,235,238],{},"关键动作是",[40,236,237],{},"剥 HTML","。这一步能砍掉 60% 以上。",[49,240,244],{"className":241,"code":242,"language":243,"meta":54,"style":54},"language-ts shiki shiki-themes github-light github-dark","function stripHtml(html: string): string {\n  return html\n    .replace(\u002F\u003Cscript[\\s\\S]*?\u003C\\\u002Fscript>\u002Fgi, ' ')\n    .replace(\u002F\u003Cstyle[\\s\\S]*?\u003C\\\u002Fstyle>\u002Fgi, ' ')\n    .replace(\u002F\u003Cpre[\\s\\S]*?\u003C\\\u002Fpre>\u002Fgi, ' ')   \u002F\u002F 代码块也剥掉\n    .replace(\u002F\u003C[^>]+>\u002Fg, ' ')\n    .replace(\u002F\\s+\u002Fg, ' ')\n    .trim()\n}\n","ts",[32,245,246,279,287,333,367,406,444,469,479],{"__ignoreMap":54},[58,247,248,252,256,259,263,266,269,272,274,276],{"class":60,"line":61},[58,249,251],{"class":250},"szBVR","function",[58,253,255],{"class":254},"sScJk"," stripHtml",[58,257,258],{"class":64},"(",[58,260,262],{"class":261},"s4XuR","html",[58,264,265],{"class":250},":",[58,267,268],{"class":77}," string",[58,270,271],{"class":64},")",[58,273,265],{"class":250},[58,275,268],{"class":77},[58,277,278],{"class":64}," {\n",[58,280,281,284],{"class":60,"line":68},[58,282,283],{"class":250},"  return",[58,285,286],{"class":64}," html\n",[58,288,289,292,295,297,300,304,307,310,313,317,320,322,325,327,330],{"class":60,"line":74},[58,290,291],{"class":64},"    .",[58,293,294],{"class":254},"replace",[58,296,258],{"class":64},[58,298,299],{"class":84},"\u002F",[58,301,303],{"class":302},"sA_wV","\u003Cscript",[58,305,306],{"class":77},"[\\s\\S]",[58,308,309],{"class":250},"*?",[58,311,312],{"class":302},"\u003C",[58,314,316],{"class":315},"snhLl","\\\u002F",[58,318,319],{"class":302},"script>",[58,321,299],{"class":84},[58,323,324],{"class":250},"gi",[58,326,129],{"class":64},[58,328,329],{"class":84},"' '",[58,331,332],{"class":64},")\n",[58,334,335,337,339,341,343,346,348,350,352,354,357,359,361,363,365],{"class":60,"line":91},[58,336,291],{"class":64},[58,338,294],{"class":254},[58,340,258],{"class":64},[58,342,299],{"class":84},[58,344,345],{"class":302},"\u003Cstyle",[58,347,306],{"class":77},[58,349,309],{"class":250},[58,351,312],{"class":302},[58,353,316],{"class":315},[58,355,356],{"class":302},"style>",[58,358,299],{"class":84},[58,360,324],{"class":250},[58,362,129],{"class":64},[58,364,329],{"class":84},[58,366,332],{"class":64},[58,368,369,371,373,375,377,380,382,384,386,388,391,393,395,397,399,402],{"class":60,"line":104},[58,370,291],{"class":64},[58,372,294],{"class":254},[58,374,258],{"class":64},[58,376,299],{"class":84},[58,378,379],{"class":302},"\u003Cpre",[58,381,306],{"class":77},[58,383,309],{"class":250},[58,385,312],{"class":302},[58,387,316],{"class":315},[58,389,390],{"class":302},"pre>",[58,392,299],{"class":84},[58,394,324],{"class":250},[58,396,129],{"class":64},[58,398,329],{"class":84},[58,400,401],{"class":64},")   ",[58,403,405],{"class":404},"sJ8bj","\u002F\u002F 代码块也剥掉\n",[58,407,408,410,412,414,416,418,421,424,427,430,433,435,438,440,442],{"class":60,"line":117},[58,409,291],{"class":64},[58,411,294],{"class":254},[58,413,258],{"class":64},[58,415,299],{"class":84},[58,417,312],{"class":302},[58,419,420],{"class":77},"[",[58,422,423],{"class":250},"^",[58,425,426],{"class":77},">]",[58,428,429],{"class":250},"+",[58,431,432],{"class":302},">",[58,434,299],{"class":84},[58,436,437],{"class":250},"g",[58,439,129],{"class":64},[58,441,329],{"class":84},[58,443,332],{"class":64},[58,445,446,448,450,452,454,457,459,461,463,465,467],{"class":60,"line":143},[58,447,291],{"class":64},[58,449,294],{"class":254},[58,451,258],{"class":64},[58,453,299],{"class":84},[58,455,456],{"class":77},"\\s",[58,458,429],{"class":250},[58,460,299],{"class":84},[58,462,437],{"class":250},[58,464,129],{"class":64},[58,466,329],{"class":84},[58,468,332],{"class":64},[58,470,471,473,476],{"class":60,"line":155},[58,472,291],{"class":64},[58,474,475],{"class":254},"trim",[58,477,478],{"class":64},"()\n",[58,480,481],{"class":60,"line":168},[58,482,483],{"class":64},"}\n",[12,485,486,487,490,491,494,495,494,498,501,502,504],{},"那行 ",[32,488,489],{},"\u003Cpre>"," 的处理是有争议的。代码块里全是 ",[32,492,493],{},"useState","、",[32,496,497],{},"div",[32,499,500],{},"const"," 这种标识符，进索引只会制造噪音——用户搜「前端」不该命中一个满是 ",[32,503,497],{}," 的代码块。",[45,506,507],{"id":507},"什么时候加载",[12,509,510],{},[40,511,512],{},"用户第一次打开搜索框的时候。",[12,514,515,516,519],{},"不是页面加载时，不是空闲时，是真正按下 ",[32,517,518],{},"Ctrl+K"," 的那一刻。",[49,521,523],{"className":241,"code":522,"language":243,"meta":54,"style":54},"let indexPromise: Promise\u003CMiniSearch> | null = null\n\nfunction ensureIndex() {\n  if (!indexPromise) {\n    indexPromise = fetch('\u002Fapi\u002Fsearch-index.json')\n      .then((r) => r.json())\n      .then((docs) => {\n        const ms = new MiniSearch({ \u002F* ... *\u002F })\n        ms.addAll(docs)\n        return ms\n      })\n  }\n  return indexPromise\n}\n",[32,524,525,558,564,574,588,606,634,651,676,687,695,700,704,712],{"__ignoreMap":54},[58,526,527,530,533,535,538,540,543,546,549,552,555],{"class":60,"line":61},[58,528,529],{"class":250},"let",[58,531,532],{"class":64}," indexPromise",[58,534,265],{"class":250},[58,536,537],{"class":254}," Promise",[58,539,312],{"class":64},[58,541,542],{"class":254},"MiniSearch",[58,544,545],{"class":64},"> ",[58,547,548],{"class":250},"|",[58,550,551],{"class":77}," null",[58,553,554],{"class":250}," =",[58,556,557],{"class":77}," null\n",[58,559,560],{"class":60,"line":68},[58,561,563],{"emptyLinePlaceholder":562},true,"\n",[58,565,566,568,571],{"class":60,"line":74},[58,567,251],{"class":250},[58,569,570],{"class":254}," ensureIndex",[58,572,573],{"class":64},"() {\n",[58,575,576,579,582,585],{"class":60,"line":91},[58,577,578],{"class":250},"  if",[58,580,581],{"class":64}," (",[58,583,584],{"class":250},"!",[58,586,587],{"class":64},"indexPromise) {\n",[58,589,590,593,596,599,601,604],{"class":60,"line":104},[58,591,592],{"class":64},"    indexPromise ",[58,594,595],{"class":250},"=",[58,597,598],{"class":254}," fetch",[58,600,258],{"class":64},[58,602,603],{"class":84},"'\u002Fapi\u002Fsearch-index.json'",[58,605,332],{"class":64},[58,607,608,611,614,617,620,623,626,629,631],{"class":60,"line":117},[58,609,610],{"class":64},"      .",[58,612,613],{"class":254},"then",[58,615,616],{"class":64},"((",[58,618,619],{"class":261},"r",[58,621,622],{"class":64},") ",[58,624,625],{"class":250},"=>",[58,627,628],{"class":64}," r.",[58,630,53],{"class":254},[58,632,633],{"class":64},"())\n",[58,635,636,638,640,642,645,647,649],{"class":60,"line":143},[58,637,610],{"class":64},[58,639,613],{"class":254},[58,641,616],{"class":64},[58,643,644],{"class":261},"docs",[58,646,622],{"class":64},[58,648,625],{"class":250},[58,650,278],{"class":64},[58,652,653,656,659,661,664,667,670,673],{"class":60,"line":155},[58,654,655],{"class":250},"        const",[58,657,658],{"class":77}," ms",[58,660,554],{"class":250},[58,662,663],{"class":250}," new",[58,665,666],{"class":254}," MiniSearch",[58,668,669],{"class":64},"({ ",[58,671,672],{"class":404},"\u002F* ... *\u002F",[58,674,675],{"class":64}," })\n",[58,677,678,681,684],{"class":60,"line":168},[58,679,680],{"class":64},"        ms.",[58,682,683],{"class":254},"addAll",[58,685,686],{"class":64},"(docs)\n",[58,688,689,692],{"class":60,"line":181},[58,690,691],{"class":250},"        return",[58,693,694],{"class":64}," ms\n",[58,696,697],{"class":60,"line":192},[58,698,699],{"class":64},"      })\n",[58,701,702],{"class":60,"line":198},[58,703,195],{"class":64},[58,705,707,709],{"class":60,"line":706},13,[58,708,283],{"class":250},[58,710,711],{"class":64}," indexPromise\n",[58,713,715],{"class":60,"line":714},14,[58,716,483],{"class":64},[12,718,719,720,722],{},"用一个 Promise 做缓存的好处是：连续按三次 ",[32,721,518],{}," 也只会发一次请求。",[45,724,725],{"id":725},"加载要多久",[12,727,728,729,732,733,732,736,738,739,43],{},"本地测：180KB 的 JSON，",[32,730,731],{},"fetch"," + ",[32,734,735],{},"JSON.parse",[32,737,683],{}," 建索引，",[40,740,741],{},"大约 60~90ms",[12,743,744],{},"用户感知不到。但如果索引超过 500KB，这个数字会变成 300ms+，就该考虑分片或者换 Pagefind 了。",[12,746,747,748],{},"所以我的判断线是：",[40,749,750],{},"索引 gzip 后 300KB 以内用方案五，超过就用 Pagefind。",[12,752,753],{},"对一个个人博客（几十到几百篇）来说，永远到不了这条线。",[45,755,756],{"id":756},"不用后端的三个好处",[12,758,759,762],{},[40,760,761],{},"一、离线可用。"," Service Worker 缓存了索引之后，断网也能搜。",[12,764,765,768],{},[40,766,767],{},"二、零延迟。"," 没有网络往返，搜索是同步的（建完索引之后）。",[12,770,771,774,775,778],{},[40,772,773],{},"三、部署即生效。"," 写文章 → ",[32,776,777],{},"git push"," → 构建 → 索引和文章一起上线。不需要\"等 Algolia 爬\"。",[45,780,781],{"id":781},"唯一的问题",[12,783,784],{},"索引是构建时生成的，所以：",[12,786,787,790],{},[40,788,789],{},"草稿不会被搜到。"," 这是对的。",[12,792,793,796],{},[40,794,795],{},"但新文章要重新构建才能搜到。"," 对静态博客来说这本来就是事实——文章本身也要重新构建才存在。",[12,798,799],{},"所以这个\"缺点\"根本不存在。",[45,801,802],{"id":802},"结语",[12,804,805],{},"技术选型的本质是匹配规模。",[12,807,808,809,43],{},"Algolia 对一万篇文章的电商站是对的；MeiliSearch 对需要实时索引的社区是对的；",[40,810,811],{},"一个 JSON 文件对个人博客是对的",[12,813,814],{},"用大炮打蚊子不叫稳健，叫没算清楚。",[816,817,818],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#57606A;--shiki-dark:#9AA4B0}",{"title":54,"searchDepth":68,"depth":68,"links":820},[821,822,823,824,825,826,827],{"id":47,"depth":68,"text":47},{"id":207,"depth":68,"text":207},{"id":507,"depth":68,"text":507},{"id":725,"depth":68,"text":725},{"id":756,"depth":68,"text":756},{"id":781,"depth":68,"text":781},{"id":802,"depth":68,"text":802},"工程",null,"2025-09-05","300KB 的索引、一次懒加载、纯前端查询。对一个几百篇文章的博客来说，这个方案比任何搜索引擎都合适。",false,"md",{},"\u002Fposts\u002Fff906e7f",{"title":5,"description":831},"posts\u002Fstatic-search",[839,840,841],"搜索","架构","SSG","7ZLaYw7fJuIt_2cLBaCpISjIpb5YpEc91HUYsmKZOBo",{"prev":844,"next":854},{"path":845,"title":846,"description":847,"date":848,"updated":829,"tags":849,"category":828,"cover":853,"draft":832,"pinned":562,"featured":832},"\u002Fposts\u002F57060fdd","特殊字符与代码块压测：& \u003C > \" ' 全都要","一篇专门用来喂 RSS\u002FAtom 校验器的文章。正文里塞满了 & \u003C > 引号、CDATA 边界、嵌套代码块和原始 HTML 片段。","2025-10-20",[850,851,852],"RSS","XML","测试","\u002Fimages\u002Fcovers\u002Fcharset.png",{"path":855,"title":856,"description":857,"date":858,"updated":829,"tags":859,"category":828,"cover":829,"draft":832,"pinned":832,"featured":832},"\u002Fposts\u002F71970a13","一个配置文件能解决多少问题","零硬编码听起来是教条，实践起来是架构约束。这篇讲我怎么用四个配置文件把全站的可变内容抽干净，以及它带来的真实收益。","2025-07-10",[840,860,861],"配置","可维护性",[863,871,878],{"path":864,"title":865,"description":866,"date":867,"updated":829,"tags":868,"category":828,"cover":829,"draft":832,"pinned":832,"featured":832},"\u002Fposts\u002F63afeff4","我删掉了站点的 90% 功能","一个博客需要什么？列表、文章、归档、搜索、订阅。其他东西我全删了，然后发现加载时间从 2.3 秒掉到了 380 毫秒。","2025-10-12",[869,840,870],"性能","反思",{"path":872,"title":873,"description":874,"date":875,"updated":829,"tags":876,"category":828,"cover":829,"draft":832,"pinned":832,"featured":832},"\u002Fposts\u002F26fa10db","中文分词为什么把搜索做坏了","MiniSearch 默认按空格切词，对中文来说等于完全失效。这篇讲 CJK 该怎么切，以及 bigram 加单字兜底为什么比单纯整词匹配更靠谱。","2025-09-30",[839,542,877],"中文",{"path":855,"title":856,"description":857,"date":858,"updated":829,"tags":879,"category":828,"cover":829,"draft":832,"pinned":832,"featured":832},[840,860,861],1794495071243]