[{"data":1,"prerenderedAt":1295},["ShallowReactive",2],{"article-css-grid-guide":3,"surround-css-grid-guide":254},{"id":4,"title":5,"author":6,"body":7,"category":240,"cover":31,"date":241,"description":242,"extension":243,"meta":244,"navigation":245,"path":246,"published":245,"seo":247,"stem":248,"tags":249,"updated":252,"__hash__":253},"blog\u002Fblog\u002Fcss-grid-guide.md","CSS Grid 布局完全指南","yunhai",{"type":8,"value":9,"toc":231},"minimark",[10,14,18,22,25,116,119,124,127,149,152,155,197,200,203,221,224,227],[11,12,5],"h1",{"id":13},"css-grid-布局完全指南",[15,16,17],"p",{},"CSS Grid 是现代 CSS 中最强大的布局系统之一。本文将带你从零掌握它。",[19,20,21],"h2",{"id":21},"基础概念",[15,23,24],{},"创建一个 Grid 容器非常简单：",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n","css","",[33,34,35,48,64,94,110],"code",{"__ignoreMap":31},[36,37,40,44],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sScJk",".container",[36,45,47],{"class":46},"sVt8B"," {\n",[36,49,51,55,58,61],{"class":38,"line":50},2,[36,52,54],{"class":53},"sj4cs","  display",[36,56,57],{"class":46},": ",[36,59,60],{"class":53},"grid",[36,62,63],{"class":46},";\n",[36,65,67,70,72,75,78,81,84,87,91],{"class":38,"line":66},3,[36,68,69],{"class":53},"  grid-template-columns",[36,71,57],{"class":46},[36,73,74],{"class":53},"repeat",[36,76,77],{"class":46},"(",[36,79,80],{"class":53},"3",[36,82,83],{"class":46},", ",[36,85,86],{"class":53},"1",[36,88,90],{"class":89},"szBVR","fr",[36,92,93],{"class":46},");\n",[36,95,97,100,102,105,108],{"class":38,"line":96},4,[36,98,99],{"class":53},"  gap",[36,101,57],{"class":46},[36,103,104],{"class":53},"20",[36,106,107],{"class":89},"px",[36,109,63],{"class":46},[36,111,113],{"class":38,"line":112},5,[36,114,115],{"class":46},"}\n",[19,117,118],{"id":118},"常用属性",[120,121,123],"h3",{"id":122},"grid-template-columns-rows","grid-template-columns \u002F rows",[15,125,126],{},"定义网格的列和行：",[26,128,130],{"className":28,"code":129,"language":30,"meta":31,"style":31},"grid-template-columns: 200px 1fr 1fr;\ngrid-template-rows: auto 1fr auto;\n",[33,131,132,141],{"__ignoreMap":31},[36,133,134,138],{"class":38,"line":39},[36,135,137],{"class":136},"s9eBZ","grid-template-columns",[36,139,140],{"class":46},": 200px 1fr 1fr;\n",[36,142,143,146],{"class":38,"line":50},[36,144,145],{"class":136},"grid-template-rows",[36,147,148],{"class":46},": auto 1fr auto;\n",[120,150,151],{"id":151},"grid-area",[15,153,154],{},"命名网格区域：",[26,156,158],{"className":28,"code":157,"language":30,"meta":31,"style":31},".container {\n  grid-template-areas:\n    \"header header header\"\n    \"sidebar main main\"\n    \"footer footer footer\";\n}\n",[33,159,160,166,174,180,185,192],{"__ignoreMap":31},[36,161,162,164],{"class":38,"line":39},[36,163,43],{"class":42},[36,165,47],{"class":46},[36,167,168,171],{"class":38,"line":50},[36,169,170],{"class":53},"  grid-template-areas",[36,172,173],{"class":46},":\n",[36,175,176],{"class":38,"line":66},[36,177,179],{"class":178},"sZZnC","    \"header header header\"\n",[36,181,182],{"class":38,"line":96},[36,183,184],{"class":178},"    \"sidebar main main\"\n",[36,186,187,190],{"class":38,"line":112},[36,188,189],{"class":178},"    \"footer footer footer\"",[36,191,63],{"class":46},[36,193,195],{"class":38,"line":194},6,[36,196,115],{"class":46},[19,198,199],{"id":199},"响应式布局",[15,201,202],{},"Grid 天然支持响应式设计：",[26,204,206],{"className":28,"code":205,"language":30,"meta":31,"style":31},"grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n",[33,207,208],{"__ignoreMap":31},[36,209,210,212,215,218],{"class":38,"line":39},[36,211,137],{"class":136},[36,213,214],{"class":46},": repeat(",[36,216,217],{"class":136},"auto-fit",[36,219,220],{"class":46},", minmax(300px, 1fr));\n",[19,222,223],{"id":223},"总结",[15,225,226],{},"CSS Grid 让复杂布局变得简单，是现代前端开发不可或缺的技能。",[228,229,230],"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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":31,"searchDepth":50,"depth":50,"links":232},[233,234,238,239],{"id":21,"depth":50,"text":21},{"id":118,"depth":50,"text":118,"children":235},[236,237],{"id":122,"depth":66,"text":123},{"id":151,"depth":66,"text":151},{"id":199,"depth":50,"text":199},{"id":223,"depth":50,"text":223},"教程","2025-03-28","从基础到进阶，全面掌握 CSS Grid 布局系统","md",{},true,"\u002Fblog\u002Fcss-grid-guide",{"title":5,"description":242},"blog\u002Fcss-grid-guide",[250,251,240],"CSS","前端",null,"hA_2DGp2lshG-F4DcjeYmjdJ6Z-aq7xe6tISrsrswjQ",[255,313,353,516,584,886,973],{"id":256,"title":257,"author":258,"body":259,"category":303,"cover":31,"date":304,"description":305,"extension":243,"meta":306,"navigation":245,"path":307,"published":245,"seo":308,"stem":309,"tags":310,"updated":252,"__hash__":312},"blog\u002Fblog\u002F2025.4.23.md","放弃幻想，继续斗争","mulin",{"type":8,"value":260,"toc":301},[261,265,271,274,277,280,283,286,289,292,295,298],[11,262,264],{"id":263},"放弃幻想继续斗争关于山海经新时代奋斗征程的论述","放弃幻想，继续斗争（关于山海经新时代奋斗征程的论述）",[15,266,267],{},[268,269,270],"strong",{},"作者：沐霖",[15,272,273],{},"今年的5月1日，是个值得庆祝的日子，它将向后人昭示一个新时代的开始。什么新时代？是党正式走向新的振兴的伟大新时代",[15,275,276],{},"首先指出，党与云海中央接轨后是党的新时代奋斗征程的先决条件，在中央的领导下，我们有能力，有条件实现党的伟大复兴。推动党的伟大复兴，第一个要求就是跟随中央的领导。其次，回顾党的奋斗征程，无非是在历史中选择总结经验，得到实事求是的经验，推进党的伟大复兴，就是在历史当中总结经验并加以创新，这是党的伟大复兴的第二先决条件",[15,278,279],{},"在明确先决条件后，便是党为什么振兴，怎么去振兴？",[15,281,282],{},"党的伟大复兴是党的历史必然趋势。发展至50人不是繁荣顶峰，它是党的新时代奋斗的起点，它证明了党的人数短期快速增长是存在的，它是一片实验田，有了经验，有了基础。党是持久发展的，拥抱活力的法宝，而低迷不去自求突破的，这是片面的，短期的，这是把短期的低迷当做长期看待，这是应当严厉批判的右倾机会主义，固步自封，不求突破，这就是我们党的某些干部的工作态度，第一，他们没有以身作则，第二他们的失败主义会对党的基层成员，干部产生及其不良的影响，是必须严肃处理的",[15,284,285],{},"那末，在新时代的发展下，党又如何去振兴又是我们的问题",[15,287,288],{},"实现党的伟大复兴，无非三个阶段：第一阶段,即从第二届一中全会开始,全面铺开开拓工作,基本完成工业化,以平衡合作为方针构建政治同盟为外交方针,达到掌握左右政治局的目的,完成招收6名骨干,14名普通成员为的开拓指标,直至三届一中全会召开。第二阶段,即从三届一中全会开始,全面军政体系改革,将目前(行政架构划分第4版)的的政治架构全面落实,推动文娱活动的积极开展。至多招收20人,直至我党的第二届中央政治协商会议的召开。第三阶段,即从二次政协会议开始,全面发展开拓工作,直到与中央达到同一发展水平。目前,党处于第一阶段的起步阶段,既然已走向复兴,那么何必畏首畏尾?故而,第一阶段是需要创新与实干的,我们党将要长期处在这个阶段,学习这个阶段,这是党发展的必要时期,也是我们获取经验,补充干部的黄金时期。那末,这是不是代表后两个阶段是没用的呢?不是的。实现振兴,在除了人员的要求之外,还需要健全的政治体制。一个工人,你让他一天造一根针,那是低效的,但你让一群工人,分好职责,分工协作,那可以造出成百上千根针。实现政体改革,本质上是实现解放党的工作效率的解放。还有一些同志便不理解,利用架构这不是限制娱活动吗?不是的,在本质上,两者同样是不冲突的,两者都是使工会具有活力的手段。在这一方面,支部中央认为,积极开展活动,促进体制化的改革。故而,在党的二届一中全会后,党允许各干员,干部可以在不严重违反纪律的情况下组织团建活动,中央予以支持和鼓励,必要时提供物质的帮助。综上所述,党在二阶段的三切改革的是常发展的重要时期，这不仅是党完善行政制度的时期，同时也起到同化一阶段成，的作用。第三阶段,是党实现振兴的收官时期,它将进一步宣告,党的发展两年奋斗已取得巨大成果,党已然进入新的发展时期。",[15,290,291],{},"那末,明确了党的奋斗方向,如何去实现呢?来来去去,无外乎这几个字:创新、务实,勤奋,理想。创新是党进程的根本动力,务实,勤奋,是党进程的前进方式,理想,是党进程的支撑。在组织上，干部，干员要融成一体，要形成干部学干部，干员学干部，干员学干员，干部学干员的大学",[15,293,294],{},"工会是我们的,但也是你们的,并且归根结底是属于你们年轻一代的,希望与未来寄托在你们身上,工会的伟大振兴并非一朝一夕便可以完成的,这就需要你们这一代担起责任,同时也需要我们的开拓。故而,工会的伟大振兴需要全党同志团结奋进,力争上游。",[15,296,297],{},"所有奋战在一线的干员,干部,支部中央号召你们:团结一致,继续前进,放弃幻想,继续斗争。理敢于开拓,敢于创新,切记空谈误事,切记莫要固步自封,实干兴邦,创新前进,为全面推进山海经社会主义联盟新时代复兴征程而努力奋斗!",[15,299,300],{},"2025.4.23",{"title":31,"searchDepth":50,"depth":50,"links":302},[],"生活","2025-04-23","关于山海经新时代奋斗征程的论述",{},"\u002Fblog\u002F2025.4.23",{"title":257,"description":305},"blog\u002F2025.4.23",[311,303],"随笔","G9ZCsLecoUuhAIySidp9AI47wM1Q5PYg7jAs1yPp9iE",{"id":314,"title":315,"author":258,"body":316,"category":311,"cover":31,"date":346,"description":252,"extension":243,"meta":347,"navigation":245,"path":348,"published":245,"seo":349,"stem":350,"tags":351,"updated":252,"__hash__":352},"blog\u002Fblog\u002F2026-4-25.md","怎么说，怎么做",{"type":8,"value":317,"toc":344},[318,322,325,328,331,335,338,341],[11,319,321],{"id":320},"怎么说怎么做山海经人民公社外交理论的阐述","怎么说，怎么做（山海经人民公社外交理论的阐述）",[15,323,324],{},"随着党的开拓工作的进行,我们就必须不可避免的面对一系列外交问题,就此,为了解答我们一些同志的疑惑,也是为了日后能系统性的开展官方外交工作,有必要就我们的外交理论进行阐述了。",[15,326,327],{},"党的新时代奋斗征程的开始,同时代表党必须结合实事对现有外理论进行整合。那么,在党开展外交工作前,党需要什么样的条件呢?",[15,329,330],{},"党的外交前提只有两个;这里先说其一,便是党需要强大的综合实力。国防是级的强硬后盾,如果我们没有强大的综合实力下开展外交,那么我们必然丧失主权,失去公开的发言权,这是失败的外交。举一个自身的例子,党在2024年815事变以前对待外交的态度是一在忍让,失去了前期优势,使党的基本形象大为下降,究其原因,便是党在发展层面上的不重视或发展缓慢进而只可退而求其次。同时,无数的历史已然证明,国防才是对外发言的有效论据，“笔杆子外交,”讨嫌,终其是不久远的,唯有抓起枪杆子说话,才是外交的正确说话方式。那末,再说其二,便是党的外交必须以促进自身发展为前提,任何形式的外交,在它的开展目的就是要促进自身发展,以外交手段保障工会正常发展,这是我们开展外交工作的第二个前提。",[11,332,334],{"id":333},"那么我们在当前的开拓工作中又应当如何展开外交工作呢","那么,我们在当前的开拓工作中,又应当如何展开外交工作呢?",[15,336,337],{},"目前阶段,尤其是党的基础工业还没正式开始的情况下,党的外交方向应当以和平手段为主,尽量以和平手段解决外交冲突。故而我们提出对外交往的四项基本原则:坚持长期共存,坚持不涉内政,坚持平等互利,坚持积极对话。长期共存,是指党在对外交往中应始终明白,服务器的建设从不只是一个工会努力的结果,它是全服玩家,政治社团共同努力的结果,坚持长期共存,就是要让服务器的建设者们相互合作建设,促进服务器和平发展。不涉内政,是和平外交下的必然产物,党无意干涉他国方面内政,不颠覆政权,不支持内战的任何一方势力,不激化他国工会内部矛盾,党不干涉他国内政,同时也坚决不允许他国工会干涉内政,内政问题,是党的外交中的绝对红线,关乎我党最根本,最生死攸关的利益问题,故而,任何外交工作者应当树立保守党的内政秘密的意识。平等互利,是党的外交合作的基本目的,互利互惠,相互平等,对我党的推对多边关系交往有重要意义。积极对话,是党一切外交工作的基本手段,通过喊话,对话解决部分事件,积极活跃于政治舞台,这些都是险非武为手段下解决外交争端的方式,对提升我党的政治地位,具有极大的作用。",[15,339,340],{},"周总理在我国的外交部成立大会上说到：“旧中国的外交史，是屈辱的外交史，我们不学他们，我们另起炉灶。”同样的，我们党的外交也必须实事求是，独立自主，敢爱敢恨，这便是我们党的外交工作人员必须学会的东西",[15,342,343],{},"2025.4.25",{"title":31,"searchDepth":50,"depth":50,"links":345},[],"2026-04-25",{},"\u002Fblog\u002F2026-4-25",{"title":315,"description":252},"blog\u002F2026-4-25",[311],"RlBs6IT1xe5fLamjlEZ2RdQ0kGdSHJsaF_p__p8B_6M",{"id":4,"title":5,"author":6,"body":354,"category":240,"cover":31,"date":241,"description":242,"extension":243,"meta":513,"navigation":245,"path":246,"published":245,"seo":514,"stem":248,"tags":515,"updated":252,"__hash__":253},{"type":8,"value":355,"toc":504},[356,358,360,362,364,420,422,424,426,442,444,446,480,482,484,498,500,502],[11,357,5],{"id":13},[15,359,17],{},[19,361,21],{"id":21},[15,363,24],{},[26,365,366],{"className":28,"code":29,"language":30,"meta":31,"style":31},[33,367,368,374,384,404,416],{"__ignoreMap":31},[36,369,370,372],{"class":38,"line":39},[36,371,43],{"class":42},[36,373,47],{"class":46},[36,375,376,378,380,382],{"class":38,"line":50},[36,377,54],{"class":53},[36,379,57],{"class":46},[36,381,60],{"class":53},[36,383,63],{"class":46},[36,385,386,388,390,392,394,396,398,400,402],{"class":38,"line":66},[36,387,69],{"class":53},[36,389,57],{"class":46},[36,391,74],{"class":53},[36,393,77],{"class":46},[36,395,80],{"class":53},[36,397,83],{"class":46},[36,399,86],{"class":53},[36,401,90],{"class":89},[36,403,93],{"class":46},[36,405,406,408,410,412,414],{"class":38,"line":96},[36,407,99],{"class":53},[36,409,57],{"class":46},[36,411,104],{"class":53},[36,413,107],{"class":89},[36,415,63],{"class":46},[36,417,418],{"class":38,"line":112},[36,419,115],{"class":46},[19,421,118],{"id":118},[120,423,123],{"id":122},[15,425,126],{},[26,427,428],{"className":28,"code":129,"language":30,"meta":31,"style":31},[33,429,430,436],{"__ignoreMap":31},[36,431,432,434],{"class":38,"line":39},[36,433,137],{"class":136},[36,435,140],{"class":46},[36,437,438,440],{"class":38,"line":50},[36,439,145],{"class":136},[36,441,148],{"class":46},[120,443,151],{"id":151},[15,445,154],{},[26,447,448],{"className":28,"code":157,"language":30,"meta":31,"style":31},[33,449,450,456,462,466,470,476],{"__ignoreMap":31},[36,451,452,454],{"class":38,"line":39},[36,453,43],{"class":42},[36,455,47],{"class":46},[36,457,458,460],{"class":38,"line":50},[36,459,170],{"class":53},[36,461,173],{"class":46},[36,463,464],{"class":38,"line":66},[36,465,179],{"class":178},[36,467,468],{"class":38,"line":96},[36,469,184],{"class":178},[36,471,472,474],{"class":38,"line":112},[36,473,189],{"class":178},[36,475,63],{"class":46},[36,477,478],{"class":38,"line":194},[36,479,115],{"class":46},[19,481,199],{"id":199},[15,483,202],{},[26,485,486],{"className":28,"code":205,"language":30,"meta":31,"style":31},[33,487,488],{"__ignoreMap":31},[36,489,490,492,494,496],{"class":38,"line":39},[36,491,137],{"class":136},[36,493,214],{"class":46},[36,495,217],{"class":136},[36,497,220],{"class":46},[19,499,223],{"id":223},[15,501,226],{},[228,503,230],{},{"title":31,"searchDepth":50,"depth":50,"links":505},[506,507,511,512],{"id":21,"depth":50,"text":21},{"id":118,"depth":50,"text":118,"children":508},[509,510],{"id":122,"depth":66,"text":123},{"id":151,"depth":66,"text":151},{"id":199,"depth":50,"text":199},{"id":223,"depth":50,"text":223},{},{"title":5,"description":242},[250,251,240],{"id":517,"title":518,"author":6,"body":519,"category":303,"cover":31,"date":576,"description":577,"extension":243,"meta":578,"navigation":245,"path":579,"published":245,"seo":580,"stem":581,"tags":582,"updated":252,"__hash__":583},"blog\u002Fblog\u002Fdaily-thoughts.md","程序员的日常思考",{"type":8,"value":520,"toc":571},[521,523,526,529,532,538,541,544,557,560,563,568],[11,522,518],{"id":518},[15,524,525],{},"写代码久了，总会有一些关于生活的思考。",[19,527,528],{"id":528},"关于专注",[15,530,531],{},"在这个信息爆炸的时代，保持专注变得越来越困难。但恰恰是深度工作的能力，让我们能够创造出真正有价值的东西。",[533,534,535],"blockquote",{},[15,536,537],{},"并非所有的忙碌都是生产力。",[19,539,540],{"id":540},"关于学习",[15,542,543],{},"技术的更新速度越来越快，但核心的思维方式是不变的。学会学习，比学会某个具体技术更重要。",[545,546,547,551,554],"ul",{},[548,549,550],"li",{},"理解原理而非记忆 API",[548,552,553],{},"动手实践而非只看教程",[548,555,556],{},"教会他人来验证自己的理解",[19,558,559],{"id":559},"关于平衡",[15,561,562],{},"生活不仅仅是代码。阅读、运动、社交，这些看似与技术无关的事情，反而能让我们成为更好的程序员。",[533,564,565],{},[15,566,567],{},"代码之外的世界，同样精彩。",[15,569,570],{},"愿每一位技术人都能找到属于自己的节奏。",{"title":31,"searchDepth":50,"depth":50,"links":572},[573,574,575],{"id":528,"depth":50,"text":528},{"id":540,"depth":50,"text":540},{"id":559,"depth":50,"text":559},"2025-04-12","关于技术、生活与平衡的一些随笔",{},"\u002Fblog\u002Fdaily-thoughts",{"title":518,"description":577},"blog\u002Fdaily-thoughts",[311,303],"NI_LqxObDgGj2ltzPGEhOyylhJtTRBeR3vvRXFZFvfY",{"id":585,"title":586,"author":587,"body":588,"category":874,"cover":31,"date":875,"description":876,"extension":243,"meta":877,"navigation":245,"path":878,"published":245,"seo":879,"stem":880,"tags":881,"updated":252,"__hash__":885},"blog\u002Fblog\u002Fgetting-started-with-nuxt4.md","使用 Nuxt 4 构建现代博客","xingchen",{"type":8,"value":589,"toc":865},[590,593,596,600,603,629,632,636,643,720,724,727,799,803,810,857,859,862],[11,591,586],{"id":592},"使用-nuxt-4-构建现代博客",[15,594,595],{},"在这篇文章中，我们将探索如何使用 Nuxt 4 构建一个功能完整的现代博客系统。",[19,597,599],{"id":598},"为什么选择-nuxt-4","为什么选择 Nuxt 4？",[15,601,602],{},"Nuxt 4 带来了许多令人兴奋的新特性：",[545,604,605,611,617,623],{},[548,606,607,610],{},[268,608,609],{},"更好的性能"," - 更快的冷启动和热重载",[548,612,613,616],{},[268,614,615],{},"改进的 DX"," - 更直观的配置和 API",[548,618,619,622],{},[268,620,621],{},"原生 TypeScript"," - 完整的类型支持",[548,624,625,628],{},[268,626,627],{},"SSR\u002FSSG 灵活切换"," - 根据需求选择渲染模式",[19,630,631],{"id":631},"核心功能",[120,633,635],{"id":634},"_1-markdown-内容管理","1. Markdown 内容管理",[15,637,638,639,642],{},"使用 ",[33,640,641],{},"@nuxt\u002Fcontent"," 模块，我们可以轻松地管理 Markdown 格式的文章：",[26,644,648],{"className":645,"code":646,"language":647,"meta":31,"style":31},"language-typescript shiki shiki-themes github-light github-dark","const articles = await queryContent('\u002Fblog')\n  .where({ published: { $eq: true } })\n  .sort({ date: -1 })\n  .find()\n","typescript",[33,649,650,675,692,710],{"__ignoreMap":31},[36,651,652,655,658,661,664,667,669,672],{"class":38,"line":39},[36,653,654],{"class":89},"const",[36,656,657],{"class":53}," articles",[36,659,660],{"class":89}," =",[36,662,663],{"class":89}," await",[36,665,666],{"class":42}," queryContent",[36,668,77],{"class":46},[36,670,671],{"class":178},"'\u002Fblog'",[36,673,674],{"class":46},")\n",[36,676,677,680,683,686,689],{"class":38,"line":50},[36,678,679],{"class":46},"  .",[36,681,682],{"class":42},"where",[36,684,685],{"class":46},"({ published: { $eq: ",[36,687,688],{"class":53},"true",[36,690,691],{"class":46}," } })\n",[36,693,694,696,699,702,705,707],{"class":38,"line":66},[36,695,679],{"class":46},[36,697,698],{"class":42},"sort",[36,700,701],{"class":46},"({ date: ",[36,703,704],{"class":89},"-",[36,706,86],{"class":53},[36,708,709],{"class":46}," })\n",[36,711,712,714,717],{"class":38,"line":96},[36,713,679],{"class":46},[36,715,716],{"class":42},"find",[36,718,719],{"class":46},"()\n",[120,721,723],{"id":722},"_2-响应式设计","2. 响应式设计",[15,725,726],{},"结合 TailwindCSS，我们可以快速构建响应式布局：",[26,728,732],{"className":729,"code":730,"language":731,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  \u003CArticleCard v-for=\"article in articles\" :key=\"article._id\" :article=\"article\" \u002F>\n\u003C\u002Fdiv>\n","html",[33,733,734,754,790],{"__ignoreMap":31},[36,735,736,739,742,745,748,751],{"class":38,"line":39},[36,737,738],{"class":46},"\u003C",[36,740,741],{"class":136},"div",[36,743,744],{"class":42}," class",[36,746,747],{"class":46},"=",[36,749,750],{"class":178},"\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\"",[36,752,753],{"class":46},">\n",[36,755,756,759,763,766,768,771,774,776,779,782,784,787],{"class":38,"line":50},[36,757,758],{"class":46},"  \u003C",[36,760,762],{"class":761},"s7hpK","ArticleCard",[36,764,765],{"class":42}," v-for",[36,767,747],{"class":46},[36,769,770],{"class":178},"\"article in articles\"",[36,772,773],{"class":42}," :key",[36,775,747],{"class":46},[36,777,778],{"class":178},"\"article._id\"",[36,780,781],{"class":42}," :article",[36,783,747],{"class":46},[36,785,786],{"class":178},"\"article\"",[36,788,789],{"class":46}," \u002F>\n",[36,791,792,795,797],{"class":38,"line":66},[36,793,794],{"class":46},"\u003C\u002F",[36,796,741],{"class":136},[36,798,753],{"class":46},[120,800,802],{"id":801},"_3-暗色模式","3. 暗色模式",[15,804,805,806,809],{},"通过 ",[33,807,808],{},"@nuxtjs\u002Fcolor-mode"," 模块实现暗色模式切换：",[26,811,813],{"className":645,"code":812,"language":647,"meta":31,"style":31},"const colorMode = useColorMode()\ncolorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'\n",[33,814,815,829],{"__ignoreMap":31},[36,816,817,819,822,824,827],{"class":38,"line":39},[36,818,654],{"class":89},[36,820,821],{"class":53}," colorMode",[36,823,660],{"class":89},[36,825,826],{"class":42}," useColorMode",[36,828,719],{"class":46},[36,830,831,834,836,839,842,845,848,851,854],{"class":38,"line":50},[36,832,833],{"class":46},"colorMode.preference ",[36,835,747],{"class":89},[36,837,838],{"class":46}," colorMode.value ",[36,840,841],{"class":89},"===",[36,843,844],{"class":178}," 'dark'",[36,846,847],{"class":89}," ?",[36,849,850],{"class":178}," 'light'",[36,852,853],{"class":89}," :",[36,855,856],{"class":178}," 'dark'\n",[19,858,223],{"id":223},[15,860,861],{},"Nuxt 4 为现代博客开发提供了强大的基础设施，让我们可以专注于内容创作本身。",[228,863,864],{},"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 .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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":31,"searchDepth":50,"depth":50,"links":866},[867,868,873],{"id":598,"depth":50,"text":599},{"id":631,"depth":50,"text":631,"children":869},[870,871,872],{"id":634,"depth":66,"text":635},{"id":722,"depth":66,"text":723},{"id":801,"depth":66,"text":802},{"id":223,"depth":50,"text":223},"技术","2025-04-10","从零开始使用 Nuxt 4、Vue 3 和 TailwindCSS 构建一个现代化的博客系统",{},"\u002Fblog\u002Fgetting-started-with-nuxt4",{"title":586,"description":876},"blog\u002Fgetting-started-with-nuxt4",[882,883,884],"Nuxt","Vue3","TypeScript","8VJSHFDxti_0ZtB3iqW5xqnFj30ZIGVhnmj7T9-9k4U",{"id":887,"title":888,"author":6,"body":889,"category":962,"cover":31,"date":963,"description":964,"extension":243,"meta":965,"navigation":245,"path":966,"published":245,"seo":967,"stem":968,"tags":969,"updated":252,"__hash__":972},"blog\u002Fblog\u002Fhello-world.md","欢迎来到云海-NWUA联合报",{"type":8,"value":890,"toc":958},[891,894,897,900,903,906,917,920,923,950,955],[11,892,888],{"id":893},"欢迎来到云海-nwua联合报",[15,895,896],{},"亲爱的读者们，大家好！",[15,898,899],{},"云海-NWUA联合报正式成立了！这是一个关于技术与创作的博客平台，我们将在这里分享技术文章、生活感悟、教程指南等内容。",[19,901,902],{"id":902},"我们的愿景",[15,904,905],{},"我们希望通过这个平台：",[545,907,908,911,914],{},[548,909,910],{},"📝 分享有价值的技术知识",[548,912,913],{},"🎨 记录创作的灵感与过程",[548,915,916],{},"🌊 与读者一起在知识的云海中探索",[19,918,919],{"id":919},"接下来的计划",[15,921,922],{},"在未来的日子里，我们将持续发布以下类型的内容：",[924,925,926,932,938,944],"ol",{},[548,927,928,931],{},[268,929,930],{},"技术文章"," - 前端、后端、DevOps 等技术领域的深度文章",[548,933,934,937],{},[268,935,936],{},"教程指南"," - 从零开始的手把手教程",[548,939,940,943],{},[268,941,942],{},"生活随笔"," - 技术人的日常与思考",[548,945,946,949],{},[268,947,948],{},"行业资讯"," - 值得关注的技术动态",[533,951,952],{},[15,953,954],{},"\"在云海之上，我们看见更广阔的世界。\"",[15,956,957],{},"感谢你的关注，让我们一起扬帆起航！🚀",{"title":31,"searchDepth":50,"depth":50,"links":959},[960,961],{"id":902,"depth":50,"text":902},{"id":919,"depth":50,"text":919},"资讯","2025-04-01","这是云海-NWUA联合报的第一篇文章，我们正式启航！",{},"\u002Fblog\u002Fhello-world",{"title":888,"description":964},"blog\u002Fhello-world",[970,971],"公告","创刊","rc5Pwhp5nwiSG8hVPJnZ6PPPCfa29UixmPT1HbAZu20",{"id":974,"title":975,"author":258,"body":976,"category":874,"cover":31,"date":1287,"description":1288,"extension":243,"meta":1289,"navigation":245,"path":1290,"published":245,"seo":1291,"stem":1292,"tags":1293,"updated":252,"__hash__":1294},"blog\u002Fblog\u002Ftypescript-advanced-types.md","TypeScript 高级类型技巧",{"type":8,"value":977,"toc":1280},[978,981,984,987,990,1080,1083,1086,1199,1202,1205,1266,1269,1272,1274,1277],[11,979,975],{"id":980},"typescript-高级类型技巧",[15,982,983],{},"TypeScript 的类型系统远比想象中强大。本文将介绍一些实用的高级类型技巧。",[19,985,986],{"id":986},"条件类型",[15,988,989],{},"条件类型让我们可以根据类型条件选择不同的类型：",[26,991,993],{"className":645,"code":992,"language":647,"meta":31,"style":31},"type IsString\u003CT> = T extends string ? true : false\n\ntype A = IsString\u003Cstring> \u002F\u002F true\ntype B = IsString\u003Cnumber> \u002F\u002F false\n",[33,994,995,1032,1037,1059],{"__ignoreMap":31},[36,996,997,1000,1003,1005,1008,1011,1013,1016,1019,1022,1024,1027,1029],{"class":38,"line":39},[36,998,999],{"class":89},"type",[36,1001,1002],{"class":42}," IsString",[36,1004,738],{"class":46},[36,1006,1007],{"class":42},"T",[36,1009,1010],{"class":46},"> ",[36,1012,747],{"class":89},[36,1014,1015],{"class":42}," T",[36,1017,1018],{"class":89}," extends",[36,1020,1021],{"class":53}," string",[36,1023,847],{"class":89},[36,1025,1026],{"class":53}," true",[36,1028,853],{"class":89},[36,1030,1031],{"class":53}," false\n",[36,1033,1034],{"class":38,"line":50},[36,1035,1036],{"emptyLinePlaceholder":245},"\n",[36,1038,1039,1041,1044,1046,1048,1050,1053,1055],{"class":38,"line":66},[36,1040,999],{"class":89},[36,1042,1043],{"class":42}," A",[36,1045,660],{"class":89},[36,1047,1002],{"class":42},[36,1049,738],{"class":46},[36,1051,1052],{"class":53},"string",[36,1054,1010],{"class":46},[36,1056,1058],{"class":1057},"sJ8bj","\u002F\u002F true\n",[36,1060,1061,1063,1066,1068,1070,1072,1075,1077],{"class":38,"line":96},[36,1062,999],{"class":89},[36,1064,1065],{"class":42}," B",[36,1067,660],{"class":89},[36,1069,1002],{"class":42},[36,1071,738],{"class":46},[36,1073,1074],{"class":53},"number",[36,1076,1010],{"class":46},[36,1078,1079],{"class":1057},"\u002F\u002F false\n",[19,1081,1082],{"id":1082},"映射类型",[15,1084,1085],{},"映射类型可以基于已有类型创建新类型：",[26,1087,1089],{"className":645,"code":1088,"language":647,"meta":31,"style":31},"type Readonly\u003CT> = {\n  readonly [P in keyof T]: T[P]\n}\n\ntype Optional\u003CT> = {\n  [P in keyof T]?: T[P]\n}\n",[33,1090,1091,1108,1143,1147,1151,1168,1194],{"__ignoreMap":31},[36,1092,1093,1095,1098,1100,1102,1104,1106],{"class":38,"line":39},[36,1094,999],{"class":89},[36,1096,1097],{"class":42}," Readonly",[36,1099,738],{"class":46},[36,1101,1007],{"class":42},[36,1103,1010],{"class":46},[36,1105,747],{"class":89},[36,1107,47],{"class":46},[36,1109,1110,1113,1116,1119,1122,1125,1127,1130,1133,1135,1138,1140],{"class":38,"line":50},[36,1111,1112],{"class":89},"  readonly",[36,1114,1115],{"class":46}," [",[36,1117,1118],{"class":42},"P",[36,1120,1121],{"class":89}," in",[36,1123,1124],{"class":89}," keyof",[36,1126,1015],{"class":42},[36,1128,1129],{"class":46},"]",[36,1131,1132],{"class":89},":",[36,1134,1015],{"class":42},[36,1136,1137],{"class":46},"[",[36,1139,1118],{"class":42},[36,1141,1142],{"class":46},"]\n",[36,1144,1145],{"class":38,"line":66},[36,1146,115],{"class":46},[36,1148,1149],{"class":38,"line":96},[36,1150,1036],{"emptyLinePlaceholder":245},[36,1152,1153,1155,1158,1160,1162,1164,1166],{"class":38,"line":112},[36,1154,999],{"class":89},[36,1156,1157],{"class":42}," Optional",[36,1159,738],{"class":46},[36,1161,1007],{"class":42},[36,1163,1010],{"class":46},[36,1165,747],{"class":89},[36,1167,47],{"class":46},[36,1169,1170,1173,1175,1177,1179,1181,1183,1186,1188,1190,1192],{"class":38,"line":194},[36,1171,1172],{"class":46},"  [",[36,1174,1118],{"class":42},[36,1176,1121],{"class":89},[36,1178,1124],{"class":89},[36,1180,1015],{"class":42},[36,1182,1129],{"class":46},[36,1184,1185],{"class":89},"?:",[36,1187,1015],{"class":42},[36,1189,1137],{"class":46},[36,1191,1118],{"class":42},[36,1193,1142],{"class":46},[36,1195,1197],{"class":38,"line":1196},7,[36,1198,115],{"class":46},[19,1200,1201],{"id":1201},"模板字面量类型",[15,1203,1204],{},"TypeScript 4.1 引入了模板字面量类型：",[26,1206,1208],{"className":645,"code":1207,"language":647,"meta":31,"style":31},"type EventName\u003CT extends string> = `on${Capitalize\u003CT>}`\ntype ClickEvent = EventName\u003C'click'> \u002F\u002F 'onClick'\n",[33,1209,1210,1245],{"__ignoreMap":31},[36,1211,1212,1214,1217,1219,1221,1223,1225,1227,1229,1232,1235,1237,1239,1242],{"class":38,"line":39},[36,1213,999],{"class":89},[36,1215,1216],{"class":42}," EventName",[36,1218,738],{"class":46},[36,1220,1007],{"class":42},[36,1222,1018],{"class":89},[36,1224,1021],{"class":53},[36,1226,1010],{"class":46},[36,1228,747],{"class":89},[36,1230,1231],{"class":178}," `on${",[36,1233,1234],{"class":42},"Capitalize",[36,1236,738],{"class":178},[36,1238,1007],{"class":42},[36,1240,1241],{"class":178},">",[36,1243,1244],{"class":178},"}`\n",[36,1246,1247,1249,1252,1254,1256,1258,1261,1263],{"class":38,"line":50},[36,1248,999],{"class":89},[36,1250,1251],{"class":42}," ClickEvent",[36,1253,660],{"class":89},[36,1255,1216],{"class":42},[36,1257,738],{"class":46},[36,1259,1260],{"class":178},"'click'",[36,1262,1010],{"class":46},[36,1264,1265],{"class":1057},"\u002F\u002F 'onClick'\n",[19,1267,1268],{"id":1268},"实战应用",[15,1270,1271],{},"这些高级类型在实际项目中非常有用，特别是在构建类型安全的 API 和工具函数时。",[19,1273,223],{"id":223},[15,1275,1276],{},"掌握 TypeScript 高级类型，可以让我们编写更安全、更具表达力的代码。",[228,1278,1279],{},"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 .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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":31,"searchDepth":50,"depth":50,"links":1281},[1282,1283,1284,1285,1286],{"id":986,"depth":50,"text":986},{"id":1082,"depth":50,"text":1082},{"id":1201,"depth":50,"text":1201},{"id":1268,"depth":50,"text":1268},{"id":223,"depth":50,"text":223},"2025-04-15","深入理解 TypeScript 的高级类型系统，掌握条件类型、映射类型等技巧",{},"\u002Fblog\u002Ftypescript-advanced-types",{"title":975,"description":1288},"blog\u002Ftypescript-advanced-types",[884,251],"k7YCJ8VaGJZPRV5Cll9TZpxl6V7XAhysbNSuK8qUw0w",1776577690466]