[{"data":1,"prerenderedAt":515},["ShallowReactive",2],{"\u002Fblog\u002Ffrontend-trends-2026":3,"blog-all-for-nav":78},{"id":4,"title":5,"body":6,"date":65,"description":66,"draft":67,"extension":68,"meta":69,"navigation":70,"path":71,"seo":72,"stem":73,"tags":74,"__hash__":77},"blog\u002Fblog\u002Ffrontend-trends-2026.md","2026 前端开发趋势观察",{"type":7,"value":8,"toc":58},"minimark",[9,13,17,22,25,29,32,36,44,50],[10,11,5],"h1",{"id":12},"_2026-前端开发趋势观察",[14,15,16],"p",{},"站在 2026 年中，前端生态已经相当成熟。以下是我的一些观察。",[18,19,21],"h2",{"id":20},"ssr-框架成为默认选择","SSR 框架成为默认选择",[14,23,24],{},"Nuxt 4 的发布标志着 Vue 生态 SSR 方案的成熟。对于内容型网站，SSG + 预渲染是性能和 SEO 的最佳平衡点。",[18,26,28],{"id":27},"原子化-css-持续流行","原子化 CSS 持续流行",[14,30,31],{},"UnoCSS 和 Tailwind 依然是主流选择。原子化 CSS 在组件化开发中提供了极好的开发体验。",[18,33,35],{"id":34},"ai-辅助开发","AI 辅助开发",[14,37,38,39,43],{},"AI 工具已经深度融入日常开发流程，但",[40,41,42],"strong",{},"架构决策和代码审查","仍然需要开发者的判断。",[45,46,47],"blockquote",{},[14,48,49],{},"工具会变，但对用户体验和代码质量的关注不会变。",[14,51,52,53,57],{},"这篇是草稿示例的反面——它已正式发布。你可以在 frontmatter 中设置 ",[54,55,56],"code",{},"draft: true"," 来隐藏未完成的文章。",{"title":59,"searchDepth":60,"depth":60,"links":61},"",2,[62,63,64],{"id":20,"depth":60,"text":21},{"id":27,"depth":60,"text":28},{"id":34,"depth":60,"text":35},"2026-05-25","对 Vue 生态、SSR 框架和 AI 辅助开发的一些个人看法。",false,"md",{},true,"\u002Fblog\u002Ffrontend-trends-2026",{"title":5,"description":66},"blog\u002Ffrontend-trends-2026",[75,76],"前端","随笔","x--9tMQw15duVGqbsdqw4WdXSHVd7_j_EOH9OI4F6O0",[79,104,141,394],{"id":80,"title":81,"body":82,"date":95,"description":96,"draft":70,"extension":68,"meta":97,"navigation":70,"path":98,"seo":99,"stem":100,"tags":101,"__hash__":103},"blog\u002Fblog\u002Fdraft-example.md","未完成的文章（草稿）",{"type":7,"value":83,"toc":93},[84,87],[10,85,86],{"id":86},"草稿文章",[14,88,89,90,92],{},"这篇文章设置了 ",[54,91,56],{},"，生产环境中不会出现在列表页。",{"title":59,"searchDepth":60,"depth":60,"links":94},[],"2026-05-27","这是一篇草稿，不会在博客列表中显示。",{},"\u002Fblog\u002Fdraft-example",{"title":81,"description":96},"blog\u002Fdraft-example",[102],"草稿","JDZn62BILAjRr4MQ0SzyjNY9AF2cIckjDp3mLkywYiw",{"id":4,"title":5,"body":105,"date":65,"description":66,"draft":67,"extension":68,"meta":138,"navigation":70,"path":71,"seo":139,"stem":73,"tags":140,"__hash__":77},{"type":7,"value":106,"toc":133},[107,109,111,113,115,117,119,121,125,129],[10,108,5],{"id":12},[14,110,16],{},[18,112,21],{"id":20},[14,114,24],{},[18,116,28],{"id":27},[14,118,31],{},[18,120,35],{"id":34},[14,122,38,123,43],{},[40,124,42],{},[45,126,127],{},[14,128,49],{},[14,130,52,131,57],{},[54,132,56],{},{"title":59,"searchDepth":60,"depth":60,"links":134},[135,136,137],{"id":20,"depth":60,"text":21},{"id":27,"depth":60,"text":28},{"id":34,"depth":60,"text":35},{},{"title":5,"description":66},[75,76],{"id":142,"title":143,"body":144,"date":384,"description":385,"draft":67,"extension":68,"meta":386,"navigation":70,"path":387,"seo":388,"stem":389,"tags":390,"__hash__":393},"blog\u002Fblog\u002Fnuxt-content-guide.md","用 Nuxt Content 搭建 Markdown 博客",{"type":7,"value":145,"toc":379},[146,149,160,164,171,284,287,294,358,361,368,375],[10,147,143],{"id":148},"用-nuxt-content-搭建-markdown-博客",[14,150,151,152,155,156,159],{},"Nuxt Content 让 Markdown 文件变成了一等公民的内容源。只需在 ",[54,153,154],{},"content\u002Fblog\u002F"," 目录下创建 ",[54,157,158],{},".md"," 文件，框架会自动解析 frontmatter 并生成路由。",[18,161,163],{"id":162},"collection-配置","Collection 配置",[14,165,166,167,170],{},"在 ",[54,168,169],{},"content.config.ts"," 中定义 collection：",[172,173,177],"pre",{"className":174,"code":175,"language":176,"meta":59,"style":59},"language-typescript shiki shiki-themes github-light github-dark","defineCollection({\n  type: 'page',\n  source: 'blog\u002F**\u002F*.md',\n  schema: z.object({\n    title: z.string(),\n    date: z.coerce.date(),\n    tags: z.array(z.string()).default([]),\n  }),\n})\n","typescript",[54,178,179,192,204,215,226,238,249,272,278],{"__ignoreMap":59},[180,181,184,188],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"sScJk","defineCollection",[180,189,191],{"class":190},"sVt8B","({\n",[180,193,194,197,201],{"class":182,"line":60},[180,195,196],{"class":190},"  type: ",[180,198,200],{"class":199},"sZZnC","'page'",[180,202,203],{"class":190},",\n",[180,205,207,210,213],{"class":182,"line":206},3,[180,208,209],{"class":190},"  source: ",[180,211,212],{"class":199},"'blog\u002F**\u002F*.md'",[180,214,203],{"class":190},[180,216,218,221,224],{"class":182,"line":217},4,[180,219,220],{"class":190},"  schema: z.",[180,222,223],{"class":186},"object",[180,225,191],{"class":190},[180,227,229,232,235],{"class":182,"line":228},5,[180,230,231],{"class":190},"    title: z.",[180,233,234],{"class":186},"string",[180,236,237],{"class":190},"(),\n",[180,239,241,244,247],{"class":182,"line":240},6,[180,242,243],{"class":190},"    date: z.coerce.",[180,245,246],{"class":186},"date",[180,248,237],{"class":190},[180,250,252,255,258,261,263,266,269],{"class":182,"line":251},7,[180,253,254],{"class":190},"    tags: z.",[180,256,257],{"class":186},"array",[180,259,260],{"class":190},"(z.",[180,262,234],{"class":186},[180,264,265],{"class":190},"()).",[180,267,268],{"class":186},"default",[180,270,271],{"class":190},"([]),\n",[180,273,275],{"class":182,"line":274},8,[180,276,277],{"class":190},"  }),\n",[180,279,281],{"class":182,"line":280},9,[180,282,283],{"class":190},"})\n",[18,285,286],{"id":286},"查询文章",[14,288,289,290,293],{},"使用 ",[54,291,292],{},"queryCollection"," 获取文章列表：",[172,295,297],{"className":174,"code":296,"language":176,"meta":59,"style":59},"const posts = await queryCollection('blog')\n  .order('date', 'DESC')\n  .all()\n",[54,298,299,327,348],{"__ignoreMap":59},[180,300,301,305,309,312,315,318,321,324],{"class":182,"line":183},[180,302,304],{"class":303},"szBVR","const",[180,306,308],{"class":307},"sj4cs"," posts",[180,310,311],{"class":303}," =",[180,313,314],{"class":303}," await",[180,316,317],{"class":186}," queryCollection",[180,319,320],{"class":190},"(",[180,322,323],{"class":199},"'blog'",[180,325,326],{"class":190},")\n",[180,328,329,332,335,337,340,343,346],{"class":182,"line":60},[180,330,331],{"class":190},"  .",[180,333,334],{"class":186},"order",[180,336,320],{"class":190},[180,338,339],{"class":199},"'date'",[180,341,342],{"class":190},", ",[180,344,345],{"class":199},"'DESC'",[180,347,326],{"class":190},[180,349,350,352,355],{"class":182,"line":206},[180,351,331],{"class":190},[180,353,354],{"class":186},"all",[180,356,357],{"class":190},"()\n",[18,359,360],{"id":360},"渲染内容",[14,362,363,364,367],{},"详情页使用 ",[54,365,366],{},"\u003CContentRenderer>"," 组件即可渲染 Markdown 正文，代码高亮由 Shiki 自动处理。",[14,369,370,371,374],{},"这种方案的优势是：",[40,372,373],{},"零后端、Git 版本管理、构建时预渲染","，非常适合个人博客。",[376,377,378],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":59,"searchDepth":60,"depth":60,"links":380},[381,382,383],{"id":162,"depth":60,"text":163},{"id":286,"depth":60,"text":286},{"id":360,"depth":60,"text":360},"2026-05-22","介绍如何使用 Nuxt Content v3 的 collection 机制管理 Markdown 文章。",{},"\u002Fblog\u002Fnuxt-content-guide",{"title":143,"description":385},"blog\u002Fnuxt-content-guide",[391,392],"Nuxt","Vue","V6IIXFNjKyR0Mz9Nr9-1_dBPoIHU35q1LgEBOhC3b5w",{"id":395,"title":396,"body":397,"date":507,"description":508,"draft":67,"extension":68,"meta":509,"navigation":70,"path":510,"seo":511,"stem":512,"tags":513,"__hash__":514},"blog\u002Fblog\u002Fhello-world.md","Hello World",{"type":7,"value":398,"toc":503},[399,402,413,416,419,432,435,497,500],[10,400,396],{"id":401},"hello-world",[14,403,404,405,408,409,412],{},"欢迎来到我的个人博客！这是使用 ",[40,406,407],{},"Nuxt 4"," 和 ",[40,410,411],{},"Nuxt Content"," 搭建的静态博客站点。",[18,414,415],{"id":415},"为什么写博客",[14,417,418],{},"记录是最好的思考方式。在这里，我会分享：",[420,421,422,426,429],"ul",{},[423,424,425],"li",{},"前端开发经验与技巧",[423,427,428],{},"项目实践中的思考",[423,430,431],{},"偶尔的生活片段",[18,433,434],{"id":434},"技术栈",[172,436,438],{"className":174,"code":437,"language":176,"meta":59,"style":59},"const stack = {\n  framework: 'Nuxt 4',\n  ui: 'Vue 3',\n  content: '@nuxt\u002Fcontent',\n  styling: 'UnoCSS',\n}\n",[54,439,440,452,462,472,482,492],{"__ignoreMap":59},[180,441,442,444,447,449],{"class":182,"line":183},[180,443,304],{"class":303},[180,445,446],{"class":307}," stack",[180,448,311],{"class":303},[180,450,451],{"class":190}," {\n",[180,453,454,457,460],{"class":182,"line":60},[180,455,456],{"class":190},"  framework: ",[180,458,459],{"class":199},"'Nuxt 4'",[180,461,203],{"class":190},[180,463,464,467,470],{"class":182,"line":206},[180,465,466],{"class":190},"  ui: ",[180,468,469],{"class":199},"'Vue 3'",[180,471,203],{"class":190},[180,473,474,477,480],{"class":182,"line":217},[180,475,476],{"class":190},"  content: ",[180,478,479],{"class":199},"'@nuxt\u002Fcontent'",[180,481,203],{"class":190},[180,483,484,487,490],{"class":182,"line":228},[180,485,486],{"class":190},"  styling: ",[180,488,489],{"class":199},"'UnoCSS'",[180,491,203],{"class":190},[180,493,494],{"class":182,"line":240},[180,495,496],{"class":190},"}\n",[14,498,499],{},"感谢来访，期待与你交流！",[376,501,502],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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);}",{"title":59,"searchDepth":60,"depth":60,"links":504},[505,506],{"id":415,"depth":60,"text":415},{"id":434,"depth":60,"text":434},"2026-05-20","欢迎来到 Ethan Wang 的个人博客，这是第一篇文章。",{},"\u002Fblog\u002Fhello-world",{"title":396,"description":508},"blog\u002Fhello-world",[76,391],"vBCV7VuAIY8PqROTfMXdRT75-6ZmQo5lConjPB-3Exk",1779933176498]