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