[{"data":1,"prerenderedAt":416},["ShallowReactive",2],{"\u002Ftheme":3,"surround-\u002Ftheme":415},{"id":4,"title":5,"body":6,"categories":384,"date":386,"description":150,"draft":387,"extension":388,"image":386,"meta":389,"navigation":390,"path":403,"permalink":386,"published":386,"readingTime":404,"recommend":386,"references":386,"seo":409,"sitemap":410,"stem":411,"tags":412,"type":413,"updated":386,"__hash__":414},"content\u002Ftheme.md","主题",{"type":7,"value":8,"toc":368},"minimark",[9,13,51,55,77,80,114,117,127,130,139,160,163,169,172,204,207,356],[10,11,12],"h2",{"id":12},"主题特性",[14,15,16],"card-list",{},[17,18,19,27,33,39,45],"ul",{},[20,21,22,26],"li",{},[23,24,25],"strong",{},"响应式设计和夜间模式","：支持移动端和桌面端，同时适配系统颜色偏好，确保在不同设备上都能提供良好的阅读体验。",[20,28,29,32],{},[23,30,31],{},"兼容性","：样式在多个浏览器上兼容良好（如安卓夸克 APP），在 Chrome 88（2021年1月）上显示美观，并且有适当的回退策略。",[20,34,35,38],{},[23,36,37],{},"订阅源","：支持 Atom 订阅源，能显示文章封面（由于 Nuxt Content 特性，订阅源中只有摘要）。",[20,40,41,44],{},[23,42,43],{},"SEO 优化","：使用 Nuxt SEO 插件，优化搜索引擎的收录和排名。",[20,46,47,50],{},[23,48,49],{},"评论系统","：集成 Twikoo 评论系统，方便用户留言和互动。",[52,53,54],"h3",{"id":54},"减少干扰",[14,56,57],{},[17,58,59,65,71],{},[20,60,61,64],{},[23,62,63],{},"清晰易读","：选用容易阅读的字体和合适的字号，采用不刺眼且易于辨识的颜色搭配。",[20,66,67,70],{},[23,68,69],{},"减少动画","：不使用“樱花”“雪花”“星辰”等持续变化的动画，确保用户的注意力集中在主要内容上，以提供良好的视觉体验。",[20,72,73,76],{},[23,74,75],{},"专注文章","：避免通过动画、声音等方式将注意力引向与「阅读正文」无关的内容，如“Live2D人偶”“博客版本通知”“隐私协议提醒”“热门评论轮播”等。",[52,78,79],{"id":79},"提升空间效率",[14,81,82],{},[17,83,84,90,96,102,108],{},[20,85,86,89],{},[23,87,88],{},"布局方式","：不使用顶部导航栏或主屏大图（Hero Image）。",[20,91,92,95],{},[23,93,94],{},"文章列表","：列表在宽度足够时封面居右，以提升空间利用率。",[20,97,98,101],{},[23,99,100],{},"内容宽度","：限制宽屏模式下的内容宽度，减少阅读疲劳。",[20,103,104,107],{},[23,105,106],{},"内容排版","：减小表格和代码块的字体大小，以减少横向溢出，改善阅读体验。",[20,109,110,113],{},[23,111,112],{},"友链列表","：隐藏右侧栏，在宽度足够时使用横向列表形式，确保单位屏幕内的展示数量。",[52,115,116],{"id":116},"分化文章版式",[14,118,119],{},[17,120,121,124],{},[20,122,123],{},"技术文章标题左对齐，正文无缩进。",[20,125,126],{},"故事类文章标题居中且使用衬线体，正文有缩进。",[10,128,129],{"id":129},"使用",[131,132,133,134,138],"p",{},"自用项目，目前已经开源。修改需要具备一定的前端开发知识，请阅读 ",[135,136,137],"code",{"code":137},"README","。",[140,141,147],"link-card",{"link":142,"title":143,"className":144},"\u002Fpreviews\u002Fexample","组件样式示例",[145,146],"gradient-card","active",[148,149,151],"template",{"v-slot:icon":150},"",[131,152,153,156,159],{},[23,154,155],{},"使用必读",[157,158],"br",{},"👉👉🎨",[52,161,162],{"id":162},"开发过程",[164,165],"link-banner",{"banner":166,"link":167,"title":168},"https:\u002F\u002Fassets.zhilu.cyou\u002Fcover3\u002Fblog-using-nuxt.jpg","\u002F2024\u002Fblog-using-nuxt","博客进化：从 Hexo 到 Nuxt Content",[10,170,171],{"id":171},"开源与衍生",[17,173,174,185,194],{},[20,175,176,177,184],{},"灵感源自 ",[178,179,183],"a",{"href":180,"rel":181},"https:\u002F\u002Fgithub.com\u002Fxaoxuu\u002Fhexo-theme-stellar",[182],"nofollow","xaoxuu\u002Fhexo-theme-stellar","，这是一个经过精致设计的简洁 Hexo 主题。",[20,186,187,188,193],{},"借鉴了众多优秀设计，自己的一些设计也为 ",[189,190,192],"tip",{"tip":191},"真的有不少！","许多朋友的博客项目"," 提供了灵感。",[20,195,196,197,138],{},"项目被多人用作个人博客，详见 ",[178,198,201],{"href":199,"rel":200},"https:\u002F\u002Fgithub.com\u002FL33Z22L11\u002Fblog-v3",[182],[135,202,203],{"code":203},"README.md",[52,205,206],{"id":206},"技术架构",[14,208,209],{},[17,210,211,228,262,303],{},[20,212,213,214],{},"主要框架与语言\n",[17,215,216,222],{},[20,217,218,221],{},[23,219,220],{},"前端框架","：Nuxt 4",[20,223,224,227],{},[23,225,226],{},"开发语言","：TypeScript + Vue 3 + Scss",[20,229,230,231],{},"内容与服务\n",[17,232,233,239,245,250,256],{},[20,234,235,238],{},[23,236,237],{},"内容管理","：Nuxt Content v3",[20,240,241,244],{},[23,242,243],{},"部署平台","：Vercel",[20,246,247,249],{},[23,248,49],{},"：Twikoo",[20,251,252,255],{},[23,253,254],{},"评论数据库","：MongoDB",[20,257,258,261],{},[23,259,260],{},"包管理器","：pnpm",[20,263,264,265],{},"工具库\n",[17,266,267,273,279,285,291,297],{},[20,268,269,272],{},[23,270,271],{},"轮播图","：Embla Carousel",[20,274,275,278],{},[23,276,277],{},"订阅源生成","：Fast XML Parser",[20,280,281,284],{},[23,282,283],{},"域名解析","：parse-domain",[20,286,287,290],{},[23,288,289],{},"代码高亮","：Shiki + Plain Shiki",[20,292,293,296],{},[23,294,295],{},"实用函数库","：es-toolkit",[20,298,299,302],{},[23,300,301],{},"悬浮组件库","：Vue Tippy",[20,304,305,306],{},"依赖模块\n",[17,307,308,314,320,326,332,338,344,350],{},[20,309,310,313],{},[23,311,312],{},"图标管理","：Nuxt Icon（Iconify）",[20,315,316,319],{},[23,317,318],{},"颜色模式","：Nuxt Color Mode",[20,321,322,325],{},[23,323,324],{},"SEO优化","：Nuxt SEO",[20,327,328,331],{},[23,329,330],{},"状态管理","：Pinia",[20,333,334,337],{},[23,335,336],{},"Vue 实用功能库","：VueUse",[20,339,340,343],{},[23,341,342],{},"Nuxt 实用模块","：Bikariya",[20,345,346,349],{},[23,347,348],{},"代码质量","：ESLint + Stylelint",[20,351,352,355],{},[23,353,354],{},"代码压缩","：Oxc Minify",[17,357,358],{},[20,359,360,361,138],{},"更多技术依赖可参考 ",[178,362,365],{"href":363,"rel":364},"https:\u002F\u002Fgithub.com\u002FL33Z22L11\u002Fblog-v3\u002Fblob\u002Fmain\u002Fpnpm-workspace.yaml",[182],[135,366,367],{"code":367},"pnpm-workspace.yaml",{"title":150,"searchDepth":369,"depth":369,"links":370},4,[371,378,381],{"id":12,"depth":372,"text":12,"children":373},2,[374,376,377],{"id":54,"depth":375,"text":54},3,{"id":79,"depth":375,"text":79},{"id":116,"depth":375,"text":116},{"id":129,"depth":372,"text":129,"children":379},[380],{"id":162,"depth":375,"text":162},{"id":171,"depth":372,"text":171,"children":382},[383],{"id":206,"depth":375,"text":206},[385],"未分类",null,false,"md",{"hideInfo":390,"aside":391,"slots":394},true,[392,393],"toc","meta-aside-github",{"aside-github":395},{"props":396,"type":7,"value":398},{"title":397},"项目仓库",[399],[140,400],{"link":199,"title":401,"description":402},"L33Z22L11\u002Fblog-v3","My blog, powered by Nuxt 4 & Nuxt Content v3. 纸鹿摸鱼处，分享技术与生活。","\u002Ftheme",{"text":405,"minutes":406,"time":407,"words":408},"4 min read",3.8,228000,760,{"title":5,"description":150},{"loc":403},"theme",[],"tech","JDxh2lQqBJK5c6v3rzSe5HXX3vWPWssTGylj9cyoKHA",[386,386],1775661933905]