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