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