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