[{"data":1,"prerenderedAt":690},["ShallowReactive",2],{"content:\u002F2024\u002Fvitepress-enhancement":3,"surround:\u002F2024\u002Fvitepress-enhancement":678},{"id":4,"title":5,"body":6,"categories":651,"date":653,"description":654,"draft":655,"extension":656,"image":657,"meta":658,"navigation":660,"path":661,"permalink":662,"published":662,"readingTime":663,"recommend":662,"references":662,"seo":668,"sitemap":669,"stem":670,"tags":671,"type":675,"updated":676,"__hash__":677},"content\u002Fposts\u002F2024\u002Fvitepress-enhancement.md","VitePress 不完全优化指南",{"type":7,"value":8,"toc":626},"minimark",[9,13,17,22,25,68,72,78,81,88,108,119,122,125,134,152,156,175,182,188,191,194,198,212,216,219,227,307,323,327,336,349,353,360,383,424,453,456,458,465,501,508,511,514,523,526,534,537,544,547,554,564,571,574,580,583,592,595,616],[10,11,12],"p",{},"VitePress 是一个非常优秀的静态站点生成器，它使用 Vite 作为构建工具，并内置了 Vue 的支持。它上手简单，页面美观，许多开源项目的文档都使用 VitePress 生成。官方文档非常详细，这里补充一些周边和扩充用法。",[14,15,16],"h2",{"id":16},"不负责任地初始化",[18,19,21],"h3",{"id":20},"来用-pnpm-吧","来用 pnpm 吧",[10,23,24],{},"使用 pnpm 可以提高安装速度并减少磁盘占用。按照终端提示操作即可。",[26,27,28,36,57],"ul",{},[29,30,31,32],"li",{},"通过 npm 安装 pnpm\n",[33,34],"copy",{"code":35},"npm i -g pnpm",[29,37,38,39,46,49],{},"更改 PowerShell 脚本 ",[40,41,45],"a",{"href":42,"rel":43},"https:\u002F\u002Flearn.microsoft.com\u002Fzh-cn\u002Fpowershell\u002Fmodule\u002Fmicrosoft.powershell.core\u002Fabout\u002Fabout_execution_policies",[44],"nofollow","执行策略",[33,47],{"code":48},"Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser",[26,50,51],{},[29,52,53,54],{},"也可通过管理员权限更改系统策略\n",[33,55],{"code":56},"sudo Set-ExecutionPolicy RemoteSigned",[29,58,59,60,63],{},"初始化 pnpm\n",[33,61],{"code":62},"pnpm setup",[26,64,65],{},[29,66,67],{},"初始化后，由于环境变量变化，需要启动一个新的 PowerShell 会话",[18,69,71],{"id":70},"会的话看看文档不会了就多看文档","会的话看看文档，不会了就多看文档",[73,74],"link-card",{"icon":75,"link":76,"title":77},"https:\u002F\u002Fvitepress.dev\u002Fvitepress-logo-large.webp","https:\u002F\u002Fvitepress.dev\u002Fzh\u002F","VitePress | 由 Vite 和 Vue 驱动的静态站点生成器",[10,79,80],{},"个人认为官方文档写得是自己读过的最好一梯队的，除了基本的项目的初始化和配置，还包含大量细节技巧、示例参考和主题功能扩展方法。",[18,82,84],{"id":83},"简单项目无需包锁",[85,86,87],"del",{},"简单项目，无需包锁",[10,89,90,103,104,107],{},[91,92,93,94,98,99,102],"blur",{},"在简单项目中，无需生成 ",[95,96,97],"code",{"code":97},"package-lock.json"," 或 ",[95,100,101],{"code":101},"pnpm-lock.json"," 文件。如果遇到问题，莫说是我教的。"," pnpm 会将依赖包按嵌套结构组织，使用 ",[95,105,106],{"code":106},"shamefully-hoist"," 可以使其恢复为 npm 的扁平结构，提高兼容性。",[109,110,117],"pre",{"className":111,"code":113,"filename":114,"language":115,"meta":116},[112],"language-ini","# package-lock=false\nshamefully-hoist=true\n",".npmrc","ini","",[95,118,113],{"__ignoreMap":116},[18,120,121],{"id":121},"也许需要汉化",[10,123,124],{},"在使用 VitePress 的时候，你也许会发现一些内容是英文，这时可以通过添加如下配置项来汉化（不要删除原有配置），在使用此配置时应对照文档弄清每一项作用。",[109,126,132],{"className":127,"code":129,"filename":130,"language":131,"meta":116},[128],"language-ts","import type { DefaultTheme } from 'vitepress';\nimport { defineConfig } from 'vitepress'\n\n\u002F\u002F https:\u002F\u002Fvitepress.dev\u002Fzh\u002Freference\u002Fsite-config\nexport default defineConfig({\n\tlang: 'zh-Hans',\n\tthemeConfig: {\n\t\t\u002F\u002F https:\u002F\u002Fvitepress.dev\u002Fzh\u002Freference\u002Fdefault-theme-config\n\t\tnav: nav(),\n\t\tsidebar: sidebar(),\n\t\texternalLinkIcon: true,\n\t\tlangMenuLabel: '切换语言',\n\t\tdarkModeSwitchLabel: '主题',\n\t\tlightModeSwitchTitle: '切换到浅色模式',\n\t\tdarkModeSwitchTitle: '切换到深色模式',\n\t\tsidebarMenuLabel: '菜单',\n\t\toutline: { level: [2, 3], label: '目录' },\n\t\treturnToTopLabel: '返回顶部',\n\t\t\u002F\u002F 请将此链接修改为正确的URL，或根据需求删除该配置\n\t\t\u002F\u002F editLink: { pattern: 'https:\u002F\u002Fgithub.com\u002Fusername\u002Frepository-name\u002Fblame\u002Fmain\u002Fdocs\u002F:path', text: '源代码', },\n\t\tlastUpdated: { text: '更新于' },\n\t\tdocFooter: { prev: '上一篇', next: '下一篇' },\n\t},\n\tvite: { server: { allowedHosts: true } },\n})\n\n\u002F\u002F 将导航和侧边栏逻辑提取到外部，便于根据文档结构进行维护\nfunction nav(): DefaultTheme.NavItem[] {\n\treturn []\n}\n\nfunction sidebar(): DefaultTheme.Sidebar {\n\treturn { '\u002F': [] }\n}\n","docs\u002F.vitepress\u002Fconfig.mts","ts",[95,133,129],{"__ignoreMap":116},[10,135,136,137,140,141,146,147,151],{},"特别地，404 页面也需要汉化，在主题入口处向 ",[95,138,139],{"code":139},"not-found"," 插槽中 ",[40,142,145],{"href":143,"rel":144},"https:\u002F\u002Fvitepress.dev\u002Fzh\u002Fguide\u002Fextending-default-theme#layout-slots",[44],"注入组件"," 即可，成品入口文件在 ",[40,148,150],{"href":149},"#%E6%89%A9%E5%B1%95%E4%B8%BB%E9%A2%98","扩展主题"," 一节。",[14,153,155],{"id":154},"git-统计的修正","Git 统计的修正",[10,157,158,159,164,165,168,169,174],{},"如果你的项目是使用 VitePress 构建的网站（文档即项目），GitHub 的语言统计可能不够准确。GitHub 使用 Linguist 库来统计仓库语言（",[40,160,163],{"href":161,"rel":162},"https:\u002F\u002Fdocs.github.com\u002Fzh\u002Frepositories\u002Fmanaging-your-repositorys-settings-and-features\u002Fcustomizing-your-repository\u002Fabout-repository-languages",[44],"详情","），默认情况下会忽略 Markdown 文件和常见的文档文件夹（如 ",[95,166,167],{"code":167},"\u002Fdocs","）。为了获得更准确的统计结果，可以通过覆盖 GitHub Linguist 配置（",[40,170,173],{"href":171,"rel":172},"https:\u002F\u002Fgithub.com\u002Fgithub-linguist\u002Flinguist\u002Fblob\u002Fmain\u002Fdocs\u002Foverrides.md",[44],"英文文档","）来调整统计策略。",[109,176,180],{"className":177,"code":178,"filename":179,"language":115,"meta":116},[112],"*.md linguist-detectable=true\ndocs\u002F** linguist-documentation=false\n",".gitattributes",[95,181,178],{"__ignoreMap":116},[10,183,184,185,187],{},"这样，",[95,186,167],{"code":167}," 文件夹里的 Markdown 文件和其他文件也会被统计到。",[14,189,190],{"id":190},"图标的千种引入",[10,192,193],{},"在直接调用图片或插入 SVG 代码作为图标之后，也许可以尝试多种办法为你的网站增加图标。",[18,195,197],{"id":196},"使用-emoji","使用 Emoji",[10,199,200,205,206,211],{},[201,202],"icon",{"name":203,"title":204},"twemoji:grinning-face-with-big-eyes","骗你的，其实我不是 Emoji 字符，我是 Iconify"," 谁说 Emoji 不是图标呢？🚀巧妙运用 Emoji 可以让网页增色不少。📓在社交平台和注重情绪表达的纯文本编辑场景（如微信朋友圈、小红书）中，我们经常会看到大量 Emoji 字符，用于排版和情绪表达。📖在人们获取文本信息之前，这些 Emoji 往往作为视觉的“预读取”元素，帮助传递情绪氛围或提示内容主题。🌨️例如在博客 ",[40,207,210],{"href":208,"rel":209},"https:\u002F\u002Fblog.chyk.ink\u002F",[44],"風雪城"," 中，每篇文章标题使用了一个前置 Emoji，不仅让排版更整齐，还生动概括了文章的主题。",[18,213,215],{"id":214},"通过-cdn-引入图标-css","通过 CDN 引入图标 CSS",[10,217,218],{},"通过 CDN 引入图标 CSS 是一种利用 Unicode 私有区域和自定义字体来高效管理和优化图标加载的方式。图标实际上是使用特定字体的 Unicode 私有区域字符，通过 CSS 伪类选择器替换，实现图标显示，并避免被文本选中。",[220,221,224],"alert",{"title":222,"type":223},"公共 CDN 服务的安全风险","warning",[10,225,226],{},"Staticfile CDN、BootCDN（bootcss）、51LA 统计等公共服务已被发现存在安全问题，使用这些服务可能会导致网站加载恶意内容或被用户的安全策略阻止访问，从而影响网站的正常功能。建议在引入外部脚本时启用子资源完整性（Subresource Integrity，SRI）功能，以提高安全性。",[26,228,229,269],{},[29,230,231,237,238,243],{},[232,233],"img",{"alt":116,"className":234,"src":235,"title":236},[201],"https:\u002F\u002Ffontawesome.com\u002Fimages\u002Ffavicon\u002Ficon.svg","其实我不是 CDN 引入的，我也不是 Iconify，我是图片"," Font Awesome ",[40,239,242],{"href":240,"rel":241},"https:\u002F\u002Ffontawesome.com\u002Fsearch?ic=free",[44],"图标搜索",[26,244,245,251,257,263],{},[29,246,247],{},[33,248],{"code":249,"prompt":250},"https:\u002F\u002Flib.baomitu.com\u002Ffont-awesome\u002F7.0.0\u002Fcss\u002Fall.min.css","75CDN",[29,252,253],{},[33,254],{"code":255,"prompt":256},"https:\u002F\u002Fcdnjs.snrat.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F7.0.0\u002Fcss\u002Fall.min.css","未闻花名",[29,258,259],{},[33,260],{"code":261,"prompt":262},"https:\u002F\u002Fuse.sevencdn.com\u002Fajax\u002Flibs\u002Ffont-awesome\u002F7.0.0\u002Fcss\u002Fall.min.css","7ED",[29,264,265],{},[33,266],{"code":267,"prompt":268},"https:\u002F\u002Fcdnjs.webstatic.cn\u002Fajax\u002Flibs\u002Ffont-awesome\u002F7.0.0\u002Fcss\u002Fall.min.css","WebMirror",[29,270,271,276,277,281],{},[232,272],{"alt":116,"className":273,"src":274,"title":275},[201],"https:\u002F\u002Fapi.iconify.design\u002Fdevicon:bootstrap.svg","我是通过 Iconify API 引入的，但我是图片"," Bootstrap Icons ",[40,278,242],{"href":279,"rel":280},"https:\u002F\u002Ficons.getbootstrap.com\u002F",[44],[26,282,283,289,295,301],{},[29,284,285],{},[33,286],{"code":287,"prompt":288},"https:\u002F\u002Fmirrors.sustech.edu.cn\u002Fcdnjs\u002Fajax\u002Flibs\u002Fbootstrap-icons\u002F1.13.1\u002Ffont\u002Fbootstrap-icons.min.css","南科大",[29,290,291],{},[33,292],{"code":293,"prompt":294},"https:\u002F\u002Fcdnjs.loli.net\u002Fajax\u002Flibs\u002Fbootstrap-icons\u002F1.13.1\u002Ffont\u002Fbootstrap-icons.min.css","loli.net",[29,296,297],{},[33,298],{"code":299,"prompt":300},"https:\u002F\u002Fs4.zstatic.net\u002Fajax\u002Flibs\u002Fbootstrap-icons\u002F1.13.1\u002Ffont\u002Fbootstrap-icons.min.css","ZStatic",[29,302,303],{},[33,304],{"code":305,"prompt":306},"https:\u002F\u002Fs4.zstatic.net\u002Fnpm\u002Fbootstrap-icons@1.13.1\u002Ffont\u002Fbootstrap-icons.min.css","ZStatic-unpkg",[10,308,309,310,316,317,322],{},"至于在 VitePress 站点的 ",[95,311,314],{"className":312,"code":314,"language":315},[313],"language-html","\u003Chead>","html"," 标签中引入 CSS？",[40,318,321],{"href":319,"rel":320},"https:\u002F\u002Fvitepress.dev\u002Fzh\u002Freference\u002Fsite-config#head",[44],"看文档"," 吧。当然，引入后不要忘了设置“固定宽度”和“垂直居中”样式。",[18,324,326],{"id":325},"google-fonts","Google Fonts",[10,328,329,330,335],{},"谷歌字体除了字体外还有图标，使用文档参见 ",[40,331,334],{"href":332,"rel":333},"https:\u002F\u002Fdevelopers.google.cn\u002Ffonts\u002Fdocs\u002Fmaterial_symbols",[44],"Material 符号指南","。",[26,337,338],{},[29,339,340,341,344,345],{},"为增强可访问性，可以将谷歌字体 CSS 资源替换为以 ",[95,342,343],{"code":343},".cn"," 结尾的域名。\n",[33,346],{"code":347,"prompt":348},"https:\u002F\u002Ffonts.googleapis.cn\u002Fcss2?family=Material+Symbols+Outlined","CSS",[18,350,352],{"id":351},"其实我在用-iconify","其实我在用 Iconify",[10,354,355,359],{},[201,356],{"name":357,"title":358},"line-md:iconify1","这下终于是 Iconify 了"," Iconify 是一个支持 20 多万个开源矢量图标的框架，提供跨平台的统一图标组件，兼容多种 UI 框架和图标集，让你轻松使用高质量、无供应商锁定的图标。",[26,361,362,369,376],{},[29,363,364],{},[40,365,368],{"href":366,"rel":367},"https:\u002F\u002Ficonify.design",[44],"官网（英文文档）",[29,370,371],{},[40,372,375],{"href":373,"rel":374},"https:\u002F\u002Ficon-sets.iconify.design\u002F",[44],"图标库（官方搜索）",[29,377,378],{},[40,379,382],{"href":380,"rel":381},"https:\u002F\u002Fyesicon.app\u002F",[44],"Yesicon（第三方搜索）",[10,384,385,386,389,390,389,393,396,397,389,400,389,403,406,407,389,410,413,414,389,417,389,420,423],{},"它收录了 ",[201,387],{"name":388},"ic:baseline-android"," ",[201,391],{"name":392},"ic:baseline-signal-wifi-bad",[201,394],{"name":395},"ic:baseline-battery-charging-60"," Material Design 的符号图标、 ",[201,398],{"name":399},"simple-icons:3m",[201,401],{"name":402},"simple-icons:xiaohongshu",[201,404],{"name":405},"simple-icons:xiaomi"," Simple Icons 的品牌图标、 ",[201,408],{"name":409},"vscode-icons:file-type-photoshop2",[201,411],{"name":412},"catppuccin:kotlin"," 各种文件图标、 ",[201,415],{"name":416},"line-md:coffee-twotone-loop",[201,418],{"name":419},"noto:crystal-ball",[201,421],{"name":422},"line-md:loading-alt-loop"," 双色\u002F彩色\u002F动画图标等。相比 Iconfont，这些图标的风格更容易统一，并且引入前端项目更加方便，支持 Tailwind CSS、UnoCSS、React、Vue、Svelte 等多种框架。我偶尔也会下载这些图标用于 PPT 演示。",[26,425,426,435,442,450],{},[29,427,428,429,432],{},"VitePress 适合安装 ",[95,430,431],{"code":431},"@iconify\u002Fvue",[33,433],{"code":434},"pnpm i @iconify\u002Fvue",[29,436,437,438,441],{},"在主题入口文件导入并注册 ",[95,439,440],{"code":440},"Icon"," 组件，成品入口文件在下一节",[29,443,444,445,449],{},"在 Markdown 中通过 ",[95,446,448],{"className":447,"code":448,"language":315},[313],"\u003CIcon icon=\"tabler:icons\" \u002F>"," 使用图标",[29,451,452],{},"配置项里的字符串不会经过 Vue 渲染，需要将对应位置换用 Vue 组件或是回退至 CDN 引入的图标字体",[14,454,455],{"id":455},"自定义主题",[18,457,150],{"id":150},[10,459,460,461,464],{},"这是经过修改的 VitePress 主题入口文件，它",[85,462,463],{},"保留了一部分原本的味道","基于默认主题做了一点优化：",[26,466,467,470,479,482,489,495],{},[29,468,469],{},"将原文件注释中的链接换成了对应的中文链接",[29,471,472,473,475,476,478],{},"引入了 ",[95,474,431],{"code":431}," 并注册为 ",[95,477,440],{"code":440}," 组件",[29,480,481],{},"移除了 Inter 字体打包，加载速度更快",[29,483,484,485,488],{},"注册了文章版式的页脚（需自行编写 ",[95,486,487],{"code":487},"Footer"," 组件）",[29,490,491,492,488],{},"注册了自定义 404 页面（需自行编写 ",[95,493,494],{"code":494},"NotFound",[29,496,472,497,500],{},[95,498,499],{"code":499},".\u002Ftheme-enhanced.css","（在下方提供）",[109,502,506],{"className":503,"code":504,"filename":505,"language":131,"meta":116},[128],"\u002F\u002F https:\u002F\u002Fvitepress.dev\u002Fzh\u002Fguide\u002Fcustom-theme\nimport type { Theme } from 'vitepress'\nimport { Icon } from '@iconify\u002Fvue'\nimport DefaultTheme from 'vitepress\u002Ftheme-without-fonts'\nimport { h } from 'vue'\n\nimport Footer from '..\u002Fcomponents\u002FFooter.vue'\nimport NotFound from '..\u002Fcomponents\u002FNotFound.vue'\n\nimport '.\u002Ftheme-enhanced.css'\nimport '.\u002Fstyle.css'\n\nexport default {\n\textends: DefaultTheme,\n\tLayout: () => {\n\t\treturn h(DefaultTheme.Layout, null, {\n\t\t\t\u002F\u002F https:\u002F\u002Fvitepress.dev\u002Fzh\u002Fguide\u002Fextending-default-theme#layout-slots\n\t\t\t'doc-bottom': () => h(Footer),\n\t\t\t'not-found': () => h(NotFound),\n\t\t})\n\t},\n\tenhanceApp({ app }) {\n\t\tapp.component('Icon', Icon)\n\t},\n} satisfies Theme\n","docs\u002F.vitepress\u002Ftheme\u002Findex.ts",[95,507,504],{"__ignoreMap":116},[18,509,510],{"id":510},"安置图标",[10,512,513],{},"对于 Font Awesome 和 Iconify 的图标，这是我常用的安置方式，在行文中的排版更自然。",[109,515,521],{"className":516,"code":518,"filename":519,"language":520,"meta":116},[517],"language-css","\u002F* Font Awesome 7 无需此声明 *\u002F\n.fa-solid, .fa-regular, .fa-brands {\n\twidth: 1.2em;\n\tvertical-align: middle;\n\ttext-align: center;\n}\n\nsvg:where(.iconify) {\n\tdisplay: inline-block;\n\tflex-shrink: 0;\n\tfont-size: 1.2em;\n\tvertical-align: sub;\n}\n","docs\u002F.vitepress\u002Ftheme\u002Fstyle.css","css",[95,522,518],{"__ignoreMap":116},[18,524,525],{"id":525},"优化样式",[10,527,528,529,335],{},"官方文档中有许多关于主题自定义的内容，如 ",[40,530,533],{"href":531,"rel":532},"https:\u002F\u002Fvitepress.dev\u002Fzh\u002Freference\u002Fdefault-theme-home-page#customizing-the-name-color",[44],"更改主页大标题的颜色",[10,535,536],{},"“GitHub 风格的警报”或“自定义容器”是文章中用于展示技巧或警告的组件，但若仅包含标题，则会导致上下边距不对称，可以在自定义 CSS 中添加如下样式以修正。",[109,538,542],{"className":539,"code":540,"filename":541,"language":520,"meta":116},[517],".vp-doc .custom-block {\n\tpadding: 8px 16px;\n}\n\n.vp-doc .custom-block :first-child:first-child {\n\tmargin: 8px 0;\n}\n","docs\u002F.vitepress\u002Ftheme\u002Ftheme-enhanced.css",[95,543,540],{"__ignoreMap":116},[10,545,546],{},"其他常用样式也一并列出，当然，在使用前最好知道这些代码意味着什么：",[109,548,552],{"className":549,"code":550,"filename":551,"language":520,"meta":116},[517],"\u002F* stylelint-disable selector-class-pattern *\u002F\n:root {\n\t--font-monospace: \"JetBrains Mono\", \"Cascadia Code\", \"Fira Code\", \"Monaco\", \"Consolas\", \"monospace\", \"Noto Sans SC\", system-ui, monospace;\n}\n\n.VPMenuGroup > .title {\n\tfont-size: 0.7em;\n}\n\n.VPSwitch > .check {\n\tbottom: 1px;\n\twidth: auto;\n\theight: auto;\n\taspect-ratio: 1;\n}\n\n.vp-doc > div > :where(h4, h5, h6) {\n\tmargin: 1.4em 0 0.5em;\n}\n\n.vp-doc blockquote > p {\n\tmargin: 1em 0;\n}\n\n.vp-doc table {\n\tfont-variant-numeric: tabular-nums;\n}\n\n.vp-doc a {\n\tbackground: linear-gradient(var(--vp-c-brand-soft), var(--vp-c-brand-soft)) no-repeat center bottom \u002F 100% 2px;\n\ttext-decoration: none;\n\ttransition: 0.2s;\n}\n\n.vp-doc a:hover {\n\tborder-radius: 0.2em;\n\tbackground: linear-gradient(var(--vp-c-brand-soft), var(--vp-c-brand-soft)) no-repeat center bottom \u002F 100% 100%;\n}\n\n.vp-doc strong {\n\tbackground: linear-gradient(var(--vp-c-brand-soft), var(--vp-c-brand-soft)) no-repeat center bottom \u002F 100% 40%;\n}\n\n.vp-doc s {\n\topacity: 0.6;\n}\n\n.vp-doc ::marker {\n\tcolor: var(--vp-c-brand-1);\n}\n\n.vp-doc ol:not([class]), .vp-doc ol:not([class]) ol ol ol {\n\tlist-style-type: revert;\n}\n\n.vp-doc ol:not([class]) ol, .vp-doc ol:not([class]) ol ol ol ol {\n\tlist-style-type: lower-alpha;\n}\n\n.vp-doc ol:not([class]) ol ol, .vp-doc ol:not([class]) ol ol ol ol ol {\n\tlist-style-type: lower-roman;\n}\n\n.VPBadge {\n\tmargin: 0 0.1em;\n\tpadding: 0.2em 0.5em;\n\tfont-size: 0.8em;\n\tline-height: 1.2;\n\ttransform: translateY(-0.1em);\n}\n","theme-enhanced.css",[95,553,550],{"__ignoreMap":116},[10,555,556,557,559,560,563],{},"如果需要在某些选择器中重置上述 ",[95,558,40],{"code":40}," 样式，即使在开发环境中看起来已成功重置，但由于构建产物中 CSS 出现顺序的变化，实际样式可能并未生效。在不使用 ",[95,561,562],{"code":562},"!important"," 的情况下，可以通过重复父级类名来提升样式的优先级。",[109,565,569],{"className":566,"code":567,"filename":568,"language":520,"meta":116},[517],".some-comp.some-comp a {\n\tbackground: unset;\n}\n\n.some-comp.some-comp a[target]::after {\n\tcontent: unset;\n}\n","some-component.vue",[95,570,567],{"__ignoreMap":116},[10,572,573],{},"还有一些有趣的样式，试一试就知道是什么了：",[109,575,578],{"className":576,"code":577,"filename":519,"language":520,"meta":116},[517],"\u002F* 首页 Feature 图标样式 *\u002F\n.VPFeature {\n\tposition: relative;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.VPFeature .icon {\n\tposition: absolute;\n\topacity: 0.15;\n\tinset-inline-end: 10%;\n\tbackground-color: transparent;\n\tfont-size: 8em;\n\tz-index: -1;\n}\n\n\u002F* 文档二级标题编号 *\u002F\n.vp-doc {\n\tcounter-reset: section-counter;\n}\n\n.vp-doc h2 {\n\tcounter-increment: section-counter;\n}\n\n.vp-doc h2::before {\n\tcontent: counter(section-counter);\n\tposition: absolute;\n\tinset-inline-start: -2rem;\n\tfont-size: 3rem;\n\tfont-weight: bold;\n\tcolor: var(--vp-c-divider);\n\tz-index: -1;\n}\n",[95,579,577],{"__ignoreMap":116},[18,581,582],{"id":582},"编写自定义组件",[10,584,585,586,591],{},"对于具备 Vue 基础的同学，可以很轻易的编写自定义组件。你可以参考 ",[40,587,590],{"href":588,"rel":589},"https:\u002F\u002Fvitepress.dev\u002Fzh\u002Freference\u002Fdefault-theme-team-page",[44],"团队页"," 和它的源码来编写自己的组件。",[14,593,594],{"id":594},"不止于默认主题",[10,596,597,598,603,604,609,610,615],{},"VitePress 的默认主题适合文档，而对于博客，已经出现 ",[40,599,602],{"href":600,"rel":601},"https:\u002F\u002Fgithub.com\u002Fimsyy\u002Fvitepress-theme-curve",[44],"Curve","、",[40,605,608],{"href":606,"rel":607},"https:\u002F\u002Fgithub.com\u002FAlittfre\u002Fvitepress-theme-bluearchive",[44],"BlueArchive"," 等美观且趣味的主题，你也可以 ",[40,611,614],{"href":612,"rel":613},"https:\u002F\u002Fgithub.com\u002Ftopics\u002Fvitepress-theme",[44],"搜索对应话题"," 找到更多。",[10,617,618,619],{},"啊？你说部署？",[40,620,625],{"href":621,"rel":622,"className":623},"https:\u002F\u002Fvitepress.dev\u002Fzh\u002Fguide\u002Fdeploy",[44],[624],"text-zoom","看! 文! 档！",{"title":116,"searchDepth":627,"depth":627,"links":628},4,[629,637,638,644,650],{"id":16,"depth":630,"text":16,"children":631},2,[632,634,635,636],{"id":20,"depth":633,"text":21},3,{"id":70,"depth":633,"text":71},{"id":83,"depth":633,"text":87},{"id":121,"depth":633,"text":121},{"id":154,"depth":630,"text":155},{"id":190,"depth":630,"text":190,"children":639},[640,641,642,643],{"id":196,"depth":633,"text":197},{"id":214,"depth":633,"text":215},{"id":325,"depth":633,"text":326},{"id":351,"depth":633,"text":352},{"id":455,"depth":630,"text":455,"children":645},[646,647,648,649],{"id":150,"depth":633,"text":150},{"id":510,"depth":633,"text":510},{"id":525,"depth":633,"text":525},{"id":582,"depth":633,"text":582},{"id":594,"depth":630,"text":594},[652],"开发","2024-11-03 17:54:50","VitePress 的基本使用与定制技巧，涵盖项目初始化、汉化配置、图标引入、自定义主题等内容，旨在利用 VitePress 构建美观、高效的静态站点。",false,"md","https:\u002F\u002Fassets.zhilu.cyou\u002Fcover4\u002Fvitepress-enhancement.jpg",{"slots":659},{},true,"\u002F2024\u002Fvitepress-enhancement",null,{"text":664,"minutes":665,"time":666,"words":667},"12 min read",11.84,710400,2368,{"title":5,"description":654},{"loc":661},"posts\u002F2024\u002Fvitepress-enhancement",[672,673,674],"VitePress","前端优化","博客","tech","2025-09-15 23:19:18","XtPc6pgf8o9JYawXyI2HxzA9np4nP1U25rt5Jeo9B0w",[679,684],{"title":680,"path":681,"stem":682,"date":683,"type":675,"children":-1},"给电脑新手的笔记本开荒指南导读","\u002F2024\u002Fnew-laptop-guide","posts\u002F2024\u002Fnew-laptop-guide","2024-10-28 08:23:08",{"title":685,"path":686,"stem":687,"date":688,"type":689,"children":-1},"迟到三月的年末博客杂谈：动力、文章和内容","\u002F2024\u002Fblog-record","posts\u002F2024\u002Fblog-record","2024-11-19 08:08:07","story",1782091374705]