|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-Hans" dir="ltr">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
<title>扩展默认主题 | VitePress</title>
|
|
|
<meta name="description" content="由 Vite 和 Vue 驱动的静态站点生成器">
|
|
|
<meta name="generator" content="VitePress v1.6.4">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/assets/style.wBANWwE3.css" as="style">
|
|
|
<link rel="preload stylesheet" href="/vitepress/v1/vp-icons.css" as="style">
|
|
|
<script type="module" src="/vitepress/v1/assets/chunks/metadata.1b805bca.js"></script>
|
|
|
<script type="module" src="/vitepress/v1/assets/app.ObmQnk_B.js"></script>
|
|
|
<link rel="preload" href="/vitepress/v1/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/theme.COmgkQ2m.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/framework.C1C4sYC0.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/chunks/appearance-toggle-transition.Dpv85PEn.js">
|
|
|
<link rel="modulepreload" href="/vitepress/v1/assets/zh_guide_extending-default-theme.md.7lzgIT7i.lean.js">
|
|
|
<link rel="icon" type="image/svg+xml" href="/vitepress-logo-mini.svg">
|
|
|
<link rel="icon" type="image/png" href="/vitepress-logo-mini.png">
|
|
|
<meta name="theme-color" content="#5f67ee">
|
|
|
<meta property="og:type" content="website">
|
|
|
<meta property="og:locale" content="en">
|
|
|
<meta property="og:title" content="VitePress | Vite & Vue Powered Static Site Generator">
|
|
|
<meta property="og:site_name" content="VitePress">
|
|
|
<meta property="og:image" content="https://vitepress.dev/vitepress-og.jpg">
|
|
|
<meta property="og:url" content="https://vitepress.dev/">
|
|
|
<script src="https://cdn.usefathom.com/script.js" data-site="AZBRSFGG" data-spa="auto" defer></script>
|
|
|
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
|
|
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app"><div class="Layout" data-v-24d6a1ec><!--[--><!--]--><!--[--><span tabindex="-1" data-v-6d358b95></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-6d358b95>跳转到内容</a><!--]--><!----><header class="VPNav" data-v-24d6a1ec data-v-a3bfa20d><div class="VPNavBar" data-v-a3bfa20d data-v-2e8dfb4b><div class="wrapper" data-v-2e8dfb4b><div class="container" data-v-2e8dfb4b><div class="title" data-v-2e8dfb4b><div class="VPNavBarTitle has-sidebar" data-v-2e8dfb4b data-v-ab8df553><a class="title" href="/vitepress/v1/zh/" data-v-ab8df553><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vitepress/v1/vitepress-logo-mini.svg" width="24" height="24" alt data-v-857f4fa7><!--]--><span data-v-ab8df553>VitePress</span><!--[--><!--]--></a></div></div><div class="content" data-v-2e8dfb4b><div class="content-body" data-v-2e8dfb4b><!--[--><!--]--><div class="VPNavBarSearch search" data-v-2e8dfb4b><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-2e8dfb4b data-v-06cc176e><span id="main-nav-aria-label" class="visually-hidden" data-v-06cc176e> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vitepress/v1/zh/guide/what-is-vitepress" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vitepress/v1/zh/reference/site-config" tabindex="0" data-v-06cc176e data-v-1e5c3b26><!--[--><span data-v-1e5c3b26>参考</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-06cc176e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-d85ac99d><span class="text" data-v-d85ac99d><!----><span data-v-d85ac99d>1.6.4</span><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><div class="items" data-v-c8d7041b><!--[--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-c8d7041b data-v-1b571f26><a class="VPLink link vp-external-link-icon" href="https://github.com/vuejs/vitepress/blob/main/.github/contributing.md" target="_blank" rel="noreferrer" data-v-1b571f26><!--[--><span data-v-1b571f26>参与贡献</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-2e8dfb4b data-v-492a0c8e data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="多语言" data-v-d85ac99d><span class="text" data-v-d85ac99d><span class="vpi-languages option-icon" data-v-d85ac99d></span><!----><span class="vpi-chevron-down text-icon" data-v-d85ac99d></span></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="items" data-v-492a0c8e><p class="title" data-v-492a0c8e>简体中文</p><!--[--><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>English</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/es/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Español</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-492a0c8e data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-2e8dfb4b data-v-27fdb0e5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-27fdb0e5 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-2e8dfb4b data-v-331b41bb data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-2e8dfb4b data-v-cc29fe84 data-v-d85ac99d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-d85ac99d><span class="vpi-more-horizontal icon" data-v-d85ac99d></span></button><div class="menu" data-v-d85ac99d><div class="VPMenu" data-v-d85ac99d data-v-c8d7041b><!----><!--[--><!--[--><div class="group translations" data-v-cc29fe84><p class="trans-title" data-v-cc29fe84>简体中文</p><!--[--><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>English</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/pt/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Português</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ru/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Русский</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/es/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>Español</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/ko/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>한국어</span><!--]--></a></div><div class="VPMenuLink" data-v-cc29fe84 data-v-1b571f26><a class="VPLink link" href="/vitepress/v1/fa/guide/extending-default-theme" data-v-1b571f26><!--[--><span data-v-1b571f26>فارسی</span><!--]--></a></div><!--]--></div><div class="group" data-v-cc29fe84><div class="item appearance" data-v-cc29fe84><p class="label" data-v-cc29fe84>主题</p><div class="appearance-action" data-v-cc29fe84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-cc29fe84 data-v-b2703078 data-v-f3ad3c44><span class="check" data-v-f3ad3c44><span class="icon" data-v-f3ad3c44><!--[--><span class="vpi-sun sun" data-v-b2703078></span><span class="vpi-moon moon" data-v-b2703078></span><!--]--></span></span></button></div></div></div><div class="group" data-v-cc29fe84><div class="item social-links" data-v-cc29fe84><div class="VPSocialLinks social-links-list" data-v-cc29fe84 data-v-c0ed24e6><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-c0ed24e6 data-v-0ec81c6a><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-2e8dfb4b data-v-8a503b11><span class="container" data-v-8a503b11><span class="top" data-v-8a503b11></span><span class="middle" data-v-8a503b11></span><span class="bottom" data-v-8a503b11></span></span></button></div></div></div></div><div class="divider" data-v-2e8dfb4b><div class="divider-line" data-v-2e8dfb4b></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-24d6a1ec data-v-dbd97c1a><div class="container" data-v-dbd97c1a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-dbd97c1a><span class="vpi-align-left menu-icon" data-v-dbd97c1a></span><span class="menu-text" data-v-dbd97c1a>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-dbd97c1a data-v-2aa020d0><button data-v-2aa020d0>回到顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-24d6a1ec data-v-38fc5113><div class="curtain" data-v-38fc5113></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-38fc5113><span class="visually-hidden" id="sidebar-aria-label" data-v-38fc5113> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>简介</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/what-is-vitepress" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>什么是 VitePress？</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/getting-started" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/routing" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>路由</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/deploy" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>部署</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>写作</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/markdown" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>Markdown 扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/asset-handling" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>资源处理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/frontmatter" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>frontmatter</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/using-vue" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>在 Markdown 使用 Vue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/i18n" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>国际化</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible has-active" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>自定义</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/custom-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>自定义主题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/extending-default-theme" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>扩展默认主题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/data-loading" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>构建时数据加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/ssr-compat" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>SSR 兼容性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/cms" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>连接 CMS</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0 collapsible" data-v-0d029714 data-v-132a47f9><div class="item" role="button" tabindex="0" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><h2 class="text" data-v-132a47f9>实验性功能</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-132a47f9><span class="vpi-chevron-right caret-icon" data-v-132a47f9></span></div></div><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/mpa-mode" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>MPA 模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/guide/sitemap-generation" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>sitemap 生成</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0d029714><section class="VPSidebarItem level-0" data-v-0d029714 data-v-132a47f9><!----><div class="items" data-v-132a47f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-132a47f9 data-v-132a47f9><div class="item" data-v-132a47f9><div class="indicator" data-v-132a47f9></div><a class="VPLink link link" href="/vitepress/v1/zh/reference/site-config" data-v-132a47f9><!--[--><p class="text" data-v-132a47f9>配置和 API 参考</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-24d6a1ec data-v-c002ede2><div class="VPDoc has-sidebar has-aside" data-v-c002ede2 data-v-b83d2fb8><!--[--><!--]--><div class="container" data-v-b83d2fb8><div class="aside" data-v-b83d2fb8><div class="aside-curtain" data-v-b83d2fb8></div><div class="aside-container" data-v-b83d2fb8><div class="aside-content" data-v-b83d2fb8><div class="VPDocAside" data-v-b83d2fb8 data-v-3117dd8f><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3117dd8f data-v-8f1cb326><div class="content" data-v-8f1cb326><div class="outline-marker" data-v-8f1cb326></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8f1cb326>页面导航</div><ul class="VPDocOutlineItem root" data-v-8f1cb326 data-v-999189d2><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3117dd8f></div><!--[--><!--]--><div class="VPDocAsideCarbonAds" data-v-3117dd8f><div class="VPCarbonAds" data-v-5c72d9ad></div></div><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-b83d2fb8><div class="content-container" data-v-b83d2fb8><!--[--><!--]--><main class="main" data-v-b83d2fb8><div style="position:relative;" class="vp-doc _vitepress_v1_zh_guide_extending-default-theme" data-v-b83d2fb8><div><h1 id="extending-the-default-theme" tabindex="-1">扩展默认主题 <a class="header-anchor" href="#extending-the-default-theme" aria-label="Permalink to "扩展默认主题 {#extending-the-default-theme}""></a></h1><p>VitePress 默认的主题已经针对文档进行了优化，并且可以进行自定义。请参考<a href="./../reference/default-theme-config">默认主题配置概览</a>获取完整的选项列表。</p><p>但是有一些情况仅靠配置是不够的。例如：</p><ol><li>需要调整 CSS 样式；</li><li>需要修改 Vue 应用实例，例如注册全局组件；</li><li>需要通过 layout 插槽将自定义内容注入到主题中；</li></ol><p>这些高级自定义配置将需要使用自定义主题来“拓展”默认主题。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>在继续之前，请确保首先阅读<a href="./custom-theme">自定义主题</a>以了解其工作原理。</p></div><h2 id="customizing-css" tabindex="-1">自定义 CSS <a class="header-anchor" href="#customizing-css" aria-label="Permalink to "自定义 CSS {#customizing-css}""></a></h2><p>可以通过覆盖根级别的 CSS 变量来自定义默认主题的 CSS：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.js">.vitepress/theme/index.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './custom.css'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme</span></span></code></pre></div></div><div class="language-css vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* .vitepress/theme/custom.css */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --vp-c-brand-1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#646cff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --vp-c-brand-2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#747bff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>查看<a href="https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css" target="_blank" rel="noreferrer">默认主题 CSS 变量</a>来获取可以被覆盖的变量。</p><h2 id="using-different-fonts" tabindex="-1">使用自定义字体 <a class="header-anchor" href="#using-different-fonts" aria-label="Permalink to "使用自定义字体 {#using-different-fonts}""></a></h2><p>VitePress 使用 <a href="https://rsms.me/inter/" target="_blank" rel="noreferrer">Inter</a> 作为默认字体，并且将其包含在生成的输出中。该字体在生产环境中也会自动预加载。但是如果要使用不同的字体，这可能不是很好。</p><p>为了避免在生成后的输出中包含 Inter 字体，请从 <code>vitepress/theme-without-fonts</code> 中导入主题：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.js">.vitepress/theme/index.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme-without-fonts'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './my-fonts.css'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme</span></span></code></pre></div></div><div class="language-css vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* .vitepress/theme/my-fonts.css */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --vp-font-family-base</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* normal text font */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> --vp-font-family-mono: </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* code font */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>如果你在使用像是<a href="./../reference/default-theme-team-page">团队页</a>这样的组件，请确保也从 <code>vitepress/theme-without-fonts</code> 中导入它们！</p></div><p>如果字体是通过 <code>@font-face</code> 引用的本地文件，它将会被作为资源被包含在 <code>.vitepress/dist/asset</code> 目录下，并且使用哈希后的文件名。为了预加载这个文件，请使用 <a href="./../reference/site-config#transformhead">transformHead</a> 构建钩子：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/config.js">.vitepress/config.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> transformHead</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">assets</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 相应地调整正则表达式以匹配字体</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myFontFile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> assets.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">find</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">file</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">font-name</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\w</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\.</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">woff2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (myFontFile) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'link'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> rel: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'preload'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> href: myFontFile,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> as: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'font'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'font/woff2'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> crossorigin: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><h2 id="registering-global-components" tabindex="-1">注册全局组件 <a class="header-anchor" href="#registering-global-components" aria-label="Permalink to "注册全局组件 {#registering-global-components}""></a></h2><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.js">.vitepress/theme/index.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/** </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> {import('vitepress').Theme}</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> */</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extends: DefaultTheme,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enhanceApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 注册自定义全局组件</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'MyGlobalComponent'</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ... */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p>如果使用 TypeScript:</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.ts">.vitepress/theme/index.ts</span></div><div class="language-ts vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Theme } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extends: DefaultTheme,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enhanceApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 注册自定义全局组件</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'MyGlobalComponent'</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> /* ... */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">satisfies</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Theme</span></span></code></pre></div></div><p>因为我们使用 Vite，还可以利用 Vite 的 <a href="https://cn.vitejs.dev/guide/features.html#glob-import" target="_blank" rel="noreferrer">glob 导入功能</a>来自动注册一个组件目录。</p><h2 id="layout-slots" tabindex="-1">布局插槽 <a class="header-anchor" href="#layout-slots" aria-label="Permalink to "布局插槽 {#layout-slots}""></a></h2><p>默认主题的 <code><Layout/></code> 组件有一些插槽，能够被用来在页面的特定位置注入内容。下面这个例子展示了将一个组件注入到 outline 之前：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.js">.vitepress/theme/index.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyLayout </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './MyLayout.vue'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extends: DefaultTheme,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 使用注入插槽的包装组件覆盖 Layout</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Layout: MyLayout</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/MyLayout.vue">.vitepress/theme/MyLayout.vue</span></div><div class="language-vue vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">Layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> #</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">aside-outline-before</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> My custom sidebar top content</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div><p>也可以使用渲染函数。</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/index.js">.vitepress/theme/index.js</span></div><div class="language-js vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { h } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vue'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyComponent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './MyComponent.vue'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> extends: DefaultTheme,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(DefaultTheme.Layout, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'aside-outline-before'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyComponent)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><p>默认主题布局的全部可用插槽如下：</p><ul><li>当 <code>layout: 'doc'</code> (默认) 在 frontmatter 中被启用时： <ul><li><code>doc-top</code></li><li><code>doc-bottom</code></li><li><code>doc-footer-before</code></li><li><code>doc-before</code></li><li><code>doc-after</code></li><li><code>sidebar-nav-before</code></li><li><code>sidebar-nav-after</code></li><li><code>aside-top</code></li><li><code>aside-bottom</code></li><li><code>aside-outline-before</code></li><li><code>aside-outline-after</code></li><li><code>aside-ads-before</code></li><li><code>aside-ads-after</code></li></ul></li><li>当 <code>layout: 'home'</code> 在 frontmatter 中被启用时: <ul><li><code>home-hero-before</code></li><li><code>home-hero-info-before</code></li><li><code>home-hero-info</code></li><li><code>home-hero-info-after</code></li><li><code>home-hero-actions-after</code></li><li><code>home-hero-image</code></li><li><code>home-hero-after</code></li><li><code>home-features-before</code></li><li><code>home-features-after</code></li></ul></li><li>当 <code>layout: 'page'</code> 在 frontmatter 中被启用时: <ul><li><code>page-top</code></li><li><code>page-bottom</code></li></ul></li><li>当未找到页面 (404) 时: <ul><li><code>not-found</code></li></ul></li><li>总是启用: <ul><li><code>layout-top</code></li><li><code>layout-bottom</code></li><li><code>nav-bar-title-before</code></li><li><code>nav-bar-title-after</code></li><li><code>nav-bar-content-before</code></li><li><code>nav-bar-content-after</code></li><li><code>nav-screen-content-before</code></li><li><code>nav-screen-content-after</code></li></ul></li></ul><h2 id="使用视图过渡-api" tabindex="-1">使用视图过渡 API <a class="header-anchor" href="#使用视图过渡-api" aria-label="Permalink to "使用视图过渡 API""></a></h2><h3 id="on-appearance-toggle" tabindex="-1">关于外观切换 <a class="header-anchor" href="#on-appearance-toggle" aria-label="Permalink to "关于外观切换 {#on-appearance-toggle}""></a></h3><p>可以扩展默认主题以在切换颜色模式时提供自定义过渡动画。例如：</p><div class="vp-code-block-title"><div class="vp-code-block-title-bar"><span class="vp-code-block-title-text" data-title=".vitepress/theme/Layout.vue">.vitepress/theme/Layout.vue</span></div><div class="language-vue vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"ts"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useData } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> DefaultTheme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress/theme'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { nextTick, provide } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vue'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">isDark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enableTransitions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'startViewTransition'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> window.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">matchMedia</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'(prefers-reduced-motion: no-preference)'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).matches</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">provide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'toggle-appearance'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">clientX</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">clientY</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">y</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MouseEvent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">enableTransitions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> isDark.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isDark.value</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> clipPath</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `circle(0px at ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">y</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px)`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `circle(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Math</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hypot</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Math</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">max</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">innerWidth</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">),</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Math</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">max</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">y</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">innerHeight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> y</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> )</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px at ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px ${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">y</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px)`</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">startViewTransition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> isDark.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isDark.value</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nextTick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }).ready</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">animate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { clipPath: isDark.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> clipPath.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">reverse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> clipPath },</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> duration: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> easing: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'ease-in'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pseudoElement: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`::view-transition-${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isDark</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'old'</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'new'}(root)`</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">DefaultTheme.Layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-old(root),</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-new(root) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> animation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> mix-blend-mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">normal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-old(root),</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-new(root) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-new(root),</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">::view-transition-old(root) {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9999</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.VPSwitchAppearance</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">22</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.VPSwitchAppearance</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .check</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div></div><p>Result (<strong>warning!</strong>: flashing colors, sudden movements, bright lights):</p><details><summary>Demo</summary><p><img src="/vitepress/v1/appearance-toggle-transition.webp" alt="Appearance Toggle Transition Demo"></p></details><p>有关视图过渡动画的更多详细信息，请参阅 <a href="https://developer.chrome.com/docs/web-platform/view-transitions/" target="_blank" rel="noreferrer">Chrome 文档</a>。</p><h3 id="on-route-change" tabindex="-1">路由切换时 <a class="header-anchor" href="#on-route-change" aria-label="Permalink to "路由切换时 {#on-route-change}""></a></h3><p>即将到来。</p><h2 id="overriding-internal-components" tabindex="-1">重写内部组件 <a class="header-anchor" href="#overriding-internal-components" aria-label="Permalink to "重写内部组件 {#overriding-internal-components}""></a></h2><p>可以使用 Vite 的 <a href="https://vitejs.dev/config/shared-options.html#resolve-alias" target="_blank" rel="noreferrer">aliases</a> 来用自定义组件替换默认主题的组件：</p><div class="language-ts vp-adaptive-theme"><button title="复制代码" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { fileURLToPath, URL } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'node:url'</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vitepress'</span></span>
|
|
|
<span class="line"></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vite: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> resolve: {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> alias: [</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> find:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">.</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">VPNavBar</span><span style="--shiki-light:#22863A;--shiki-light-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold;">\.</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF;">vue</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> replacement: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">fileURLToPath</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> URL</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./components/CustomNavBar.vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">meta</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.url)</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><p>想要了解组件的确切名称请参考我们的<a href="https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components" target="_blank" rel="noreferrer">源代码</a>。因为组件是内部的，因此在小版本更迭中，它们名字改动的可能性很小。</p></div></div></main><footer class="VPDocFooter" data-v-b83d2fb8 data-v-9e12100f><!--[--><!--]--><div class="edit-info" data-v-9e12100f><div class="edit-link" data-v-9e12100f><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/vuejs/vitepress/edit/main/docs/zh/guide/extending-default-theme.md" target="_blank" rel="noreferrer" data-v-9e12100f><!--[--><span class="vpi-square-pen edit-link-icon" data-v-9e12100f></span> 在 GitHub 上编辑此页面<!--]--></a></div><div class="last-updated" data-v-9e12100f><p class="VPLastUpdated" data-v-9e12100f data-v-3eb659aa>最后更新于: <time datetime="2025-01-06T18:24:42.000Z" data-v-3eb659aa></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-9e12100f><span class="visually-hidden" id="doc-footer-aria-label" data-v-9e12100f>Pager</span><div class="pager" data-v-9e12100f><a class="VPLink link pager-link prev" href="/vitepress/v1/zh/guide/custom-theme" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>上一页</span><span class="title" data-v-9e12100f>自定义主题</span><!--]--></a></div><div class="pager" data-v-9e12100f><a class="VPLink link pager-link next" href="/vitepress/v1/zh/guide/data-loading" data-v-9e12100f><!--[--><span class="desc" data-v-9e12100f>下一页</span><span class="title" data-v-9e12100f>构建时数据加载</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-24d6a1ec data-v-3be7d130><div class="container" data-v-3be7d130><p class="message" data-v-3be7d130>基于 MIT 许可发布</p><p class="copyright" data-v-3be7d130>版权所有 © 2019-2025 尤雨溪</p></div></footer><!--[--><!--]--></div></div>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html> |
