diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
index b02838e5c6..0021518955 100644
--- a/.github/workflows/check.yml
+++ b/.github/workflows/check.yml
@@ -11,13 +11,7 @@ on:
 
 jobs:
   check:
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
-        node: ['18', '20']
-
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
@@ -40,6 +34,11 @@ jobs:
       - name: Linter Test
         run: pnpm lint
 
+      - name: Docs Test
+        run: |
+          pnpm --filter @vuepress/ecosystem-docs docs:build
+          pnpm --filter @vuepress/ecosystem-docs docs:build-webpack
+
       - name: Unit Test
         run: pnpm test:unit
 
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 0000000000..823eb47aae
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,44 @@
+name: Deploy Ecosystem Docs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-github-docs:
+    name: Deploy ecosystem docs to Github Pages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Project
+        run: pnpm build
+
+      - name: Docs build
+        env:
+          BASE: /ecosystem/
+          NODE_OPTIONS: --max_old_space_size=8192
+        run: pnpm --filter @vuepress/ecosystem-docs docs:build
+
+      - name: Deploy docs
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: docs/.vuepress/dist
+          single-commit: true
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index b0574a9b72..4c6e450fbe 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -25,3 +25,39 @@ jobs:
           tag_name: ${{ github.ref }}
           body: |
             Please refer to [CHANGELOG.md](https://github.com/${{ github.repository }}/blob/main/CHANGELOG.md) for details.
+
+  deploy-docs:
+    name: Deploy ecosystem docs to Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Project
+        run: pnpm build
+
+      - name: Docs build
+        env:
+          NODE_OPTIONS: --max_old_space_size=8192
+        run: pnpm --filter @vuepress/ecosystem-docs docs:build
+
+      - name: Deploy docs
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: netlify
+          folder: docs/.vuepress/dist
+          single-commit: true
diff --git a/docs/.vuepress/components/NpmBadge.vue b/docs/.vuepress/components/NpmBadge.vue
new file mode 100644
index 0000000000..c9ff7be250
--- /dev/null
+++ b/docs/.vuepress/components/NpmBadge.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  package: {
+    type: String,
+    required: true,
+  },
+  distTag: {
+    type: String,
+    required: false,
+    default: 'next',
+  },
+})
+
+const badgeLink = computed(
+  () => `https://www.npmjs.com/package/${props.package}`,
+)
+const badgeLabel = computed(() => {
+  if (props.distTag) {
+    return `${props.package}@${props.distTag}`
+  }
+  return props.package
+})
+const badgeImg = computed(
+  () =>
+    `https://badgen.net/npm/v/${props.package}/${
+      props.distTag
+    }?label=${encodeURIComponent(badgeLabel.value)}`,
+)
+</script>
+
+<template>
+  <a
+    class="npm-badge"
+    :href="badgeLink"
+    :title="package"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <img :src="badgeImg" :alt="package" />
+  </a>
+</template>
+
+<style scoped>
+.npm-badge {
+  margin-right: 0.5rem;
+}
+</style>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
new file mode 100644
index 0000000000..1a7b841c47
--- /dev/null
+++ b/docs/.vuepress/config.ts
@@ -0,0 +1,131 @@
+import { createRequire } from 'node:module'
+import process from 'node:process'
+import { viteBundler } from '@vuepress/bundler-vite'
+import { webpackBundler } from '@vuepress/bundler-webpack'
+// import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+import { shikiPlugin } from '@vuepress/plugin-shiki'
+import { defineUserConfig } from 'vuepress'
+import type { UserConfig } from 'vuepress'
+import { getDirname, path } from 'vuepress/utils'
+import { head } from './configs/index.js'
+import theme from './theme.js'
+
+const __dirname = getDirname(import.meta.url)
+const require = createRequire(import.meta.url)
+
+const isProd = process.env.NODE_ENV === 'production'
+
+export default defineUserConfig({
+  // set site base to default value
+  base: (process.env.BASE as `/${string}/` | '/') || '/',
+
+  // extra tags in `<head>`
+  head,
+
+  // site-level locales config
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'VuePress Ecosystem',
+      description: 'VuePress official themes plugins',
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'VuePress 生态系统',
+      description: 'VuePress 官方主题和插件',
+    },
+  },
+
+  // specify bundler via environment variable
+  bundler:
+    process.env.DOCS_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),
+
+  // configure markdown
+  markdown: {
+    importCode: {
+      handleImportPath: (importPath) => {
+        // handle @vuepress packages import path
+        if (importPath.startsWith('@vuepress/')) {
+          const packageName = importPath.match(/^(@vuepress\/[^/]*)/)![1]
+          return importPath
+            .replace(
+              packageName,
+              path.dirname(require.resolve(`${packageName}/package.json`)),
+            )
+            .replace('/src/', '/lib/')
+            .replace(/hotKey\.ts$/, 'hotKey.d.ts')
+        }
+        return importPath
+      },
+    },
+  },
+
+  // configure default theme
+  theme,
+
+  // use plugins
+  plugins: [
+    // docsearchPlugin({
+    //   appId: '34YFD9IUQ2',
+    //   apiKey: '9a9058b8655746634e01071411c366b8',
+    //   indexName: 'vuepress',
+    //   searchParameters: {
+    //     facetFilters: ['tags:v2'],
+    //   },
+    //   locales: {
+    //     '/zh/': {
+    //       placeholder: '搜索文档',
+    //       translations: {
+    //         button: {
+    //           buttonText: '搜索文档',
+    //           buttonAriaLabel: '搜索文档',
+    //         },
+    //         modal: {
+    //           searchBox: {
+    //             resetButtonTitle: '清除查询条件',
+    //             resetButtonAriaLabel: '清除查询条件',
+    //             cancelButtonText: '取消',
+    //             cancelButtonAriaLabel: '取消',
+    //           },
+    //           startScreen: {
+    //             recentSearchesTitle: '搜索历史',
+    //             noRecentSearchesText: '没有搜索历史',
+    //             saveRecentSearchButtonTitle: '保存至搜索历史',
+    //             removeRecentSearchButtonTitle: '从搜索历史中移除',
+    //             favoriteSearchesTitle: '收藏',
+    //             removeFavoriteSearchButtonTitle: '从收藏中移除',
+    //           },
+    //           errorScreen: {
+    //             titleText: '无法获取结果',
+    //             helpText: '你可能需要检查你的网络连接',
+    //           },
+    //           footer: {
+    //             selectText: '选择',
+    //             navigateText: '切换',
+    //             closeText: '关闭',
+    //             searchByText: '搜索提供者',
+    //           },
+    //           noResultsScreen: {
+    //             noResultsText: '无法找到相关结果',
+    //             suggestedQueryText: '你可以尝试查询',
+    //             reportMissingResultsText: '你认为该查询应该有结果？',
+    //             reportMissingResultsLinkText: '点击反馈',
+    //           },
+    //         },
+    //       },
+    //     },
+    //   },
+    // }),
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
+    // only enable shiki plugin in production mode
+    isProd
+      ? shikiPlugin({
+          langs: ['bash', 'diff', 'json', 'md', 'ts', 'vue'],
+          theme: 'dark-plus',
+        })
+      : [],
+  ],
+}) as UserConfig
diff --git a/docs/.vuepress/configs/head.ts b/docs/.vuepress/configs/head.ts
new file mode 100644
index 0000000000..a869976d67
--- /dev/null
+++ b/docs/.vuepress/configs/head.ts
@@ -0,0 +1,40 @@
+import type { HeadConfig } from 'vuepress/core'
+
+export const head: HeadConfig[] = [
+  [
+    'link',
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '16x16',
+      href: `/images/icons/favicon-16x16.png`,
+    },
+  ],
+  [
+    'link',
+    {
+      rel: 'icon',
+      type: 'image/png',
+      sizes: '32x32',
+      href: `/images/icons/favicon-32x32.png`,
+    },
+  ],
+  ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
+  ['meta', { name: 'application-name', content: 'VuePress' }],
+  ['meta', { name: 'apple-mobile-web-app-title', content: 'VuePress' }],
+  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+  [
+    'link',
+    { rel: 'apple-touch-icon', href: `/images/icons/apple-touch-icon.png` },
+  ],
+  [
+    'link',
+    {
+      rel: 'mask-icon',
+      href: '/images/icons/safari-pinned-tab.svg',
+      color: '#3eaf7c',
+    },
+  ],
+  ['meta', { name: 'msapplication-TileColor', content: '#3eaf7c' }],
+  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+]
diff --git a/docs/.vuepress/configs/index.ts b/docs/.vuepress/configs/index.ts
new file mode 100644
index 0000000000..b23dc923d2
--- /dev/null
+++ b/docs/.vuepress/configs/index.ts
@@ -0,0 +1,3 @@
+export * from './head.js'
+export * from './navbar/index.js'
+export * from './sidebar/index.js'
diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts
new file mode 100644
index 0000000000..3c237a7afb
--- /dev/null
+++ b/docs/.vuepress/configs/navbar/en.ts
@@ -0,0 +1,52 @@
+import type { NavbarConfig } from '@vuepress/theme-default'
+
+export const navbarEn: NavbarConfig = [
+  {
+    text: 'Themes',
+    children: [
+      {
+        text: 'Default Theme',
+        link: '/themes/default/',
+      },
+    ],
+  },
+  {
+    text: 'Plugins',
+    children: [
+      {
+        text: 'Common Features',
+        children: [
+          '/plugins/back-to-top',
+          '/plugins/container',
+          '/plugins/external-link-icon',
+          '/plugins/google-analytics',
+          '/plugins/medium-zoom',
+          '/plugins/nprogress',
+          '/plugins/register-components',
+        ],
+      },
+      {
+        text: 'Content Search',
+        children: ['/plugins/docsearch', '/plugins/search'],
+      },
+      {
+        text: 'PWA',
+        children: ['/plugins/pwa', '/plugins/pwa-popup'],
+      },
+      {
+        text: 'Syntax Highlighting',
+        children: ['/plugins/prismjs', '/plugins/shiki'],
+      },
+      {
+        text: 'Theme Development',
+        children: [
+          '/plugins/active-header-links',
+          '/plugins/git',
+          '/plugins/palette',
+          '/plugins/theme-data',
+          '/plugins/toc',
+        ],
+      },
+    ],
+  },
+]
diff --git a/docs/.vuepress/configs/navbar/index.ts b/docs/.vuepress/configs/navbar/index.ts
new file mode 100644
index 0000000000..7183393c31
--- /dev/null
+++ b/docs/.vuepress/configs/navbar/index.ts
@@ -0,0 +1,2 @@
+export * from './en.js'
+export * from './zh.js'
diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts
new file mode 100644
index 0000000000..8ed14f4129
--- /dev/null
+++ b/docs/.vuepress/configs/navbar/zh.ts
@@ -0,0 +1,52 @@
+import type { NavbarConfig } from '@vuepress/theme-default'
+
+export const navbarZh: NavbarConfig = [
+  {
+    text: '主题',
+    children: [
+      {
+        text: '默认主题',
+        link: '/zh/themes/default/',
+      },
+    ],
+  },
+  {
+    text: '插件',
+    children: [
+      {
+        text: '常用功能',
+        children: [
+          '/zh/plugins/back-to-top',
+          '/zh/plugins/container',
+          '/zh/plugins/external-link-icon',
+          '/zh/plugins/google-analytics',
+          '/zh/plugins/medium-zoom',
+          '/zh/plugins/nprogress',
+          '/zh/plugins/register-components',
+        ],
+      },
+      {
+        text: '内容搜索',
+        children: ['/zh/plugins/docsearch', '/zh/plugins/search'],
+      },
+      {
+        text: 'PWA',
+        children: ['/zh/plugins/pwa', '/zh/plugins/pwa-popup'],
+      },
+      {
+        text: '语法高亮',
+        children: ['/zh/plugins/prismjs', '/zh/plugins/shiki'],
+      },
+      {
+        text: '主题开发',
+        children: [
+          '/zh/plugins/active-header-links',
+          '/zh/plugins/git',
+          '/zh/plugins/palette',
+          '/zh/plugins/theme-data',
+          '/zh/plugins/toc',
+        ],
+      },
+    ],
+  },
+]
diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts
new file mode 100644
index 0000000000..89a9ac0f8e
--- /dev/null
+++ b/docs/.vuepress/configs/sidebar/en.ts
@@ -0,0 +1,54 @@
+import type { SidebarConfig } from '@vuepress/theme-default'
+
+export const sidebarEn: SidebarConfig = {
+  '/plugins/': [
+    {
+      text: 'Common Features',
+      children: [
+        '/plugins/back-to-top',
+        '/plugins/container',
+        '/plugins/external-link-icon',
+        '/plugins/google-analytics',
+        '/plugins/medium-zoom',
+        '/plugins/nprogress',
+        '/plugins/register-components',
+      ],
+    },
+    {
+      text: 'Content Search',
+      children: ['/plugins/docsearch', '/plugins/search'],
+    },
+    {
+      text: 'PWA',
+      children: ['/plugins/pwa', '/plugins/pwa-popup'],
+    },
+    {
+      text: 'Syntax Highlighting',
+      children: ['/plugins/prismjs', '/plugins/shiki'],
+    },
+    {
+      text: 'Theme Development',
+      children: [
+        '/plugins/active-header-links',
+        '/plugins/git',
+        '/plugins/palette',
+        '/plugins/theme-data',
+        '/plugins/toc',
+      ],
+    },
+  ],
+  '/themes/': [
+    {
+      text: 'Default Theme',
+      children: [
+        '/themes/default/',
+        '/themes/default/config',
+        '/themes/default/frontmatter',
+        '/themes/default/components',
+        '/themes/default/markdown',
+        '/themes/default/styles',
+        '/themes/default/extending',
+      ],
+    },
+  ],
+}
diff --git a/docs/.vuepress/configs/sidebar/index.ts b/docs/.vuepress/configs/sidebar/index.ts
new file mode 100644
index 0000000000..7183393c31
--- /dev/null
+++ b/docs/.vuepress/configs/sidebar/index.ts
@@ -0,0 +1,2 @@
+export * from './en.js'
+export * from './zh.js'
diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts
new file mode 100644
index 0000000000..a3405a7282
--- /dev/null
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@@ -0,0 +1,54 @@
+import type { SidebarConfig } from '@vuepress/theme-default'
+
+export const sidebarZh: SidebarConfig = {
+  '/zh/plugins/': [
+    {
+      text: '常用功能',
+      children: [
+        '/zh/plugins/back-to-top',
+        '/zh/plugins/container',
+        '/zh/plugins/external-link-icon',
+        '/zh/plugins/google-analytics',
+        '/zh/plugins/medium-zoom',
+        '/zh/plugins/nprogress',
+        '/zh/plugins/register-components',
+      ],
+    },
+    {
+      text: '内容搜索',
+      children: ['/zh/plugins/docsearch', '/zh/plugins/search'],
+    },
+    {
+      text: 'PWA',
+      children: ['/zh/plugins/pwa', '/zh/plugins/pwa-popup'],
+    },
+    {
+      text: '语法高亮',
+      children: ['/zh/plugins/prismjs', '/zh/plugins/shiki'],
+    },
+    {
+      text: '主题开发',
+      children: [
+        '/zh/plugins/active-header-links',
+        '/zh/plugins/git',
+        '/zh/plugins/palette',
+        '/zh/plugins/theme-data',
+        '/zh/plugins/toc',
+      ],
+    },
+  ],
+  '/zh/themes/': [
+    {
+      text: '默认主题',
+      children: [
+        '/zh/themes/default/',
+        '/zh/themes/default/config',
+        '/zh/themes/default/frontmatter',
+        '/zh/themes/default/components',
+        '/zh/themes/default/markdown',
+        '/zh/themes/default/styles',
+        '/zh/themes/default/extending',
+      ],
+    },
+  ],
+}
diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico
new file mode 100644
index 0000000000..e481e5dda7
Binary files /dev/null and b/docs/.vuepress/public/favicon.ico differ
diff --git a/docs/.vuepress/public/images/cookbook/extending-a-theme-01.png b/docs/.vuepress/public/images/cookbook/extending-a-theme-01.png
new file mode 100644
index 0000000000..9ba6d7e812
Binary files /dev/null and b/docs/.vuepress/public/images/cookbook/extending-a-theme-01.png differ
diff --git a/docs/.vuepress/public/images/hero.png b/docs/.vuepress/public/images/hero.png
new file mode 100644
index 0000000000..ac6beaff06
Binary files /dev/null and b/docs/.vuepress/public/images/hero.png differ
diff --git a/docs/.vuepress/public/images/icons/android-chrome-192x192.png b/docs/.vuepress/public/images/icons/android-chrome-192x192.png
new file mode 100644
index 0000000000..ddd043910e
Binary files /dev/null and b/docs/.vuepress/public/images/icons/android-chrome-192x192.png differ
diff --git a/docs/.vuepress/public/images/icons/android-chrome-384x384.png b/docs/.vuepress/public/images/icons/android-chrome-384x384.png
new file mode 100644
index 0000000000..86e1fd58b3
Binary files /dev/null and b/docs/.vuepress/public/images/icons/android-chrome-384x384.png differ
diff --git a/docs/.vuepress/public/images/icons/apple-touch-icon.png b/docs/.vuepress/public/images/icons/apple-touch-icon.png
new file mode 100644
index 0000000000..208915f1de
Binary files /dev/null and b/docs/.vuepress/public/images/icons/apple-touch-icon.png differ
diff --git a/docs/.vuepress/public/images/icons/favicon-16x16.png b/docs/.vuepress/public/images/icons/favicon-16x16.png
new file mode 100644
index 0000000000..ca5047e7b8
Binary files /dev/null and b/docs/.vuepress/public/images/icons/favicon-16x16.png differ
diff --git a/docs/.vuepress/public/images/icons/favicon-32x32.png b/docs/.vuepress/public/images/icons/favicon-32x32.png
new file mode 100644
index 0000000000..e275ce9ba1
Binary files /dev/null and b/docs/.vuepress/public/images/icons/favicon-32x32.png differ
diff --git a/docs/.vuepress/public/images/icons/mstile-150x150.png b/docs/.vuepress/public/images/icons/mstile-150x150.png
new file mode 100644
index 0000000000..d0b1439483
Binary files /dev/null and b/docs/.vuepress/public/images/icons/mstile-150x150.png differ
diff --git a/docs/.vuepress/public/images/icons/safari-pinned-tab.svg b/docs/.vuepress/public/images/icons/safari-pinned-tab.svg
new file mode 100644
index 0000000000..dc0b992c04
--- /dev/null
+++ b/docs/.vuepress/public/images/icons/safari-pinned-tab.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M18 3698 c19 -31 229 -394 389 -672 41 -70 82 -141 91 -157 10 -15
+54 -92 100 -171 45 -79 127 -219 181 -313 55 -93 136 -233 180 -310 45 -77 88
+-151 96 -165 76 -130 508 -877 535 -925 12 -22 26 -44 30 -50 4 -5 19 -30 32
+-55 14 -25 74 -128 133 -230 116 -199 125 -215 174 -302 18 -32 37 -58 41 -58
+4 0 46 66 91 146 46 80 92 160 103 177 20 35 350 605 438 757 30 52 88 151
+128 220 40 68 81 138 90 155 15 26 360 622 563 970 38 66 78 136 89 155 11 19
+37 64 58 100 21 36 47 81 58 100 10 19 80 139 154 266 74 128 138 238 142 245
+6 14 31 56 68 117 l20 32 -773 -2 -773 -3 -64 -110 c-35 -60 -71 -123 -81
+-140 -94 -172 -306 -525 -313 -523 -4 2 -108 176 -231 388 l-223 385 -773 3
+-773 2 20 -32z"/>
+</g>
+</svg>
diff --git a/docs/.vuepress/public/images/logo.png b/docs/.vuepress/public/images/logo.png
new file mode 100644
index 0000000000..60e17006ad
Binary files /dev/null and b/docs/.vuepress/public/images/logo.png differ
diff --git a/docs/.vuepress/public/manifest.webmanifest b/docs/.vuepress/public/manifest.webmanifest
new file mode 100644
index 0000000000..d2e935f1ae
--- /dev/null
+++ b/docs/.vuepress/public/manifest.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "VuePress",
+  "short_name": "VuePress",
+  "description": "Vue-powered Static Site Generator",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#3eaf7c",
+  "icons": [
+    {
+      "src": "/images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
new file mode 100644
index 0000000000..907c3aebe8
--- /dev/null
+++ b/docs/.vuepress/theme.ts
@@ -0,0 +1,68 @@
+import { defaultTheme } from '@vuepress/theme-default'
+import { navbarEn, navbarZh, sidebarEn, sidebarZh } from './configs'
+
+const isProd = process.env.NODE_ENV === 'production'
+
+export default defaultTheme({
+  logo: '/images/hero.png',
+  repo: 'vuepress/docs',
+  docsDir: 'docs',
+
+  // theme-level locales config
+  locales: {
+    /**
+     * English locale config
+     *
+     * As the default locale of @vuepress/theme-default is English,
+     * we don't need to set all of the locale fields
+     */
+    '/': {
+      // navbar
+      navbar: navbarEn,
+      // sidebar
+      sidebar: sidebarEn,
+      // page meta
+      editLinkText: 'Edit this page on GitHub',
+    },
+
+    /**
+     * Chinese locale config
+     */
+    '/zh/': {
+      // navbar
+      navbar: navbarZh,
+      selectLanguageName: '简体中文',
+      selectLanguageText: '选择语言',
+      selectLanguageAriaLabel: '选择语言',
+      // sidebar
+      sidebar: sidebarZh,
+      // page meta
+      editLinkText: '在 GitHub 上编辑此页',
+      lastUpdatedText: '上次更新',
+      contributorsText: '贡献者',
+      // custom containers
+      tip: '提示',
+      warning: '注意',
+      danger: '警告',
+      // 404 page
+      notFound: [
+        '这里什么都没有',
+        '我们怎么到这来了？',
+        '这是一个 404 页面',
+        '看起来我们进入了错误的链接',
+      ],
+      backToHome: '返回首页',
+      // a11y
+      openInNewWindow: '在新窗口打开',
+      toggleColorMode: '切换颜色模式',
+      toggleSidebar: '切换侧边栏',
+    },
+  },
+
+  themePlugins: {
+    // only enable git plugin in production mode
+    git: isProd,
+    // use shiki plugin in production mode instead
+    prismjs: !isProd,
+  },
+})
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000000..337defa917
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,15 @@
+---
+home: true
+title: Home
+heroImage: /images/hero.png
+# actions:
+#   - text: Themes
+#     link: ./themes/
+#     type: primary
+
+#   - text: Plugins
+#     link: ./plugins/
+#     type: primary
+
+footer: MIT Licensed | Copyright © 2018-present VuePress Community
+---
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 0000000000..5ea86d30c6
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@vuepress/ecosystem-docs",
+  "private": true,
+  "scripts": {
+    "docs:build": "vuepress build . --clean-cache --clean-temp",
+    "docs:build-webpack": "DOCS_BUNDLER=webpack pnpm docs:build",
+    "docs:dev": "vuepress dev . --clean-cache --clean-temp",
+    "docs:dev-webpack": "DOCS_BUNDLER=webpack pnpm docs:dev",
+    "docs:serve": "anywhere -s -h localhost -d .vuepress/dist"
+  },
+  "dependencies": {
+    "@vuepress/bundler-vite": "2.0.0-rc.2",
+    "@vuepress/bundler-webpack": "2.0.0-rc.2",
+    "@vuepress/plugin-back-to-top": "workspace:*",
+    "@vuepress/plugin-docsearch": "workspace:*",
+    "@vuepress/plugin-external-link-icon": "workspace:*",
+    "@vuepress/plugin-google-analytics": "workspace:*",
+    "@vuepress/plugin-medium-zoom": "workspace:*",
+    "@vuepress/plugin-nprogress": "workspace:*",
+    "@vuepress/plugin-pwa-popup": "workspace:*",
+    "@vuepress/plugin-register-components": "workspace:*",
+    "@vuepress/plugin-search": "workspace:*",
+    "@vuepress/plugin-shiki": "workspace:*",
+    "@vuepress/theme-default": "workspace:*",
+    "anywhere": "^1.6.0",
+    "sass-loader": "^14.0.0",
+    "vue": "^3.4.15",
+    "vuepress": "2.0.0-rc.2"
+  }
+}
diff --git a/docs/plugins/active-header-links.md b/docs/plugins/active-header-links.md
new file mode 100644
index 0000000000..a4b0ca0b00
--- /dev/null
+++ b/docs/plugins/active-header-links.md
@@ -0,0 +1,74 @@
+# active-header-links
+
+<NpmBadge package="@vuepress/plugin-active-header-links" />
+
+This plugin will listen to page scroll event. When the page scrolls to a certain _header anchor_, this plugin will change the route hash to that _header anchor_ if there is a corresponding _header link_.
+
+This plugin is mainly used to develop themes, and has been integrated into the default theme. You won't need to use it directly in most cases.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-active-header-links@next
+```
+
+```ts
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+
+export default {
+  plugins: [
+    activeHeaderLinksPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### headerLinkSelector
+
+- Type: `string`
+
+- Default: `'a.sidebar-item'`
+
+- Details:
+
+  Selector of _header link_.
+
+  If a _header anchor_ does not have a corresponding _header link_, this plugin won't change the route hash to that anchor when scrolling to it.
+
+### headerAnchorSelector
+
+- Type: `string`
+
+- Default: `'.header-anchor'`
+
+- Details:
+
+  Selector of _header anchor_.
+
+  You don't need to specify this option unless you have changed the `permalinkClass` option of [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor#readme) via [markdown.anchor](../config.md#markdown-anchor).
+
+- Also see:
+  - [Guide > Markdown > Syntax Extensions > Header Anchors](../../guide/markdown.md#header-anchors)
+
+### delay
+
+- Type: `number`
+
+- Default: `200`
+
+- Details:
+
+  The delay of the debounced scroll event listener.
+
+### offset
+
+- Type: `number`
+
+- Default: `5`
+
+- Details:
+
+  Even if you click the link of the _header anchor_ directly, the `scrollTop` might not be exactly equal to `offsetTop` of the _header anchor_, so we add an offset to avoid the error.
diff --git a/docs/plugins/back-to-top.md b/docs/plugins/back-to-top.md
new file mode 100644
index 0000000000..6e9596481a
--- /dev/null
+++ b/docs/plugins/back-to-top.md
@@ -0,0 +1,27 @@
+# back-to-top
+
+<NpmBadge package="@vuepress/plugin-back-to-top" />
+
+This plugin will add a _back to top_ button to your site. The button will be displayed in the bottom right corner of the page when scrolling down. By clicking the button, the page will scroll to the top.
+
+This plugin has been integrated into the default theme.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-back-to-top@next
+```
+
+```ts
+import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
+
+export default {
+  plugins: [backToTopPlugin()],
+}
+```
+
+## Styles
+
+You can customize the style of the _back to top_ button via CSS variables:
+
+@[code css](@vuepress/plugin-back-to-top/src/client/styles/vars.css)
diff --git a/docs/plugins/container.md b/docs/plugins/container.md
new file mode 100644
index 0000000000..db3912e3a5
--- /dev/null
+++ b/docs/plugins/container.md
@@ -0,0 +1,165 @@
+# container
+
+<NpmBadge package="@vuepress/plugin-container" />
+
+Register markdown custom containers in your VuePress site.
+
+This plugin simplifies the use of [markdown-it-container](https://github.com/markdown-it/markdown-it-container), but also retains its original capabilities.
+
+The [Custom Containers](../default-theme/markdown.md#custom-containers) of default theme is powered by this plugin.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-container@next
+```
+
+```ts
+import { containerPlugin } from '@vuepress/plugin-container'
+
+export default {
+  plugins: [
+    containerPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Container Syntax
+
+```md
+::: <type> [info]
+[content]
+:::
+```
+
+- The `type` is required and should be specified via [type](#type) option.
+- The `info` is optional, and the default value can be specified via `defaultInfo` in [locales](#locales) option.
+- The `content` can be any valid markdown content.
+
+::: tip
+This plugin can be used multiple times to support different types of containers.
+:::
+
+## Options
+
+### type
+
+- Type: `string`
+
+- Details:
+
+  The type of the container.
+
+  It will be used as the `name` param of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+### locales
+
+- Type: `Record<string, { defaultInfo: string }>`
+
+- Details:
+
+  The default `info` of the container in different locales.
+
+  If this option is not specified, the default `info` will fallback to the uppercase of the [type](#type) option.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    containerPlugin({
+      type: 'tip',
+      locales: {
+        '/': {
+          defaultInfo: 'TIP',
+        },
+        '/zh/': {
+          defaultInfo: '提示',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+### before
+
+- Type: `(info: string) => string`
+
+- Default:
+
+<!-- prettier-ignore-start -->
+```ts
+(info: string): string =>
+  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
+```
+<!-- prettier-ignore-end -->
+
+- Details:
+
+  A function to render the starting tag of the container.
+
+  The first param is the `info` part of [container syntax](#container-syntax).
+
+  This option will not take effect if you don't specify the [after](#after) option.
+
+### after
+
+- Type: `(info: string) => string`
+
+- Default:
+
+<!-- prettier-ignore-start -->
+```ts
+(): string => '</div>\n'
+```
+<!-- prettier-ignore-end -->
+
+- Details:
+
+  A function to render the ending tag of the container.
+
+  The first param is the `info` part of [container syntax](#container-syntax).
+
+  This option will not take effect if you don't specify the [before](#before) option.
+
+### render
+
+- Type:
+
+```ts
+type MarkdownItContainerRenderFunction = (
+  tokens: Token[],
+  index: number,
+  options: any,
+  env: MarkdownEnv,
+  self: Renderer,
+) => string
+```
+
+- Details:
+
+  The `render` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+  This plugin uses a default `render` function. If you specify this option, the default `render` function will be replaced, and the [locales](#locales), [before](#before) and [after](#after) options will be ignored.
+
+### validate
+
+- Type: `(params: string) => boolean`
+
+- Details:
+
+  The `validate` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
+
+### marker
+
+- Type: `string`
+
+- Details:
+
+  The `marker` option of [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api).
diff --git a/docs/plugins/docsearch.md b/docs/plugins/docsearch.md
new file mode 100644
index 0000000000..0b43755326
--- /dev/null
+++ b/docs/plugins/docsearch.md
@@ -0,0 +1,411 @@
+# docsearch
+
+<NpmBadge package="@vuepress/plugin-docsearch" />
+
+Integrate [Algolia DocSearch](https://docsearch.algolia.com/) into VuePress, which can provide search to your documentation site.
+
+::: tip
+Default theme will add DocSearch to the navbar once you configure this plugin correctly.
+
+This plugin may not be used directly in other themes, so you'd better refer to the documentation of your theme for more details.
+:::
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-docsearch@next
+```
+
+```ts
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+
+export default {
+  plugins: [
+    docsearchPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Get Search Index
+
+You need to [submit the URL of your site](https://docsearch.algolia.com/apply/) to join the DocSearch program. The DocSearch team will send [apiKey](#apikey) and [indexName](#indexname) to your email once the index is generated. Then you can configure this plugin to enable DocSearch in VuePress.
+
+Alternatively, you can [run your own crawler](https://docsearch.algolia.com/docs/run-your-own/) to generate the index, and then use your own [appId](#appId), [apiKey](#apikey) and [indexName](#indexname) to configure this plugin.
+
+::: details Official crawler config
+
+```js{35-50,59}
+new Crawler({
+  appId: 'YOUR_APP_ID',
+  apiKey: 'YOUR_API_KEY',
+  rateLimit: 8,
+  startUrls: [
+    // These are urls which algolia start to craw
+    // If your site is divided in to mutiple parts,
+    // you may want to set mutiple entry links
+    'https://YOUR_WEBSITE_URL/',
+  ],
+  sitemaps: [
+    // if you are using sitemap plugins (e.g.: vuepress-plugin-sitemap2), you may provide one
+    'https://YOUR_WEBSITE_URL/sitemap.xml',
+  ],
+  ignoreCanonicalTo: false,
+  exclusionPatterns: [
+    // You can use this to stop algolia crawing some paths
+  ],
+  discoveryPatterns: [
+    // These are urls which algolia looking for,
+    'https://YOUR_WEBSITE_URL/**',
+  ],
+  // Crawler schedule, set it according to your docs update frequency
+  schedule: 'at 02:00 every 1 day',
+  actions: [
+    // you may have mutiple actions, especially when you are deploying mutiple docs under one domain
+    {
+      // name the index with name you like
+      indexName: 'YOUR_INDEX_NAME',
+      // paths where the index take effect
+      pathsToMatch: ['https://YOUR_WEBSITE_URL/**'],
+      // controls how algolia extracts records from your site
+      recordExtractor: ({ $, helpers }) => {
+        // options for @vuepress/theme-default
+        return helpers.docsearch({
+          recordProps: {
+            lvl0: {
+              selectors: '.sidebar-heading.active',
+              defaultValue: 'Documentation',
+            },
+            lvl1: '.theme-default-content h1',
+            lvl2: '.theme-default-content h2',
+            lvl3: '.theme-default-content h3',
+            lvl4: '.theme-default-content h4',
+            lvl5: '.theme-default-content h5',
+            lvl6: '.theme-default-content h6',
+            content: '.theme-default-content p, .theme-default-content li',
+          },
+          indexHeadings: true,
+        })
+      },
+    },
+  ],
+  initialIndexSettings: {
+    // controls how index are initialized
+    // only has effects before index are initialize
+    // you may need to delete your index and recraw after modification
+    YOUR_INDEX_NAME: {
+      attributesForFaceting: ['type', 'lang'],
+      attributesToRetrieve: ['hierarchy', 'content', 'anchor', 'url'],
+      attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
+      attributesToSnippet: ['content:10'],
+      camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
+      searchableAttributes: [
+        'unordered(hierarchy_radio_camel.lvl0)',
+        'unordered(hierarchy_radio.lvl0)',
+        'unordered(hierarchy_radio_camel.lvl1)',
+        'unordered(hierarchy_radio.lvl1)',
+        'unordered(hierarchy_radio_camel.lvl2)',
+        'unordered(hierarchy_radio.lvl2)',
+        'unordered(hierarchy_radio_camel.lvl3)',
+        'unordered(hierarchy_radio.lvl3)',
+        'unordered(hierarchy_radio_camel.lvl4)',
+        'unordered(hierarchy_radio.lvl4)',
+        'unordered(hierarchy_radio_camel.lvl5)',
+        'unordered(hierarchy_radio.lvl5)',
+        'unordered(hierarchy_radio_camel.lvl6)',
+        'unordered(hierarchy_radio.lvl6)',
+        'unordered(hierarchy_camel.lvl0)',
+        'unordered(hierarchy.lvl0)',
+        'unordered(hierarchy_camel.lvl1)',
+        'unordered(hierarchy.lvl1)',
+        'unordered(hierarchy_camel.lvl2)',
+        'unordered(hierarchy.lvl2)',
+        'unordered(hierarchy_camel.lvl3)',
+        'unordered(hierarchy.lvl3)',
+        'unordered(hierarchy_camel.lvl4)',
+        'unordered(hierarchy.lvl4)',
+        'unordered(hierarchy_camel.lvl5)',
+        'unordered(hierarchy.lvl5)',
+        'unordered(hierarchy_camel.lvl6)',
+        'unordered(hierarchy.lvl6)',
+        'content',
+      ],
+      distinct: true,
+      attributeForDistinct: 'url',
+      customRanking: [
+        'desc(weight.pageRank)',
+        'desc(weight.level)',
+        'asc(weight.position)',
+      ],
+      ranking: [
+        'words',
+        'filters',
+        'typo',
+        'attribute',
+        'proximity',
+        'exact',
+        'custom',
+      ],
+      highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
+      highlightPostTag: '</span>',
+      minWordSizefor1Typo: 3,
+      minWordSizefor2Typos: 7,
+      allowTyposOnNumericTokens: false,
+      minProximity: 1,
+      ignorePlurals: true,
+      advancedSyntax: true,
+      attributeCriteriaComputedByMinProximity: true,
+      removeWordsIfNoResults: 'allOptional',
+    },
+  },
+})
+```
+
+The above `recordProps` is the configuration used for the default theme. You can modify them according to the theme you are using.
+
+Notice that the `initialIndexSettings.YOUR_INDEX_NAME.attributesForFaceting` fields must include `'lang'` to make this plugin work properly.
+:::
+
+::: tip
+If you are not using default theme, or you meet any problems when using docsearch, you can also check the above example crawler config, and ahead to [Algolia Crawler](https://crawler.algolia.com/admin/crawlers/), and edit your config with 'Editor' panel in project sidebar.
+:::
+
+## Options
+
+### apiKey
+
+- Type: `string`
+
+- Required: `true`
+
+- Details:
+
+  The `apiKey` that you received from the DocSearch team, or generated by yourself.
+
+- Also see:
+  - [DocSearch > Options > apiKey](https://docsearch.algolia.com/docs/api#apikey)
+
+### indexName
+
+- Type: `string`
+
+- Required: `true`
+
+- Details:
+
+  The `indexName` that you received from the DocSearch team, or generated by yourself.
+
+- Also see:
+  - [DocSearch > Options > indexName](https://docsearch.algolia.com/docs/api#indexname)
+
+### appId
+
+- Type: `string`
+
+- Required: `true`
+
+- Details:
+
+  It defines your own application ID.
+
+- Also see:
+  - [DocSearch > Options > appId](https://docsearch.algolia.com/docs/api#appid)
+
+### searchParameters
+
+- Type: `SearchParameters`
+
+- Details:
+
+  Parameters of Algolia Search API.
+
+- Also see:
+  - [DocSearch > Options > searchParameters](https://docsearch.algolia.com/docs/api/#searchparameters)
+  - [Algolia > Search API Parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/)
+
+### placeholder
+
+- Type: `string`
+
+- Default: `'Search docs'`
+
+- Details:
+
+  The placeholder attribute of the search input.
+
+- Also see:
+  - [DocSearch > Options > placeholder](https://docsearch.algolia.com/docs/api/#placeholder)
+
+### disableUserPersonalization
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details:
+
+  Whether to disable all personalized features: recent searches, favorite searches, etc.
+
+- Also see:
+  - [DocSearch > Options > disableUserPersonalization](https://docsearch.algolia.com/docs/api/#disableuserpersonalization)
+
+### initialQuery
+
+- Type: `string`
+
+- Details:
+
+  The initial query when the modal opens.
+
+- Also see:
+  - [DocSearch > Options > initialQuery](https://docsearch.algolia.com/docs/api/#initialquery)
+
+### translations
+
+- Type: `Partial<DocSearchTranslations>`
+
+- Details:
+
+  Allow replacing the default text in the DocSearch button or modal.
+
+- Also see:
+  - [DocSearch > Options > translations](https://docsearch.algolia.com/docs/api/#translations)
+
+### locales
+
+- Type: `Record<string, DocsearchPluginOptions>`
+
+- Details:
+
+  Options of this plugin in different locales.
+
+  All other options of this plugin are acceptable in locale config.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    docsearchPlugin({
+      appId: '<APP_ID>',
+      apiKey: '<API_KEY>',
+      indexName: '<INDEX_NAME>',
+      locales: {
+        '/': {
+          placeholder: 'Search Documentation',
+          translations: {
+            button: {
+              buttonText: 'Search Documentation',
+            },
+          },
+        },
+        '/zh/': {
+          placeholder: '搜索文档',
+          translations: {
+            button: {
+              buttonText: '搜索文档',
+            },
+          },
+        },
+      },
+    }),
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+### indexBase
+
+- Type: `string`
+
+- Default: [base](../config.md#base)
+
+- Details:
+
+  The base path of the search index.
+
+  If you are deploying your site to multiple domains, you don't need to submit all of them to DocSearch and generate search index separately. You could choose one of the domains as the _index domain_, and only submit the _index domain_ to Docsearch for crawling search index. Then, you could reuse the search index across all deployments.
+
+  However, if the [base](../config.md#base) of your deployments are different for different domains, you need to set the option to the [base](../config.md#base) of your _index domain_, so that other deployments could reuse the search index correctly.
+
+### injectStyles
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether to inject the default styles of DocSearch or not.
+
+  If you think the default styles of DocSearch is not compatible with your site, you can try to override the default styles, or set this option to `false` to totally exclude the default styles.
+
+  When this option is disabled, you need to import your own styles for DocSearch. Also notice that all styles customization in [Styles](#styles) section would be unavailable.
+
+## Styles
+
+You can customize styles via CSS variables that provided by [@docsearch/css](https://docsearch.algolia.com/docs/styling):
+
+```css
+:root {
+  --docsearch-primary-color: rgb(84, 104, 255);
+  --docsearch-text-color: rgb(28, 30, 33);
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: rgb(150, 159, 175);
+  --docsearch-container-background: rgba(101, 108, 133, 0.8);
+  --docsearch-logo-color: rgba(84, 104, 255);
+
+  /* modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: rgb(245, 246, 247);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px
+      8px 0 rgba(85, 90, 100, 1);
+
+  /* searchbox */
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: rgb(235, 237, 240);
+  --docsearch-searchbox-focus-background: #fff;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+
+  /* hit */
+  --docsearch-hit-height: 56px;
+  --docsearch-hit-color: rgb(68, 73, 80);
+  --docsearch-hit-active-color: #fff;
+  --docsearch-hit-background: #fff;
+  --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
+
+  /* key */
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    rgb(213, 219, 228) 0%,
+    rgb(248, 248, 248) 100%
+  );
+  --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px
+      #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+
+  /* footer */
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: #fff;
+  --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+}
+```
+
+## Components
+
+### Docsearch
+
+- Details:
+
+  This plugin will register a `<Docsearch />` component globally, and you can use it without any props.
+
+  Put this component to where you want to place the docsearch button. For example, default theme puts this component to the end of the navbar.
+
+::: tip
+This component is mainly used for theme development. You don't need to use it directly in most cases.
+:::
diff --git a/docs/plugins/external-link-icon.md b/docs/plugins/external-link-icon.md
new file mode 100644
index 0000000000..c57f43749f
--- /dev/null
+++ b/docs/plugins/external-link-icon.md
@@ -0,0 +1,87 @@
+# external-link-icon
+
+<NpmBadge package="@vuepress/plugin-external-link-icon" />
+
+This plugin will add an icon to the external link in your markdown content, i.e. <ExternalLinkIcon />
+
+This plugin has been integrated into the default theme.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-external-link-icon@next
+```
+
+```ts
+import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'
+
+export default {
+  plugins: [
+    externalLinkIconPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### locales
+
+- Type: `Record<string, { openInNewWindow: string }>`
+
+- Details:
+
+  The a11y text of the external link icon in different locales.
+
+  If this option is not specified, it will fallback to default text.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    externalLinkIconPlugin({
+      locales: {
+        '/': {
+          openInNewWindow: 'open in new window',
+        },
+        '/zh/': {
+          openInNewWindow: '在新窗口打开',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+## Frontmatter
+
+### externalLinkIcon
+
+- Type: `boolean`
+
+- Details:
+
+  Whether to append an external link icon to external links in current page.
+
+## Styles
+
+You can customize the style of the external link icon via CSS variables:
+
+@[code css](@vuepress/plugin-external-link-icon/src/client/styles/vars.css)
+
+## Components
+
+### ExternalLinkIcon
+
+- Details:
+
+  This plugin will register a `<ExternalLinkIcon />` component globally, and you can use it without any props.
+
+::: tip
+This component is mainly used for theme development. You don't need to use it directly in most cases.
+:::
diff --git a/docs/plugins/git.md b/docs/plugins/git.md
new file mode 100644
index 0000000000..059c8ab17f
--- /dev/null
+++ b/docs/plugins/git.md
@@ -0,0 +1,145 @@
+# git
+
+<NpmBadge package="@vuepress/plugin-git" />
+
+This plugin will collect git information of your pages, including the created and updated time, the contributors, etc.
+
+The [lastUpdated](../default-theme/config.md#lastupdated) and [contributors](../default-theme/config.md#contributors) of default theme is powered by this plugin.
+
+This plugin is mainly used to develop themes. You won't need to use it directly in most cases.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-git@next
+```
+
+```ts
+import { gitPlugin } from '@vuepress/plugin-git'
+
+export default {
+  plugins: [
+    gitPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Git Repository
+
+This plugin requires your project to be inside a [Git Repository](https://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository), so that it can collect information from the commit history.
+
+You should ensure all commits are available when building your site. For example, CI workflows usually clone your repository with [--depth 1](https://git-scm.com/docs/git-clone#Documentation/git-clone.txt---depthltdepthgt) to avoid fetching all commits, so you should disable the behavior to make this plugin work properly in CI.
+
+::: warning
+This plugin will significantly slow down the speed of data preparation, especially when you have a lot of pages. You can consider disabling this plugin in `dev` mode to get better development experience.
+:::
+
+## Options
+
+### createdTime
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether to collect page created time or not.
+
+### updatedTime
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether to collect page updated time or not.
+
+### contributors
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether to collect page contributors or not.
+
+## Frontmatter
+
+### gitInclude
+
+- Type: `string[]`
+
+- Details:
+
+  An array of relative paths to be included when calculating page data.
+
+- Example:
+
+```md
+---
+gitInclude:
+  - relative/path/to/file1
+  - relative/path/to/file2
+---
+```
+
+## Page Data
+
+This plugin will add a `git` field to page data.
+
+After using this plugin, you can get the collected git information in page data:
+
+```ts
+import type { GitPluginPageData } from '@vuepress/plugin-git'
+import { usePageData } from 'vuepress/client'
+
+export default {
+  setup() {
+    const page = usePageData<GitPluginPageData>()
+    console.log(page.value.git)
+  },
+}
+```
+
+### git.createdTime
+
+- Type: `number`
+
+- Details:
+
+  Unix timestamp in milliseconds of the first commit of the page.
+
+  This attribute would take the minimum of the first commit timestamps of the current page and the files listed in [gitInclude](#gitinclude).
+
+### git.updatedTime
+
+- Type: `number`
+
+- Details:
+
+  Unix timestamp in milliseconds of the last commit of the page.
+
+  This attribute would take the maximum of the last commit timestamps of the current page and the files listed in [gitInclude](#gitinclude).
+
+### git.contributors
+
+- Type: `GitContributor[]`
+
+```ts
+interface GitContributor {
+  name: string
+  email: string
+  commits: number
+}
+```
+
+- Details:
+
+  The contributors information of the page.
+
+  This attribute would also include contributors to the files listed in [gitInclude](#gitinclude).
diff --git a/docs/plugins/google-analytics.md b/docs/plugins/google-analytics.md
new file mode 100644
index 0000000000..c35b267ddd
--- /dev/null
+++ b/docs/plugins/google-analytics.md
@@ -0,0 +1,78 @@
+# google-analytics
+
+<NpmBadge package="@vuepress/plugin-google-analytics" />
+
+Integrate [Google Analytics](https://analytics.google.com/) into VuePress.
+
+This plugin will import [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs) for [Google Analytics 4](https://support.google.com/analytics/answer/10089681).
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-google-analytics@next
+```
+
+```ts
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
+
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Reporting Events
+
+Google Analytics will [automatically collect some events](https://support.google.com/analytics/answer/9234069), such as `page_view`, `first_visit`, etc.
+
+So if you only want to collect some basic data of your site, you don't need to do anything else except setting the [Measurement ID](#id) correctly.
+
+After using this plugin, the global `gtag()` function is available on the `window` object, and you can use it for [custom events reporting](https://developers.google.com/analytics/devguides/collection/ga4/events).
+
+## Options
+
+### id
+
+- Type: `string`
+
+- Details:
+
+  The Measurement ID of Google Analytics 4, which should start with `'G-'`.
+
+  You can follow the instructions [here](https://support.google.com/analytics/answer/9539598) to find your Measurement ID. Notice the difference between Google Analytics 4 Measurement ID (i.e. "G-" ID) and Universal Analytics Tracking ID (i.e. "UA-" ID).
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      id: 'G-XXXXXXXXXX',
+    }),
+  ],
+}
+```
+
+### debug
+
+- Type: `boolean`
+
+- Details:
+
+  Set to `true` to enable sending events to DebugView. [See more information on DebugView](https://support.google.com/analytics/answer/7201382).
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      id: 'G-XXXXXXXXXX',
+      debug: true,
+    }),
+  ],
+}
+```
diff --git a/docs/plugins/medium-zoom.md b/docs/plugins/medium-zoom.md
new file mode 100644
index 0000000000..362dce2544
--- /dev/null
+++ b/docs/plugins/medium-zoom.md
@@ -0,0 +1,100 @@
+# medium-zoom
+
+<NpmBadge package="@vuepress/plugin-medium-zoom" />
+
+Integrate [medium-zoom](https://github.com/francoischalifour/medium-zoom#readme) into VuePress, which can provide the ability to zoom images.
+
+This plugin has been integrated into the default theme.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-medium-zoom@next
+```
+
+```ts
+import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
+
+export default {
+  plugins: [
+    mediumZoomPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### selector
+
+- Type: `string`
+
+- Default: `':not(a) > img'`
+
+- Details:
+
+  Selector of zoomable images.
+
+  By default this plugin will make all images zoomable except those inside `<a>` tags.
+
+### delay
+
+- Type: `number`
+
+- Default: `500`
+
+- Details:
+
+  Delay in milliseconds.
+
+  After navigating to a new page, this plugin will make images zoomable with a delay.
+
+### zoomOptions
+
+- Type: `Object`
+
+- Details:
+
+  Options for medium-zoom.
+
+- Also see:
+  - [medium-zoom > Options](https://github.com/francoischalifour/medium-zoom#options)
+
+## Styles
+
+You can customize most of the zoom styles via [zoomOptions](#zoomoptions), while this plugin also provides some CSS variables for additional customization:
+
+@[code css](@vuepress/plugin-medium-zoom/src/client/styles/vars.css)
+
+## Composition API
+
+### useMediumZoom
+
+- Details:
+
+  Returns the `Zoom` instance that used by this plugin, so that you can use the instance [methods](https://github.com/francoischalifour/medium-zoom#methods) directly.
+
+  This plugin will make images zoomable after navigating to current page. But if you are going to add new images dynamically, you may need this method to make those new images zoomable, too.
+
+  This plugin adds an extra `refresh` method on the `Zoom` instance, which will call `zoom.detach()` then `zoom.attach()` with the [selector](#selector) as the default parameter. It will help you to refresh the zoomable images for current page.
+
+- Example:
+
+```ts
+import { nextTick } from 'vue'
+import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
+
+export default {
+  setup() {
+    const zoom = useMediumZoom()
+
+    // ... do something to add new images in current page
+
+    // then you may need to call `refresh` manually to make those new images zoomable
+    nextTick(() => {
+      zoom.refresh()
+    })
+  },
+}
+```
diff --git a/docs/plugins/nprogress.md b/docs/plugins/nprogress.md
new file mode 100644
index 0000000000..2f501345a9
--- /dev/null
+++ b/docs/plugins/nprogress.md
@@ -0,0 +1,35 @@
+---
+title: nprogress
+---
+
+<!-- `# nprogress` will be rendered as `<h1 id="nprogress">`, and the id will conflict with the nprogress bar (stupid) -->
+
+<!-- so we add a 'plugin' suffix in the h1 title, and use title frontmatter to set the page title -->
+
+# nprogress Plugin
+
+<NpmBadge package="@vuepress/plugin-nprogress" />
+
+Integrate [nprogress](https://github.com/rstacruz/nprogress) into VuePress, which can provide a progress bar when navigating to another page.
+
+This plugin has been integrated into the default theme.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-nprogress@next
+```
+
+```ts
+import { nprogressPlugin } from '@vuepress/plugin-nprogress'
+
+export default {
+  plugins: [nprogressPlugin()],
+}
+```
+
+## Styles
+
+You can customize the style of the progress bar via CSS variables:
+
+@[code css](@vuepress/plugin-nprogress/src/client/styles/vars.css)
diff --git a/docs/plugins/palette.md b/docs/plugins/palette.md
new file mode 100644
index 0000000000..a5a5ecb842
--- /dev/null
+++ b/docs/plugins/palette.md
@@ -0,0 +1,203 @@
+# palette
+
+<NpmBadge package="@vuepress/plugin-palette" />
+
+Provide palette support for your theme.
+
+This plugin is mainly used to develop themes, and has been integrated into the default theme. You won't need to use it directly in most cases.
+
+For theme authors, this plugin will help you to provide styles customization for users.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-palette@next
+```
+
+```ts
+import { palettePlugin } from '@vuepress/plugin-palette'
+
+export default {
+  plugins: [
+    palettePlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Palette and Style
+
+This plugin will provide a `@vuepress/plugin-palette/palette` (palette file) and a `@vuepress/plugin-palette/style` (style file) to be imported in your theme styles.
+
+The palette file is used for defining style variables, so it's likely to be imported at the beginning of your theme styles. For example, users can define [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), [SASS variables](https://sass-lang.com/documentation/variables), [LESS variables](http://lesscss.org/features/#variables-feature) or [Stylus variables](https://stylus-lang.com/docs/variables.html) in the palette, and then you can use those variables in your theme styles.
+
+The style file is used for overriding the default styles or adding extra styles, so it's likely to be imported at the end of your theme styles.
+
+## Usage
+
+Use this plugin in your theme, assuming you are using SASS:
+
+```ts
+export default {
+  // ...
+  plugins: [palettePlugin({ preset: 'sass' })],
+}
+```
+
+### Usage of Palette
+
+Import the plugin's palette file where your theme needs to use the corresponding variables, such as in the `Layout.vue` file:
+
+```vue
+<template>
+  <h1 class="palette-title">Hello, Palette!</h1>
+</template>
+
+<style lang="scss">
+/* import variables from the plugin's palette file */
+@import '@vuepress/plugin-palette/palette';
+
+/* set default value for variables */
+$color: red !default;
+
+/* use variables in your styles */
+.palette-title {
+  color: $color;
+}
+</style>
+```
+
+Then users can customize variables in `.vuepress/styles/palette.scss`:
+
+```scss
+$color: green;
+```
+
+### Usage of Style
+
+Import the plugin's style file after your theme's styles, for example, in the `clientConfigFile`:
+
+```ts
+// import your theme's style file
+import 'path/to/your/theme/style'
+// import the plugin's style file
+import '@vuepress/plugin-palette/style'
+```
+
+Then users can add extra styles in `.vuepress/styles/index.scss` and override the default styles of your theme:
+
+```scss
+h1 {
+  font-size: 2.5rem;
+}
+```
+
+## Options
+
+### preset
+
+- Type: `'css' | 'sass' | 'less' | 'stylus'`
+
+- Default: `'css'`
+
+- Details:
+
+  Set preset for other options.
+
+  If you don't need advanced customization of the plugin, it's recommended to only set this option and omit other options.
+
+### userPaletteFile
+
+- Type: `string`
+
+- Default:
+
+  - css: `'.vuepress/styles/palette.css'`
+  - sass: `'.vuepress/styles/palette.scss'`
+  - less: `'.vuepress/styles/palette.less'`
+  - stylus: `'.vuepress/styles/palette.styl'`
+
+- Details:
+
+  File path of the user palette file, relative to source directory.
+
+  The default value depends on the [preset](#preset) option.
+
+  The file is where users define style variables, and it's recommended to keep the default file path as a convention.
+
+### tempPaletteFile
+
+- Type: `string`
+
+- Default:
+
+  - css: `'styles/palette.css'`
+  - sass: `'styles/palette.scss'`
+  - less: `'styles/palette.less'`
+  - stylus: `'styles/palette.styl'`
+
+- Details:
+
+  File path of the generated palette temp file, relative to temp directory.
+
+  The default value depends on the [preset](#preset) option.
+
+  You should import the palette file via `'@vuepress/plugin-palette/palette'` alias, so you don't need to change this option in most cases.
+
+### userStyleFile
+
+- Type: `string`
+
+- Default:
+
+  - css: `'.vuepress/styles/index.css'`
+  - sass: `'.vuepress/styles/index.scss'`
+  - less: `'.vuepress/styles/index.less'`
+  - stylus: `'.vuepress/styles/index.styl'`
+
+- Details:
+
+  File path of the user style file, relative to source directory.
+
+  The default value depends on the [preset](#preset) option.
+
+  The file is where users override default styles or add extra styles, and it's recommended to keep the default file path as a convention.
+
+### tempStyleFile
+
+- Type: `string`
+
+- Default:
+
+  - css: `'styles/index.css'`
+  - sass: `'styles/index.scss'`
+  - less: `'styles/index.less'`
+  - stylus: `'styles/index.styl'`
+
+- Details:
+
+  File path of the generated style temp file, relative to temp directory.
+
+  The default value depends on the [preset](#preset) option.
+
+  You should import the style file via `'@vuepress/plugin-palette/style'` alias, so you don't need to change this option in most cases.
+
+### importCode
+
+- Type: `(filePath: string) => string`
+
+- Default:
+
+  - css: `` (filePath) => `@import '${filePath}';\n` ``
+  - sass: `` (filePath) => `@forward 'file:///${filePath}';\n` ``
+  - less: `` (filePath) => `@import '${filePath}';\n` ``
+  - stylus: `` (filePath) => `@require '${filePath}';\n` ``
+
+- Details:
+
+  Function to generate import code.
+
+  The default value depends on the [preset](#preset) option.
+
+  This option is used for generating [tempPaletteFile](#temppalettefile) and [tempStyleFile](#tempstylefile), and you don't need to change this option in most cases.
diff --git a/docs/plugins/prismjs.md b/docs/plugins/prismjs.md
new file mode 100644
index 0000000000..d72625f222
--- /dev/null
+++ b/docs/plugins/prismjs.md
@@ -0,0 +1,43 @@
+# prismjs
+
+<NpmBadge package="@vuepress/plugin-prismjs" />
+
+This plugin will enable syntax highlighting for markdown code fence with [Prism.js](https://prismjs.com/).
+
+This plugin has been integrated into the default theme.
+
+Notice that this plugin would only tokenize the code fence without adding styles. When using it with a custom theme, you may need to choose and import Prism.js style theme yourself.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-prismjs@next
+```
+
+```ts
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
+
+export default {
+  plugins: [
+    prismjsPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### preloadLanguages
+
+- Type: `string[]`
+
+- Default: `['markdown', 'jsdoc', 'yaml']`
+
+- Details:
+
+  Languages to preload.
+
+  By default, languages will be loaded on demand when parsing markdown files.
+
+  However, Prism.js has [some potential issues](https://github.com/PrismJS/prism/issues/2716) about loading languages dynamically. To avoid them, you can preload languages via this option.
diff --git a/docs/plugins/pwa-popup.md b/docs/plugins/pwa-popup.md
new file mode 100644
index 0000000000..f305e526f6
--- /dev/null
+++ b/docs/plugins/pwa-popup.md
@@ -0,0 +1,72 @@
+# pwa-popup
+
+<NpmBadge package="@vuepress/plugin-pwa-popup" />
+
+Provide a popup component for users to activate the new PWA service worker manually.
+
+This plugin must be used together with [pwa plugin](./pwa.md), and the `skipWaiting` option must not be set to `true`.
+
+When the new service worker is ready, a popup will appear in the right bottom of the page to ask users to activate the waiting service worker.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-pwa-popup@next
+```
+
+```ts
+import { pwaPlugin } from '@vuepress/plugin-pwa'
+import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup'
+
+export default {
+  plugins: [
+    pwaPlugin(),
+    pwaPopupPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### locales
+
+- Type: `Record<string, { message: string, buttonText: string }>`
+
+- Details:
+
+  The messages of the popup in different locales.
+
+  If this option is not specified, it will fallback to default messages.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    pwaPlugin(),
+    pwaPopupPlugin({
+      locales: {
+        '/': {
+          message: 'New content is available.',
+          buttonText: 'Refresh',
+        },
+        '/zh/': {
+          message: '发现新内容可用',
+          buttonText: '刷新',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+## Styles
+
+You can customize the style of the popup via CSS variables:
+
+@[code css](@vuepress/plugin-pwa-popup/src/client/styles/vars.css)
diff --git a/docs/plugins/pwa.md b/docs/plugins/pwa.md
new file mode 100644
index 0000000000..e94f76971c
--- /dev/null
+++ b/docs/plugins/pwa.md
@@ -0,0 +1,173 @@
+# pwa
+
+<NpmBadge package="@vuepress/plugin-pwa" />
+
+Make your VuePress site a [Progressive Web Application (PWA)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps).
+
+This plugin uses [workbox-build](https://developers.google.com/web/tools/workbox/modules/workbox-build) to generate service worker file, and uses [register-service-worker](https://github.com/yyx990803/register-service-worker) to register service worker.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-pwa@next
+```
+
+```ts
+import { pwaPlugin } from '@vuepress/plugin-pwa'
+
+export default {
+  plugins: [
+    pwaPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Web App Manifests
+
+To make your website fully compliant with PWA, you need to create a [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest) file and set the icons, colors, etc. for your PWA.
+
+You need to put your manifest file and icons into the [public files directory](../../guide/assets.md#public-files). In the following example, we assume that you are using the default public directory `.vuepress/public`.
+
+1. Create manifest file
+
+Typically `.vuepress/public/manifest.webmanifest`:
+
+```json
+{
+  "name": "VuePress",
+  "short_name": "VuePress",
+  "description": "Vue-powered Static Site Generator",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#3eaf7c",
+  "icons": [
+    {
+      "src": "/images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ]
+}
+```
+
+2. Generate PWA icons
+
+To make your PWA more accessible, you need to generate some icons, and put them inside the public directory.
+
+Make sure the path of icons matches the `icons` field in your manifest file:
+
+- `.vuepress/public/images/icons/android-chrome-192x192.png`
+- `.vuepress/public/images/icons/android-chrome-384x384.png`
+
+::: tip
+Some tools can help to do that. For example, [Favicon Generator](https://realfavicongenerator.net/) would help you to generate icons together with a sample manifest file.
+:::
+
+3. Set tags in head
+
+You also need to set some tags via [head](../config.md#head) option to [deploy the manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest#deploying_a_manifest_with_the_link_tag):
+
+```ts
+export default {
+  head: [
+    ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    // ...other tags
+  ],
+}
+```
+
+## Options
+
+This plugin accepts all parameters of workbox-build's [generateSW method](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW) in its options, except `globDirectory` and `swDest`.
+
+For example, you can set `skipWaiting: true` to auto activate the new service worker once it is ready:
+
+```ts
+export default {
+  plugins: [
+    pwaPlugin({
+      skipWaiting: true,
+    }),
+  ],
+}
+```
+
+But if you omit `skipWaiting` or set it to `false`, you have to activate the new service worker manually:
+
+- For users, you can use our [pwa-popup](./pwa-popup.md) plugin together.
+- For developers, you can use our [composition API](#composition-api) to take control of the service worker behavior.
+
+### serviceWorkerFilename
+
+- Type: `string`
+
+- Default: `'service-worker.js'`
+
+- Details:
+
+  File path of the generated service worker file, which is relative to the [dest](../config.md#dest) directory.
+
+  The service worker file will only be generated in `build` mode.
+
+## Composition API
+
+### usePwaEvent
+
+- Details:
+
+  Returns the event emitter of this plugin.
+
+  You can add listener function to events that provided by [register-service-worker](https://github.com/yyx990803/register-service-worker).
+
+- Example:
+
+```ts
+import { usePwaEvent } from '@vuepress/plugin-pwa/client'
+
+export default {
+  setup() {
+    const event = usePwaEvent()
+    event.on('ready', (registration) => {
+      console.log('Service worker is active.')
+    })
+  },
+}
+```
+
+### useSkipWaiting
+
+- Parameters:
+
+| Parameter    | Type                        | Description                                              |
+| ------------ | --------------------------- | -------------------------------------------------------- |
+| registration | `ServiceWorkerRegistration` | The registration of the service worker you want activate |
+
+- Details:
+
+  Call [skipWaiting()](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) to activate the waiting service worker.
+
+- Example:
+
+```ts
+import { usePwaEvent, useSkipWaiting } from '@vuepress/plugin-pwa/client'
+
+export default {
+  setup() {
+    const event = usePwaEvent()
+    event.on('updated', (registration) => {
+      console.log('The waiting service worker is available.')
+      // activate the waiting service worker
+      useSkipWaiting(registration)
+    })
+  },
+}
+```
diff --git a/docs/plugins/register-components.md b/docs/plugins/register-components.md
new file mode 100644
index 0000000000..4515860809
--- /dev/null
+++ b/docs/plugins/register-components.md
@@ -0,0 +1,135 @@
+# register-components
+
+<NpmBadge package="@vuepress/plugin-register-components" />
+
+Register Vue components from component files or directory automatically.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-register-components@next
+```
+
+```ts
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### components
+
+- Type: `Record<string, string>`
+
+- Default: `{}`
+
+- Details:
+
+  An object that defines name of components and their corresponding file path.
+
+  The key will be used as the component name, and the value is an absolute path of the component file.
+
+  If the component name from this option conflicts with [componentsDir](#componentsdir) option, this option will have a higher priority.
+
+- Example:
+
+```ts
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      components: {
+        FooBar: path.resolve(__dirname, './components/FooBar.vue'),
+      },
+    }),
+  ],
+}
+```
+
+### componentsDir
+
+- Type: `string | null`
+
+- Default: `null`
+
+- Details:
+
+  Absolute path to the components directory.
+
+  Files in this directory which are matched with [componentsPatterns](#componentspatterns) will be registered as Vue components automatically.
+
+- Example:
+
+```ts
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
+  ],
+}
+```
+
+Components directory:
+
+```bash
+components
+├─ FooBar.vue
+└─ Baz.vue
+```
+
+Components will be registered like this:
+
+```ts
+import { defineAsyncComponent } from 'vue'
+
+app.component(
+  'FooBar',
+  defineAsyncComponent(() => import('/path/to/components/FooBar.vue')),
+)
+
+app.component(
+  'Baz',
+  defineAsyncComponent(() => import('/path/to/components/Baz.vue')),
+)
+```
+
+### componentsPatterns
+
+- Type: `string[]`
+
+- Default: `['**/*.vue']`
+
+- Details:
+
+  Patterns to match component files using [globby](https://github.com/sindresorhus/globby).
+
+  The patterns are relative to [componentsDir](#componentsdir).
+
+### getComponentName
+
+- Type: `(filename: string) => string`
+
+- Default: `(filename) => path.trimExt(filename.replace(/\/|\\/g, '-'))`
+
+- Details:
+
+  A function to get component name from the filename.
+
+  It will only take effect on the files in the [componentsDir](#componentsdir) which are matched with the [componentsPatterns](#componentspatterns).
+
+  Notice that the `filename` is a filepath relative to [componentsDir](#componentsdir).
diff --git a/docs/plugins/search.md b/docs/plugins/search.md
new file mode 100644
index 0000000000..f563b8a757
--- /dev/null
+++ b/docs/plugins/search.md
@@ -0,0 +1,166 @@
+# search
+
+<NpmBadge package="@vuepress/plugin-search" />
+
+Provide local search to your documentation site.
+
+::: tip
+Default theme will add search box to the navbar once you configure this plugin correctly.
+
+This plugin may not be used directly in other themes, so you'd better refer to the documentation of your theme for more details.
+:::
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-search@next
+```
+
+```ts
+import { searchPlugin } from '@vuepress/plugin-search'
+
+export default {
+  plugins: [
+    searchPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Local Search Index
+
+This plugin will generate search index from your pages locally, and load the search index file when users enter your site. In other words, this is a lightweight built-in search which does not require any external requests.
+
+However, when your site has a large number of pages, the size of search index file would be very large, which could slow down the page loading speed. In this case, we recommend you to use a more professional solution - [docsearch](./docsearch.md).
+
+## Options
+
+### locales
+
+- Type: `Record<string, { placeholder: string }>`
+
+- Details:
+
+  The text of the search box in different locales.
+
+  If this option is not specified, it will fallback to default text.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      locales: {
+        '/': {
+          placeholder: 'Search',
+        },
+        '/zh/': {
+          placeholder: '搜索',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+### hotKeys
+
+- Type: `(string | HotKeyOptions)[]`
+
+@[code ts](@vuepress/plugin-search/src/shared/hotKey.ts)
+
+- Default: `['s', '/']`
+
+- Details:
+
+  Specify the [event.key](http://keycode.info/) of the hotkeys.
+
+  When hotkeys are pressed, the search box input will be focused.
+
+  Set to an empty array to disable hotkeys.
+
+### maxSuggestions
+
+- Type: `number`
+
+- Default: `5`
+
+- Details:
+
+  Specify the maximum number of search results.
+
+### isSearchable
+
+- Type: `(page: Page) => boolean`
+
+- Default: `() => true`
+
+- Details:
+
+  A function to determine whether a page should be included in the search index.
+
+  - Return `true` to include the page.
+  - Return `false` to exclude the page.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      // exclude the homepage
+      isSearchable: (page) => page.path !== '/',
+    }),
+  ],
+}
+```
+
+### getExtraFields
+
+- Type: `(page: Page) => string[]`
+
+- Default: `() => []`
+
+- Details:
+
+  A function to add extra fields to the search index of a page.
+
+  By default, this plugin will use page title and headers as the search index. This option could help you to add more searchable fields.
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      // allow searching the `tags` frontmatter
+      getExtraFields: (page) => page.frontmatter.tags ?? [],
+    }),
+  ],
+}
+```
+
+## Styles
+
+You can customize the style of the search box via CSS variables:
+
+@[code css](@vuepress/plugin-search/src/client/styles/vars.css)
+
+## Components
+
+### SearchBox
+
+- Details:
+
+  This plugin will register a `<SearchBox />` component globally, and you can use it without any props.
+
+  Put this component to where you want to place the search box. For example, default theme puts this component to the end of the navbar.
+
+::: tip
+This component is mainly used for theme development. You don't need to use it directly in most cases.
+:::
diff --git a/docs/plugins/shiki.md b/docs/plugins/shiki.md
new file mode 100644
index 0000000000..46dabd2977
--- /dev/null
+++ b/docs/plugins/shiki.md
@@ -0,0 +1,75 @@
+# shiki
+
+<NpmBadge package="@vuepress/plugin-shiki" />
+
+This plugin will enable syntax highlighting for markdown code fence with [Shiki](https://shiki.matsu.io/) ([Shikiji](https://shikiji.netlify.app/)).
+
+::: tip
+[Shiki](https://shiki.matsu.io/) is the syntax highlighter being used by VSCode. It has higher fidelity, but it could be slower than [Prism.js](https://prismjs.com/), especially when you have a lot of code blocks.
+
+You could consider disabling this plugin in `dev` mode to get better development experience.
+:::
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-shiki@next
+```
+
+```ts
+import { shikiPlugin } from '@vuepress/plugin-shiki'
+
+export default {
+  plugins: [
+    shikiPlugin({
+      // options
+      langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
+    }),
+  ],
+}
+```
+
+## Options
+
+### langs
+
+- Type: `ShikiLang[]`
+
+- Details:
+
+  Languages of code blocks to be parsed by shikiji.
+
+  This option will be forwarded to `getHighlighter()` method of shikiji.
+
+  You need to provide the languages list you are using explicitly, otherwise shikiji won't load any languages.
+
+- Also see:
+  - [shikiji > Languages](https://shikiji.netlify.app/languages)
+
+### theme
+
+- Type: `ShikiTheme`
+
+- Default: `'nord'`
+
+- Details:
+
+  Theme of shikiji.
+
+  This option will be forwarded to `codeToHtml()` method of shikiji.
+
+- Also see:
+  - [shikiji > Themes](https://shikiji.netlify.app/themes)
+
+### themes
+
+- Type: `Record<'dark' | 'light', ShikiTheme>`
+
+- Details:
+
+  Dark / Light Dual themes of shikiji.
+
+  This option will be forwarded to `codeToHtml()` method of shikiji.
+
+- Also see:
+  - [shikiji > Dual Themes](https://shikiji.netlify.app/guide/dual-themes)
diff --git a/docs/plugins/theme-data.md b/docs/plugins/theme-data.md
new file mode 100644
index 0000000000..ecf2ea5a20
--- /dev/null
+++ b/docs/plugins/theme-data.md
@@ -0,0 +1,118 @@
+# theme-data
+
+<NpmBadge package="@vuepress/plugin-theme-data" />
+
+Provide client data for your theme, with VuePress [i18n](../../guide/i18n.md) support.
+
+This plugin is mainly used to develop themes, and has been integrated into the default theme. You won't need to use it directly in most cases.
+
+For theme authors, this plugin will help you to use the same i18n mechanism as VuePress and the default theme. But if you don't want to provide i18n support, or you want to implement in your own way, you don't need this plugin.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-theme-data@next
+```
+
+```ts
+import { themeDataPlugin } from '@vuepress/plugin-theme-data'
+
+export default {
+  plugins: [
+    themeDataPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### themeData
+
+- Type: `ThemeData`
+
+- Default: `{}`
+
+- Details:
+
+  The theme data object that you want to use in client side.
+
+  You can provide theme data in Node side via this option, and use it in client side via [useThemeData](#useThemeData) and [useThemeLocaleData](#useThemeLocaleData).
+
+- Example:
+
+```ts
+export default {
+  plugins: [
+    themeDataPlugin({
+      themeData: {
+        foo: 'foo',
+        locales: {
+          '/zh/': {
+            foo: 'zh-foo',
+          },
+        },
+      },
+    }),
+  ],
+}
+```
+
+::: warning
+The theme data object will be processed by `JSON.stringify()` before forwarding to client side, so you should ensure that you are providing a JSON-friendly object.
+:::
+
+## Composition API
+
+### useThemeData
+
+- Details:
+
+  Returns the theme data ref object.
+
+  The value is provided by [themeData](#themeData) option.
+
+- Example:
+
+```ts
+import { useThemeData } from '@vuepress/plugin-theme-data/client'
+import type { ThemeData } from '@vuepress/plugin-theme-data/client'
+
+type MyThemeData = ThemeData<{
+  foo: string
+}>
+
+export default {
+  setup() {
+    const themeData = useThemeData<MyThemeData>()
+    console.log(themeData.value)
+  },
+}
+```
+
+### useThemeLocaleData
+
+- Details:
+
+  Returns the theme data ref object in current locale.
+
+  The properties of current locale has been merged into the root-level properties.
+
+- Example:
+
+```ts
+import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+import type { ThemeData } from '@vuepress/plugin-theme-data/client'
+
+type MyThemeData = ThemeData<{
+  foo: string
+}>
+
+export default {
+  setup() {
+    const themeLocaleData = useThemeLocaleData<MyThemeData>()
+    console.log(themeLocaleData.value)
+  },
+}
+```
diff --git a/docs/plugins/toc.md b/docs/plugins/toc.md
new file mode 100644
index 0000000000..82ffdf85f0
--- /dev/null
+++ b/docs/plugins/toc.md
@@ -0,0 +1,172 @@
+# toc
+
+<NpmBadge package="@vuepress/plugin-toc" />
+
+This plugin will provide a table-of-contents (TOC) component.
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-toc@next
+```
+
+```ts
+import { tocPlugin } from '@vuepress/plugin-toc'
+
+export default {
+  plugins: [
+    tocPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Differences with Markdown TOC Syntax
+
+Similar to the [Table of Contents Markdown Syntax](../../guide/markdown.md#table-of-contents), the TOC component that provided by this plugin could be used in your markdown content directly:
+
+```md
+<!-- markdown toc syntax -->
+
+[[toc]]
+
+<!-- vue toc component -->
+<Toc />
+```
+
+Both of them can be pre-rendered correctly in build mode. However, there are some differences between them.
+
+The markdown syntax `[[toc]]` could only be used in markdown files. It is parsed by markdown-it, and the generated TOC is static content.
+
+The component `<Toc/>` could be used in both markdown files and vue files. It is loaded by vue, and the generated TOC is a vue component.
+
+This plugin could work together with [@vuepress/plugin-active-header-links](./active-header-links.md) by setting the [headerLinkSelector](./active-header-links.md#headerlinkselector) to match the `linkClass` option. When the page scroll to a certain header anchor, this corresponding link will be added `linkActiveClass` class name.
+
+Therefore, this plugin is more useful for theme developers.
+
+## Options
+
+### componentName
+
+- Type: `string`
+
+- Default: `'Toc'`
+
+- Details:
+
+  Specify the name of the TOC component.
+
+### defaultPropsOptions
+
+- Type: `Partial<TocPropsOptions>`
+
+- Default: `{}`
+
+- Details:
+
+  Override the default values of the component [options](#options-1) prop.
+
+## Component Props
+
+The TOC component also accepts props for customization.
+
+```vue
+<template>
+  <Toc :headers="headers" :options="options" />
+</template>
+```
+
+### headers
+
+- Type: `PageHeader[]`
+
+```ts
+interface PageHeader {
+  level: number
+  title: string
+  slug: string
+  children: PageHeader[]
+}
+```
+
+- Details:
+
+  Specify the headers array to render.
+
+  If this prop is not specified, the headers of current page will be used.
+
+### options
+
+- Type: `Partial<TocPropsOptions>`
+
+```ts
+interface TocPropsOptions {
+  containerTag: string
+  containerClass: string
+  listClass: string
+  itemClass: string
+  linkTag: 'a' | 'RouterLink'
+  linkClass: string
+  linkActiveClass: string
+  linkChildrenActiveClass: string
+}
+```
+
+- Default:
+
+  Following default values can be overridden by [defaultPropsOptions](#defaultpropsoptions).
+
+```ts
+const defaultOptions = {
+  containerTag: 'nav',
+  containerClass: 'vuepress-toc',
+  listClass: 'vuepress-toc-list',
+  itemClass: 'vuepress-toc-item',
+  linkTag: 'RouterLink',
+  linkClass: 'vuepress-toc-link',
+  linkActiveClass: 'active',
+  linkChildrenActiveClass: 'active',
+}
+```
+
+- Details:
+
+  Customize the TOC component.
+
+  If the `containerTag` is set to an empty string `''`, the `<nav>` container will be removed totally.
+
+- Example:
+
+  The rendered TOC component with default options looks like:
+
+```vue
+<template>
+  <!-- container -->
+  <nav class="vuepress-toc">
+    <!-- list -->
+    <ul class="vuepress-toc-list">
+      <!-- item -->
+      <li class="vuepress-toc-item">
+        <!-- link -->
+        <RouterLink class="vuepress-toc-link" to="#foo">Foo</RouterLink>
+      </li>
+      <!-- item with children -->
+      <li class="vuepress-toc-item">
+        <!-- link (children active) -->
+        <RouterLink class="vuepress-toc-link active" to="#bar">Bar</RouterLink>
+        <!-- list (children) -->
+        <ul class="vuepress-toc-list">
+          <!-- item -->
+          <li class="vuepress-toc-item">
+            <!-- link (active) -->
+            <RouterLink class="vuepress-toc-link active" to="#bar-child">
+              Bar Child
+            </RouterLink>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>
+```
diff --git a/docs/themes/default/README.md b/docs/themes/default/README.md
new file mode 100644
index 0000000000..2b5ca5c2a0
--- /dev/null
+++ b/docs/themes/default/README.md
@@ -0,0 +1,19 @@
+# Usage
+
+<NpmBadge package="@vuepress/theme-default" />
+
+Install `@vuepress/theme-default` :
+
+```bash
+npm install @vuepress/theme-default@next
+```
+
+```ts
+import { defaultTheme } from '@vuepress/theme-default'
+
+export default {
+  theme: defaultTheme({
+    // set theme config here
+  }),
+}
+```
diff --git a/docs/themes/default/components.md b/docs/themes/default/components.md
new file mode 100644
index 0000000000..d6877499cf
--- /dev/null
+++ b/docs/themes/default/components.md
@@ -0,0 +1,126 @@
+# Built-in Components
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## Badge <Badge text="badge" />
+
+- Props:
+
+  - type
+    - Type: `'tip' | 'warning' | 'danger'`
+    - Default: `'tip'`
+  - text
+    - Type: `string`
+    - Default: `''`
+  - vertical
+    - Type: `'top' | 'middle' | 'bottom' | undefined`
+    - Default: `undefined`
+
+- Example:
+
+**Input**
+
+```md
+- VuePress - <Badge type="tip" text="v2" vertical="top" />
+- VuePress - <Badge type="warning" text="v2" vertical="middle" />
+- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
+```
+
+**Output**
+
+- VuePress - <Badge type="tip" text="v2" vertical="top" />
+- VuePress - <Badge type="warning" text="v2" vertical="middle" />
+- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
+
+## CodeGroup
+
+- Details:
+
+  Wrapper of the [CodeGroupItem](#codegroupitem) components.
+
+## CodeGroupItem
+
+- Props:
+
+  - title
+    - Type: `string`
+    - Required: `true`
+  - active
+    - Type: `boolean`
+    - Default: `false`
+
+- Details:
+
+  This component must be placed inside a [CodeGroup](#codegroup) component.
+
+  Use the `active` prop to set the initial active item, or the first item will be activated by default.
+
+- Example:
+
+**Input**
+
+````md
+<CodeGroup>
+  <CodeGroupItem title="pnpm">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="yarn">
+
+```bash:no-line-numbers
+yarn install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="npm" active>
+
+```bash:no-line-numbers
+npm install
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+````
+
+**Output**
+
+<CodeGroup>
+  <CodeGroupItem title="pnpm">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="yarn">
+
+```bash:no-line-numbers
+yarn install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="npm" active>
+
+```bash:no-line-numbers
+npm install
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+::: warning
+You must add an empty line between the starting tag of `<CodeGroupItem>` and the code fence, otherwise the code fence will not be parsed correctly by Markdown.
+
+All content must be valid Markdown first, and then a Vue SFC.
+
+Learn more: [Cookbook > Markdown and Vue SFC](../../advanced/cookbook/markdown-and-vue-sfc.md)
+
+Alternatively, you can use the [custom containers](./markdown.md#custom-containers).
+:::
diff --git a/docs/themes/default/config.md b/docs/themes/default/config.md
new file mode 100644
index 0000000000..0c5aa52756
--- /dev/null
+++ b/docs/themes/default/config.md
@@ -0,0 +1,734 @@
+# Config
+
+## Basic Config
+
+### locales
+
+- Type: `{ [path: string]: Partial<DefaultThemeLocaleData> }`
+
+- Default: `{}`
+
+- Details:
+
+  Specify locales for i18n support.
+
+  All the options inside the [Locale Config](#locale-config) section can be used in locales.
+
+  This option will only take effect in default theme, so don't confuse with `locales` in [Site Config](../config.md#locales).
+
+- Also see:
+  - [Guide > I18n](../../guide/i18n.md)
+
+## Locale Config
+
+Config of this section can be used as normal config, and can also be used in the [locales](#locales) option.
+
+### colorMode
+
+- Type: `'auto' | 'light' | 'dark'`
+
+- Default: `'auto'`
+
+- Details:
+
+  Default color mode.
+
+  If set to `'auto'`, the initial color mode will be automatically set according to [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+- Also see:
+  - [Default Theme > Config > colorModeSwitch](#colormodeswitch)
+
+### colorModeSwitch
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable color mode switching or not.
+
+  If set to `true`, a button to switch color mode will be displayed in the navbar.
+
+- Also see:
+  - [Default Theme > Config > colorMode](#colormode)
+  - [Default Theme > Config > toggleColorMode](#togglecolormode)
+
+### home
+
+- Type: `string`
+
+- Default: `/`
+
+- Details:
+
+  Specify the path of the homepage.
+
+  This will be used for:
+
+  - the logo link of the navbar
+  - the _back to home_ link of the 404 page
+
+### navbar
+
+- Type: `false | (NavbarItem | NavbarGroup | string)[]`
+
+- Default: `[]`
+
+- Details:
+
+  Configuration of navbar.
+
+  Set to `false` to disable navbar.
+
+  To configure the navbar items, you can set it to a _navbar array_, each item of which could be a `NavbarItem` object, a `NavbarGroup` object, or a string:
+
+  - A `NavbarItem` object should have a `text` field and a `link` field, could have an optional `activeMatch` field.
+  - A `NavbarGroup` object should have a `text` field and a `children` field. The `children` field should be a _navbar array_, too.
+  - A string should be the path to the target page file. It will be converted to a `NavbarItem` object, using the page title as `text`, and the page route path as `link`.
+
+- Example 1:
+
+```ts
+export default {
+  theme: defaultTheme({
+    navbar: [
+      // NavbarItem
+      {
+        text: 'Foo',
+        link: '/foo/',
+      },
+      // NavbarGroup
+      {
+        text: 'Group',
+        children: ['/group/foo.md', '/group/bar.md'],
+      },
+      // string - page file path
+      '/bar/README.md',
+    ],
+  }),
+}
+```
+
+- Example 2:
+
+```ts
+export default {
+  theme: defaultTheme({
+    navbar: [
+      // nested group - max depth is 2
+      {
+        text: 'Group',
+        children: [
+          {
+            text: 'SubGroup',
+            children: ['/group/sub/foo.md', '/group/sub/bar.md'],
+          },
+        ],
+      },
+      // control when should the item be active
+      {
+        text: 'Group 2',
+        children: [
+          {
+            text: 'Always active',
+            link: '/',
+            // this item will always be active
+            activeMatch: '/',
+          },
+          {
+            text: 'Active on /foo/',
+            link: '/not-foo/',
+            // this item will be active when current route path starts with /foo/
+            // regular expression is supported
+            activeMatch: '^/foo/',
+          },
+        ],
+      },
+    ],
+  }),
+}
+```
+
+### logo
+
+- Type: `null | string`
+
+- Details:
+
+  Specify the url of logo image.
+
+  The logo image will be displayed at the left end of the navbar.
+
+  Set to `null` to disable logo.
+
+- Example:
+
+```ts
+export default {
+  theme: defaultTheme({
+    // public file path
+    logo: '/hero.png',
+    // url
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+}
+```
+
+- Also see:
+  - [Guide > Assets > Public Files](../../guide/assets.md#public-files)
+
+### logoDark
+
+- Type: `null | string`
+
+- Details:
+
+  Specify the url of logo image to be used in dark mode.
+
+  You can make use of this option if you want to use different logo config in dark mode.
+
+  Set to `null` to disable logo in dark mode. Omit this option to use [logo](#logo) in dark mode.
+
+- Also see:
+  - [Default Theme > Config > logo](#logo)
+  - [Default Theme > Config > colorMode](#colormode)
+
+### repo
+
+- Type: `string`
+
+- Details:
+
+  Specify the repository url of your project.
+
+  This will be used as the link of the _repository link_, which will be displayed as the last item of the navbar.
+
+```ts
+export default {
+  theme: defaultTheme({
+    // If you set it in the form of `organization/repository`
+    // we will take it as a GitHub repo
+    repo: 'vuejs/vuepress',
+    // You can also set it to a URL directly
+    repo: 'https://gitlab.com/foo/bar',
+  }),
+}
+```
+
+### repoLabel
+
+- Type: `string`
+
+- Details:
+
+  Specify the repository label of your project.
+
+  This will be used as the text of the _repository link_, which will be displayed as the last item of the navbar.
+
+  If you don't set this option explicitly, it will be automatically inferred from the [repo](#repo) option.
+
+### selectLanguageText
+
+- Type: `string`
+
+- Details:
+
+  Specify the text of the _select language menu_.
+
+  The _select language menu_ will appear next to the repository button in the navbar when you set multiple [locales](../config.md#locales) in your site config.
+
+### selectLanguageAriaLabel
+
+- Type: `string`
+
+- Details:
+
+  Specify the `aria-label` attribute of the _select language menu_.
+
+  This is mainly for a11y purpose.
+
+### selectLanguageName
+
+- Type: `string`
+
+- Details:
+
+  Specify the name of the language of a locale.
+
+  This option will **only take effect inside** the [locales](#locales) of your theme config. It will be used as the language name of the locale, which will be displayed in the _select language menu_.
+
+- Example:
+
+```ts
+export default {
+  locales: {
+    '/': {
+      lang: 'en-US',
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+    },
+  },
+  theme: defaultTheme({
+    locales: {
+      '/': {
+        selectLanguageName: 'English',
+      },
+      '/zh/': {
+        selectLanguageName: '简体中文',
+      },
+    },
+  }),
+}
+```
+
+### sidebar
+
+- Type: `false | 'auto' | SidebarConfigArray | SidebarConfigObject`
+
+- Default: `'auto'`
+
+- Details:
+
+  Configuration of sidebar.
+
+  You can override this global option via [sidebar](./frontmatter.md#sidebar) frontmatter in your pages.
+
+  Set to `false` to disable sidebar.
+
+  If you set it to `'auto'`, the sidebar will be automatically generated from the page headers.
+
+  To configure the sidebar items manually, you can set this option to a _sidebar array_, each item of which could be a `SidebarItem` object or a string:
+
+  - A `SidebarItem` object should have a `text` field, could have an optional `link` field, an optional `children` field and an optional `collapsible` field. The `children` field should be a _sidebar array_. The `collapsible` field controls whether the item is collapsible.
+  - A string should be the path to the target page file. It will be converted to a `SidebarItem` object, whose `text` is the page title, `link` is the page route path, and `children` is automatically generated from the page headers.
+
+  If you want to set different sidebar for different sub paths, you can set this option to a _sidebar object_:
+
+  - The key should be the path prefix.
+  - The value should be a _sidebar array_.
+
+- Example 1:
+
+```ts
+export default {
+  theme: defaultTheme({
+    // sidebar array
+    // all pages will use the same sidebar
+    sidebar: [
+      // SidebarItem
+      {
+        text: 'Foo',
+        link: '/foo/',
+        children: [
+          // SidebarItem
+          {
+            text: 'github',
+            link: 'https://github.com',
+            children: [],
+          },
+          // string - page file path
+          '/foo/bar.md',
+        ],
+      },
+      // string - page file path
+      '/bar/README.md',
+    ],
+  }),
+}
+```
+
+- Example 2:
+
+```ts
+export default {
+  theme: defaultTheme({
+    // sidebar object
+    // pages under different sub paths will use different sidebar
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          children: ['/guide/introduction.md', '/guide/getting-started.md'],
+        },
+      ],
+      '/reference/': [
+        {
+          text: 'Reference',
+          children: ['/reference/cli.md', '/reference/config.md'],
+        },
+      ],
+    },
+  }),
+}
+```
+
+- Example 3:
+
+```ts
+export default {
+  theme: defaultTheme({
+    // collapsible sidebar
+    sidebar: {
+      '/reference/': [
+        {
+          text: 'VuePress Reference',
+          collapsible: true,
+          children: ['/reference/cli.md', '/reference/config.md'],
+        },
+        {
+          text: 'Bundlers Reference',
+          collapsible: true,
+          children: [
+            '/reference/bundler/vite.md',
+            '/reference/bundler/webpack.md',
+          ],
+        },
+      ],
+    },
+  }),
+}
+```
+
+### sidebarDepth
+
+- Type: `number`
+
+- Default: `2`
+
+- Details:
+
+  Set the maximum depth of the sidebar children which are automatically generated from the page headers.
+
+  - Set to `0` to disable all levels of headers.
+  - Set to `1` to include `<h2>` headers.
+  - Set to `2` to include `<h2>` and `<h3>` headers.
+  - ...
+
+  The max value depends on which levels of headers you have extracted via [markdown.headers.level](../config.md#markdown-headers).
+
+  The default value of `markdown.headers.level` is `[2, 3]`, so the default max value of `sidebarDepth` is `2`.
+
+  You can override this global option via [sidebarDepth](./frontmatter.md#sidebardepth) frontmatter in your pages.
+
+### editLink
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable the _edit this page_ link or not.
+
+  You can override this global option via [editLink](./frontmatter.md#editlink) frontmatter in your pages.
+
+### editLinkText
+
+- Type: `string`
+
+- Default: `'Edit this page'`
+
+- Details:
+
+  Specify the text of the _edit this page_ link.
+
+### editLinkPattern
+
+- Type: `string`
+
+- Details:
+
+  Specify the pattern of the _edit this page_ link.
+
+  This will be used for generating the _edit this page_ link.
+
+  If you don't set this option, the pattern will be inferred from the [docsRepo](#docsrepo) option. But if your documentation repository is not hosted on a common platform, for example, GitHub, GitLab, Bitbucket, Gitee, etc., you have to set this option explicitly to make the _edit this page_ link work.
+
+- Usage:
+
+  | Pattern   | Description                                                                                         |
+  | --------- | --------------------------------------------------------------------------------------------------- |
+  | `:repo`   | The docs repo url, i.e. [docsRepo](#docsrepo)                                                       |
+  | `:branch` | The docs repo branch, i.e. [docsBranch](#docsbranch)                                                |
+  | `:path`   | The path of the page source file, i.e. [docsDir](#docsdir) joins the relative path of the page file |
+
+- Example:
+
+```ts
+export default {
+  theme: defaultTheme({
+    docsRepo: 'https://gitlab.com/owner/name',
+    docsBranch: 'master',
+    docsDir: 'docs',
+    editLinkPattern: ':repo/-/edit/:branch/:path',
+  }),
+}
+```
+
+The generated link will look like `'https://gitlab.com/owner/name/-/edit/master/docs/path/to/file.md'`.
+
+### docsRepo
+
+- Type: `string`
+
+- Details:
+
+  Specify the repository url of your documentation source files.
+
+  This will be used for generating the _edit this page_ link.
+
+  If you don't set this option, it will use the [repo](#repo) option by default. But if your documentation source files are in a different repository, you will need to set this option.
+
+### docsBranch
+
+- Type: `string`
+
+- Default: `'main'`
+
+- Details:
+
+  Specify the repository branch of your documentation source files.
+
+  This will be used for generating the _edit this page_ link.
+
+### docsDir
+
+- Type: `string`
+
+- Default: `''`
+
+- Details:
+
+  Specify the directory of your documentation source files in the repository.
+
+  This will be used for generating the _edit this page_ link.
+
+### lastUpdated
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable the _last updated timestamp_ or not.
+
+  You can override this global option via [lastUpdated](./frontmatter.md#lastupdated) frontmatter in your pages. Notice that if you have already set this option to `false`, this feature will be disabled totally and could not be enabled in locales nor page frontmatter.
+
+### lastUpdatedText
+
+- Type: `string`
+
+- Default: `'Last Updated'`
+
+- Details:
+
+  Specify the text of the _last updated timestamp_ label.
+
+### contributors
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable the _contributors list_ or not.
+
+  You can override this global option via [contributors](./frontmatter.md#contributors) frontmatter in your pages. Notice that if you have already set this option to `false`, this feature will be disabled totally and could not be enabled in locales nor page frontmatter.
+
+### contributorsText
+
+- Type: `string`
+
+- Default: `'Contributors'`
+
+- Details:
+
+  Specify the text of the _contributors list_ label.
+
+### tip
+
+- Type: `string`
+
+- Default: `'TIP'`
+
+- Details:
+
+  Specify the default title of the tip [custom containers](./markdown.md#custom-containers).
+
+### warning
+
+- Type: `string`
+
+- Default: `'WARNING'`
+
+- Details:
+
+  Specify the default title of the warning [custom containers](./markdown.md#custom-containers).
+
+### danger
+
+- Type: `string`
+
+- Default: `'DANGER'`
+
+- Details:
+
+  Specify the default title of the danger [custom containers](./markdown.md#custom-containers).
+
+### notFound
+
+- Type: `string[]`
+
+- Default: `['Not Found']`
+
+- Details:
+
+  Specify the messages of the 404 page.
+
+  The message will be randomly picked from the array when users enter the 404 page.
+
+### backToHome
+
+- Type: `string`
+
+- Default: `'Back to home'`
+
+- Details:
+
+  Specify the text of the _back to home_ link in the 404 page.
+
+### openInNewWindow
+
+- Type: `string`
+
+- Default: `'open in new window'`
+
+- Details:
+
+  Specify the `sr-only` text of the [ExternalLinkIcon](../plugin/external-link-icon.md#externallinkicon).
+
+  This is mainly for a11y purpose.
+
+- Also see:
+  - [Default Theme > Config Reference > themePlugins.externalLinkIcon](#themeplugins-externallinkicon)
+
+### toggleColorMode
+
+- Type: `string`
+
+- Default: `'toggle color mode'`
+
+- Details:
+
+  Title text for the color mode toggle button.
+
+  This is mainly for a11y purpose.
+
+- Also see:
+  - [Default Theme > Config > colorModeSwitch](#colormodeswitch)
+
+### toggleSidebar
+
+- Type: `string`
+
+- Default: `'toggle sidebar'`
+
+- Details:
+
+  Title text for sidebar toggle button.
+
+  This is mainly for a11y purpose.
+
+## Plugins Config
+
+### themePlugins
+
+- Details:
+
+  Configure the plugins that used by default theme.
+
+  Default theme is using some plugins by default. You can disable a plugin if you really do not want to use it. Make sure you understand what the plugin is for before disabling it.
+
+### themePlugins.activeHeaderLinks
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-active-header-links](../plugin/active-header-links.md) or not.
+
+### themePlugins.backToTop
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-back-to-top](../plugin/back-to-top.md) or not.
+
+### themePlugins.container
+
+- Type: `Record<ContainerType, boolean>`
+
+- Details:
+
+  Enable custom containers that powered by [@vuepress/plugin-container](../plugin/container.md) or not.
+
+  `ContainerType` type is:
+
+  - `tip`
+  - `warning`
+  - `danger`
+  - `details`
+  - `codeGroup`
+  - `codeGroupItem`
+
+- Also see:
+  - [Default Theme > Markdown > Custom Containers](./markdown.md#custom-containers)
+
+### themePlugins.externalLinkIcon
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-external-link-icon](../plugin/external-link-icon.md) or not.
+
+### themePlugins.git
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-git](../plugin/git.md) or not.
+
+### themePlugins.mediumZoom
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-medium-zoom](../plugin/medium-zoom.md) or not.
+
+### themePlugins.nprogress
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Enable [@vuepress/plugin-nprogress](../plugin/nprogress.md) or not.
diff --git a/docs/themes/default/extending.md b/docs/themes/default/extending.md
new file mode 100644
index 0000000000..c186b6d486
--- /dev/null
+++ b/docs/themes/default/extending.md
@@ -0,0 +1,118 @@
+# Extending
+
+VuePress default theme is widely used by users, so it is designed to be extendable, allowing users to make their own customization with ease.
+
+## Layout Slots
+
+Default theme's `Layout` provides some slots:
+
+- `navbar`
+- `navbar-before`
+- `navbar-after`
+- `sidebar`
+- `sidebar-top`
+- `sidebar-bottom`
+- `page`
+- `page-top`
+- `page-bottom`
+- `page-content-top`
+- `page-content-bottom`
+
+With the help of them, you can add or replace content easily. Here comes an example to introduce how to extend default theme with layout slots.
+
+Firstly, create a client config file `.vuepress/client.ts`:
+
+```ts
+import { defineClientConfig } from 'vuepress/client'
+import Layout from './layouts/Layout.vue'
+
+export default defineClientConfig({
+  layouts: {
+    Layout,
+  },
+})
+```
+
+Next, create the `.vuepress/layouts/Layout.vue`, and make use of the slots that provided by the `Layout` of default theme:
+
+```vue
+<script setup>
+import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
+</script>
+
+<template>
+  <ParentLayout>
+    <template #page-bottom>
+      <div class="my-footer">This is my custom page footer</div>
+    </template>
+  </ParentLayout>
+</template>
+
+<style lang="css">
+.my-footer {
+  text-align: center;
+}
+</style>
+```
+
+Then the default `Layout` layout has been overridden by your own local layout, which will add a custom footer to every normal pages in default theme (excluding homepage):
+
+![extending-a-theme](/images/cookbook/extending-a-theme-01.png)
+
+## Components Replacement
+
+The layout slots are useful, but sometimes you might find it's not flexible enough. Default theme also provides the ability to replace a single component.
+
+Default theme has registered [alias](../plugin-api.md#alias) for every [non-global components](https://github.com/vuepress/ecosystem/tree/main/themes/theme-default/src/client/components) with a `@theme` prefix. For example, the alias of `HomeFooter.vue` is `@theme/HomeFooter.vue`.
+
+Then, if you want to replace the `HomeFooter.vue` component, just override the alias in your config file `.vuepress/config.ts`:
+
+```ts
+import { defaultTheme } from '@vuepress/theme-default'
+import { getDirname, path } from 'vuepress/utils'
+import { defineUserConfig } from 'vuepress'
+
+const __dirname = getDirname(import.meta.url)
+
+export default defineUserConfig({
+  theme: defaultTheme(),
+  alias: {
+    '@theme/HomeFooter.vue': path.resolve(
+      __dirname,
+      './components/MyHomeFooter.vue',
+    ),
+  },
+})
+```
+
+## Developing a Child Theme
+
+Instead of extending the default theme directly in `.vuepress/config.ts` and `.vuepress/client.ts`, you can also develop your own theme extending the default theme:
+
+```ts
+import { defaultTheme, type DefaultThemeOptions } from '@vuepress/theme-default'
+import type { Theme } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export const childTheme = (options: DefaultThemeOptions): Theme => {
+  return {
+    name: 'vuepress-theme-child',
+    extends: defaultTheme(options),
+
+    // override layouts in child theme's client config file
+    // notice that you would build ts to js before publishing to npm,
+    // so this should be the path to the js file
+    clientConfigFile: path.resolve(__dirname, './client.js'),
+
+    // override component alias
+    alias: {
+      '@theme/HomeFooter.vue': path.resolve(
+        __dirname,
+        './components/MyHomeFooter.vue',
+      ),
+    },
+  }
+}
+```
diff --git a/docs/themes/default/frontmatter.md b/docs/themes/default/frontmatter.md
new file mode 100644
index 0000000000..8c371e4d98
--- /dev/null
+++ b/docs/themes/default/frontmatter.md
@@ -0,0 +1,360 @@
+# Frontmatter
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## All Pages
+
+Frontmatter in this section will take effect in all types of pages.
+
+### externalLinkIcon
+
+- Type: `boolean`
+
+- Details:
+
+  Provided by [@vuepress/plugin-external-link-icon](../plugin/external-link-icon.md#externallinkicon).
+
+- Also see:
+  - [Default Theme > Config Reference > themePlugins.externalLinkIcon](./config.md#themeplugins-externallinkicon)
+
+### navbar
+
+- Type: `boolean`
+
+- Details:
+
+  Show navbar on this page or not.
+
+  If you disable navbar in theme config, this frontmatter will not take effect.
+
+- Also see:
+  - [Default Theme > Config > navbar](./config.md#navbar)
+
+### pageClass
+
+- Type: `string`
+
+- Details:
+
+  Add extra class name to this page.
+
+- Example:
+
+```md
+---
+pageClass: custom-page-class
+---
+```
+
+Then you can customize styles of this page in `.vuepress/styles/index.scss` file:
+
+```scss
+.theme-container.custom-page-class {
+  /* page styles */
+}
+```
+
+- Also see:
+  - [Default Theme > Styles > Style File](./styles.md#style-file)
+
+## Home Page
+
+Frontmatter in this section will only take effect in home pages.
+
+### home
+
+- Type: `boolean`
+
+- Details:
+
+  Specify whether the page is homepage or a normal page.
+
+  If you don't set this frontmatter or set it to `false`, the page would be a [normal page](#normal-page).
+
+- Example:
+
+```md
+---
+home: true
+---
+```
+
+### heroImage
+
+- Type: `string`
+
+- Details:
+
+  Specify the url of the hero image.
+
+- Example:
+
+```md
+---
+# public file path
+heroImage: /images/hero.png
+# url
+heroImage: https://vuejs.org/images/logo.png
+---
+```
+
+- Also see:
+  - [Guide > Assets > Public Files](../../guide/assets.md#public-files)
+
+### heroImageDark
+
+- Type: `string`
+
+- Details:
+
+  Specify the url of hero image to be used in dark mode.
+
+  You can make use of this option if you want to use different heroImage config in dark mode.
+
+- Also see:
+  - [Default Theme > Frontmatter > heroImage](#heroimage)
+  - [Default Theme > Config > colorMode](./config.md#colormode)
+
+### heroAlt
+
+- Type: `string`
+
+- Details:
+
+  Specify the `alt` attribute of the hero image.
+
+  This will fallback to the [heroText](#herotext).
+
+### heroHeight
+
+- Type: `number`
+
+- Default: `280`
+
+- Details:
+
+  Specify the `height` attribute of the hero `<img>` tag.
+
+  You may need to reduce this value if the height of your hero image is less than the default value.
+
+  Notice that the height is also constrained by CSS. This attribute is to reduce [Cumulative Layout Shift (CLS)](https://web.dev/cls/) that caused by the loading of the hero image.
+
+### heroText
+
+- Type: `string | null`
+
+- Details:
+
+  Specify the the hero text.
+
+  This will fallback to the site [title](../config.md#title).
+
+  Set to `null` to disable hero text.
+
+### tagline
+
+- Type: `string | null`
+
+- Details:
+
+  Specify the the tagline.
+
+  This will fallback to the site [description](../config.md#description).
+
+  Set to `null` to disable tagline.
+
+### actions
+
+- Type:
+
+```ts
+Array<{
+  text: string
+  link: string
+  type?: 'primary' | 'secondary'
+}>
+```
+
+- Details:
+
+  Configuration of the action buttons.
+
+- Example:
+
+```md
+---
+actions:
+  - text: Get Started
+    link: /guide/getting-started.html
+    type: primary
+  - text: Introduction
+    link: /guide/introduction.html
+    type: secondary
+---
+```
+
+### features
+
+- Type:
+
+```ts
+Array<{
+  title: string
+  details: string
+}>
+```
+
+- Details:
+
+  Configuration of the features list.
+
+- Example:
+
+```md
+---
+features:
+  - title: Simplicity First
+    details: Minimal setup with markdown-centered project structure helps you focus on writing.
+  - title: Vue-Powered
+    details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
+  - title: Performant
+    details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
+---
+```
+
+### footer
+
+- Type: `string`
+
+- Details:
+
+  Specify the content of the footer.
+
+### footerHtml
+
+- Type: `boolean`
+
+- Details:
+
+  Allow HTML in footer or not.
+
+  If you set it to `true`, the [footer](#footer) will be treated as HTML code.
+
+## Normal Page
+
+Frontmatter in this section will only take effect in normal pages.
+
+### editLink
+
+- Type: `boolean`
+
+- Details:
+
+  Enable the _edit this page_ link in this page or not.
+
+- Also see:
+  - [Default Theme > Config > editLink](./config.md#editlink)
+
+### editLinkPattern
+
+- Type: `string`
+
+- Details:
+
+  Specify the pattern of the _edit this page_ link of this page.
+
+- Also see:
+  - [Default Theme > Config > editLinkPattern](./config.md#editlinkpattern)
+
+### lastUpdated
+
+- Type: `boolean`
+
+- Details:
+
+  Enable the _last updated timestamp_ in this page or not.
+
+- Also see:
+  - [Default Theme > Config > lastUpdated](./config.md#lastupdated)
+
+### contributors
+
+- Type: `boolean`
+
+- Details:
+
+  Enable the _contributors list_ in this page or not.
+
+- Also see:
+  - [Default Theme > Config > contributors](./config.md#contributors)
+
+### sidebar
+
+- Type: `false | 'auto' | SidebarConfigArray | SidebarConfigObject`
+
+- Details:
+
+  Configure the sidebar of this page.
+
+- Also see:
+  - [Default Theme > Config > sidebar](./config.md#sidebar)
+
+### sidebarDepth
+
+- Type: `number`
+
+- Details:
+
+  Configure the sidebar depth of this page.
+
+- Also see:
+  - [Default Theme > Config > sidebarDepth](./config.md#sidebardepth)
+
+### prev
+
+- Type: `NavLink | string`
+
+- Details:
+
+  Specify the link of the previous page.
+
+  If you don't set this frontmatter, the link will be inferred from the sidebar config.
+
+  To configure the prev link manually, you can set this frontmatter to a `NavLink` object or a string:
+
+  - A `NavLink` object should have a `text` field and a `link` field.
+  - A string should be the path to the target page file. It will be converted to a `NavLink` object, whose `text` is the page title, and `link` is the page route path.
+
+- Example:
+
+```md
+---
+# NavLink
+prev:
+  text: Get Started
+  link: /guide/getting-started.html
+
+# NavLink - external url
+prev:
+  text: GitHub
+  link: https://github.com
+
+# string - page file path
+prev: /guide/getting-started.md
+
+# string - page file relative path
+prev: ../../guide/getting-started.md
+---
+```
+
+### next
+
+- Type: `NavLink | string`
+
+- Details:
+
+  Specify the link of the next page.
+
+  If you don't set this frontmatter, the link will be inferred from the sidebar config.
+
+  The type is the same as [prev](#prev) frontmatter.
diff --git a/docs/themes/default/markdown.md b/docs/themes/default/markdown.md
new file mode 100644
index 0000000000..42bf8c0ad2
--- /dev/null
+++ b/docs/themes/default/markdown.md
@@ -0,0 +1,141 @@
+# Markdown
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## Custom Containers
+
+- Usage:
+
+  ```md
+  ::: <type> [title]
+  [content]
+  :::
+  ```
+
+  The `type` is required, and the `title` and `content` are optional.
+
+  Supported `type` :
+
+  - `tip`
+  - `warning`
+  - `danger`
+  - `details`
+  - Alias of [CodeGroup](./components.md#codegroup) and [CodeGroupItem](./components.md#codegroupitem):
+    - `code-group`
+    - `code-group-item`
+
+- Example 1 (default title):
+
+**Input**
+
+```md
+::: tip
+This is a tip
+:::
+
+::: warning
+This is a warning
+:::
+
+::: danger
+This is a dangerous warning
+:::
+
+::: details
+This is a details block
+:::
+```
+
+**Output**
+
+::: tip
+This is a tip
+:::
+
+::: warning
+This is a warning
+:::
+
+::: danger
+This is a dangerous warning
+:::
+
+::: details
+This is a details block
+:::
+
+- Example 2 (custom title):
+
+**Input**
+
+````md
+::: danger STOP
+Danger zone, do not proceed
+:::
+
+::: details Click me to view the code
+
+```ts
+console.log('Hello, VuePress!')
+```
+
+:::
+````
+
+**Output**
+
+::: danger STOP
+Danger zone, do not proceed
+:::
+
+::: details Click me to view the code
+
+```ts
+console.log('Hello, VuePress!')
+```
+
+:::
+
+- Example 3 (code group alias):
+
+**Input**
+
+````md
+:::: code-group
+::: code-group-item FOO
+
+```ts
+const foo = 'foo'
+```
+
+:::
+
+::: code-group-item BAR
+
+```ts
+const bar = 'bar'
+```
+
+:::
+::::
+````
+
+**Output**
+
+:::: code-group
+::: code-group-item FOO
+
+```ts
+const foo = 'foo'
+```
+
+:::
+
+::: code-group-item BAR
+
+```ts
+const bar = 'bar'
+```
+
+:::
+::::
diff --git a/docs/themes/default/styles.md b/docs/themes/default/styles.md
new file mode 100644
index 0000000000..02cce4931b
--- /dev/null
+++ b/docs/themes/default/styles.md
@@ -0,0 +1,40 @@
+# Styles
+
+<NpmBadge package="@vuepress/theme-default" />
+
+The default theme uses [SASS](https://sass-lang.com/) as the CSS pre-processor.
+
+Users can customize style variables via a [palette file](#palette-file),
+and add extra styles via a [style file](#style-file).
+
+## Palette File
+
+The path of the palette file is `.vuepress/styles/palette.scss`.
+
+You can make use of it to override predefined SASS variables of the default theme.
+
+::: details Click to expand SASS variables
+@[code{3-} scss](@vuepress/theme-default/src/client/styles/_variables.scss)
+:::
+
+## Style File
+
+The path of the style file is `.vuepress/styles/index.scss`.
+
+You can add extra styles here, or override the default styles:
+
+```scss
+:root {
+  scroll-behavior: smooth;
+}
+```
+
+You can also make use of it to override predefined CSS variables of the default theme.
+
+::: details Click to expand CSS variables
+@[code scss](@vuepress/theme-default/src/client/styles/vars.scss)
+:::
+
+::: details Click to expand dark mode CSS variables
+@[code scss](@vuepress/theme-default/src/client/styles/vars-dark.scss)
+:::
diff --git a/docs/zh/README.md b/docs/zh/README.md
new file mode 100644
index 0000000000..620992253a
--- /dev/null
+++ b/docs/zh/README.md
@@ -0,0 +1,15 @@
+---
+home: true
+title: 首页
+heroImage: /images/hero.png
+# actions:
+#   - text: 主题
+#     link: ./themes/
+#     type: primary
+
+#   - text: 插件
+#     link: ./plugins/
+#     type: primary
+
+footer: MIT 协议 | 版权所有 © 2018-至今 VuePress 社区
+---
diff --git a/docs/zh/plugins/active-header-links.md b/docs/zh/plugins/active-header-links.md
new file mode 100644
index 0000000000..2cfd5fd742
--- /dev/null
+++ b/docs/zh/plugins/active-header-links.md
@@ -0,0 +1,74 @@
+# active-header-links
+
+<NpmBadge package="@vuepress/plugin-active-header-links" />
+
+该插件会监听页面滚动事件。当页面滚动至某个 _标题锚点_ 后，如果存在对应的 _标题链接_ ，那么该插件会将路由 Hash 更改为该 _标题锚点_ 。
+
+该插件主要用于开发主题，并且已经集成到默认主题中。大部分情况下你不需要直接使用它。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-active-header-links@next
+```
+
+```ts
+import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
+
+export default {
+  plugins: [
+    activeHeaderLinksPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### headerLinkSelector
+
+- 类型： `string`
+
+- 默认值： `'a.sidebar-item'`
+
+- 详情：
+
+  _标题链接_ 的选择器。
+
+  如果一个 _标题锚点_ 没有对应的 _标题链接_ ，那么即使滚动到这个 _标题锚点_ ，该插件也不会更改路由 Hash 。
+
+### headerAnchorSelector
+
+- 类型： `string`
+
+- 默认值： `'.header-anchor'`
+
+- 详情：
+
+  _标题锚点_ 的选择器。
+
+  你通常不需要设置该选项，除非你通过 [markdown.anchor](../config.md#markdown-anchor) 修改了 [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor#readme) 的 `permalinkClass` 选项。
+
+- 参考：
+  - [指南 > Markdown > 语法扩展 > 标题锚点](../../guide/markdown.md#标题锚点)
+
+### delay
+
+- 类型： `number`
+
+- 默认值： `200`
+
+- 详情：
+
+  滚动事件监听器的 Debounce 延迟。
+
+### offset
+
+- 类型： `number`
+
+- 默认值： `5`
+
+- 详情：
+
+  即便直接点击 _标题锚点_ 的链接， `scrollTop` 也可能不会完全等于 _标题锚点_ 的 `offsetTop` ，所以我们添加一个 Offset 偏移量来避免这个误差。
diff --git a/docs/zh/plugins/back-to-top.md b/docs/zh/plugins/back-to-top.md
new file mode 100644
index 0000000000..79de8e14a1
--- /dev/null
+++ b/docs/zh/plugins/back-to-top.md
@@ -0,0 +1,27 @@
+# back-to-top
+
+<NpmBadge package="@vuepress/plugin-back-to-top" />
+
+该插件会给你的站点添加一个 _返回顶部_ 按钮。当页面向下滚动时，该按钮会显示在页面的右下角，点击它就会滚动到页面顶部。
+
+该插件已经集成到默认主题中。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-back-to-top@next
+```
+
+```ts
+import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
+
+export default {
+  plugins: [backToTopPlugin()],
+}
+```
+
+## 样式
+
+你可以通过 CSS 变量来自定义 _返回顶部_ 按钮的样式：
+
+@[code css](@vuepress/plugin-back-to-top/src/client/styles/vars.css)
diff --git a/docs/zh/plugins/container.md b/docs/zh/plugins/container.md
new file mode 100644
index 0000000000..541e47d354
--- /dev/null
+++ b/docs/zh/plugins/container.md
@@ -0,0 +1,165 @@
+# container
+
+<NpmBadge package="@vuepress/plugin-container" />
+
+为你的 VuePress 站点注册自定义容器。
+
+该插件简化了 [markdown-it-container](https://github.com/markdown-it/markdown-it-container) 的使用方法，但同时也保留了其原本的能力。
+
+默认主题的 [自定义容器](../default-theme/markdown.md#自定义容器) 就是由该插件支持的。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-container@next
+```
+
+```ts
+import { containerPlugin } from '@vuepress/plugin-container'
+
+export default {
+  plugins: [
+    containerPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 容器语法
+
+```md
+::: <type> [info]
+[content]
+:::
+```
+
+- `type` 是必需的，应通过 [type](#type) 配置项来指定。
+- `info` 是可选的，其默认值可以通过 [locales](#locales) 的 `defaultInfo` 配置项来指定。
+- `content` 可是任何合法的 Markdown 内容。
+
+::: tip
+该插件可以被多次使用，以便支持不同类型的容器。
+:::
+
+## 配置项
+
+### type
+
+- 类型： `string`
+
+- 详情：
+
+  容器的类型。
+
+  它将会被用作 [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `name` 参数。
+
+### locales
+
+- 类型： `Record<string, { defaultInfo: string }>`
+
+- 详情：
+
+  容器在不同 locales 下的默认 `info` 。
+
+  如果没有指定该配置项，默认 `info` 会使用大写的 [type](#type) 。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    containerPlugin({
+      type: 'tip',
+      locales: {
+        '/': {
+          defaultInfo: 'TIP',
+        },
+        '/zh/': {
+          defaultInfo: '提示',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+### before
+
+- 类型： `(info: string) => string`
+
+- 默认值：
+
+<!-- prettier-ignore-start -->
+```ts
+(info: string): string =>
+  `<div class="custom-container ${type}">${info ? `<p class="custom-container-title">${info}</p>` : ''}\n`
+```
+<!-- prettier-ignore-end -->
+
+- 详情：
+
+  一个用于渲染容器起始标签的函数。
+
+  第一个参数是 [容器语法](#容器语法) 的 `info` 部分。
+
+  如果你没有设置 [after](#after) 配置项，则该配置项也不会生效。
+
+### after
+
+- 类型： `(info: string) => string`
+
+- 默认值：
+
+<!-- prettier-ignore-start -->
+```ts
+(): string => '</div>\n'
+```
+<!-- prettier-ignore-end -->
+
+- 详情：
+
+  一个用于渲染容器结束标签的函数。
+
+  第一个参数是 [容器语法](#容器语法) 的 `info` 部分。
+
+  如果你没有设置 [before](#before) 配置项，则该配置项也不会生效。
+
+### render
+
+- 类型：
+
+```ts
+type MarkdownItContainerRenderFunction = (
+  tokens: Token[],
+  index: number,
+  options: any,
+  env: MarkdownEnv,
+  self: Renderer,
+) => string
+```
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `render` 配置项。
+
+  该插件使用了一个默认的 `render` 函数。但如果你指定了该配置项，那么默认的 `render` 函数就会被替换掉，此时 [locales](#locales) 、 [before](#before) 和 [after](#after) 配置项都会被忽略。
+
+### validate
+
+- 类型： `(params: string) => boolean`
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `validate` 配置项。
+
+### marker
+
+- 类型： `string`
+
+- 详情：
+
+  [markdown-it-container](https://github.com/markdown-it/markdown-it-container#api) 的 `marker` 配置项。
diff --git a/docs/zh/plugins/docsearch.md b/docs/zh/plugins/docsearch.md
new file mode 100644
index 0000000000..1bf2b05ac0
--- /dev/null
+++ b/docs/zh/plugins/docsearch.md
@@ -0,0 +1,410 @@
+# docsearch
+
+<NpmBadge package="@vuepress/plugin-docsearch" />
+
+将 [Algolia DocSearch](https://docsearch.algolia.com/) 集成到 VuePress 中，为你的文档网站提供搜索功能。
+
+::: tip
+当你正确配置该插件后，默认主题会把 DocSearch 按钮添加到导航栏。
+
+该插件不一定能在其他主题中直接使用，因此你应参考主题本身的文档来获取更多信息。
+:::
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-docsearch@next
+```
+
+```ts
+import { docsearchPlugin } from '@vuepress/plugin-docsearch'
+
+export default {
+  plugins: [
+    docsearchPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 获取搜索索引
+
+你需要 [提交你的网站 URL](https://docsearch.algolia.com/apply/) 来加入 DocSearch 项目。当你的索引成功创建后， DocSearch 团队会将 [apiKey](#apikey) 和 [indexName](#indexname) 发送到你的邮箱。接下来，你就可以配置该插件，在 VuePress 中启用 DocSearch 了。
+
+或者，你也可以 [运行你自己的爬虫](https://docsearch.algolia.com/docs/run-your-own/) 来创建索引，然后使用你自己的 [appId](#appId), [apiKey](#apikey) 和 [indexName](#indexname) 来配置该插件。
+
+::: details 官方爬虫配置示例
+
+```js{34-49,57}
+new Crawler({
+  appId: 'YOUR_APP_ID',
+  apiKey: 'YOUR_API_KEY',
+  rateLimit: 8,
+  startUrls: [
+    // 这是 Algolia 开始抓取网站的初始地址
+    // 如果你的网站被分为数个独立部分，你可能需要在此设置多个入口链接
+    'https://YOUR_WEBSITE_URL/',
+  ],
+  sitemaps: [
+    // 如果你在使用 Sitemap 插件 (如: vuepress-plugin-sitemap2)，你可以提供 Sitemap 链接
+    'https://YOUR_WEBSITE_URL/sitemap.xml',
+  ],
+  ignoreCanonicalTo: false,
+  exclusionPatterns: [
+    // 你可以通过它阻止 Algolia 抓取某些 URL
+  ],
+  discoveryPatterns: [
+    // 这是 Algolia 抓取 URL 的范围
+    'https://YOUR_WEBSITE_URL/**',
+  ],
+  // 爬虫执行的计划时间，可根据文档更新频率设置
+  schedule: 'at 02:00 every 1 day',
+  actions: [
+    // 你可以拥有多个 action，特别是你在一个域名下部署多个文档时
+    {
+      // 使用适当的名称为索引命名
+      indexName: 'YOUR_INDEX_NAME',
+      // 索引生效的路径
+      pathsToMatch: ['https://YOUR_WEBSITE_URL/**'],
+      // 控制 Algolia 如何抓取你的站点
+      recordExtractor: ({ $, helpers }) => {
+        // @vuepress/theme-default 的选项
+        return helpers.docsearch({
+          recordProps: {
+            lvl0: {
+              selectors: '.sidebar-heading.active',
+              defaultValue: 'Documentation',
+            },
+            lvl1: '.theme-default-content h1',
+            lvl2: '.theme-default-content h2',
+            lvl3: '.theme-default-content h3',
+            lvl4: '.theme-default-content h4',
+            lvl5: '.theme-default-content h5',
+            lvl6: '.theme-default-content h6',
+            content: '.theme-default-content p, .theme-default-content li',
+          },
+          indexHeadings: true,
+        })
+      },
+    },
+  ],
+  initialIndexSettings: {
+    // 控制索引如何被初始化，这仅当索引尚未生成时有效
+    // 你可能需要在修改后手动删除并重新生成新的索引
+    YOUR_INDEX_NAME: {
+      attributesForFaceting: ['type', 'lang'],
+      attributesToRetrieve: ['hierarchy', 'content', 'anchor', 'url'],
+      attributesToHighlight: ['hierarchy', 'hierarchy_camel', 'content'],
+      attributesToSnippet: ['content:10'],
+      camelCaseAttributes: ['hierarchy', 'hierarchy_radio', 'content'],
+      searchableAttributes: [
+        'unordered(hierarchy_radio_camel.lvl0)',
+        'unordered(hierarchy_radio.lvl0)',
+        'unordered(hierarchy_radio_camel.lvl1)',
+        'unordered(hierarchy_radio.lvl1)',
+        'unordered(hierarchy_radio_camel.lvl2)',
+        'unordered(hierarchy_radio.lvl2)',
+        'unordered(hierarchy_radio_camel.lvl3)',
+        'unordered(hierarchy_radio.lvl3)',
+        'unordered(hierarchy_radio_camel.lvl4)',
+        'unordered(hierarchy_radio.lvl4)',
+        'unordered(hierarchy_radio_camel.lvl5)',
+        'unordered(hierarchy_radio.lvl5)',
+        'unordered(hierarchy_radio_camel.lvl6)',
+        'unordered(hierarchy_radio.lvl6)',
+        'unordered(hierarchy_camel.lvl0)',
+        'unordered(hierarchy.lvl0)',
+        'unordered(hierarchy_camel.lvl1)',
+        'unordered(hierarchy.lvl1)',
+        'unordered(hierarchy_camel.lvl2)',
+        'unordered(hierarchy.lvl2)',
+        'unordered(hierarchy_camel.lvl3)',
+        'unordered(hierarchy.lvl3)',
+        'unordered(hierarchy_camel.lvl4)',
+        'unordered(hierarchy.lvl4)',
+        'unordered(hierarchy_camel.lvl5)',
+        'unordered(hierarchy.lvl5)',
+        'unordered(hierarchy_camel.lvl6)',
+        'unordered(hierarchy.lvl6)',
+        'content',
+      ],
+      distinct: true,
+      attributeForDistinct: 'url',
+      customRanking: [
+        'desc(weight.pageRank)',
+        'desc(weight.level)',
+        'asc(weight.position)',
+      ],
+      ranking: [
+        'words',
+        'filters',
+        'typo',
+        'attribute',
+        'proximity',
+        'exact',
+        'custom',
+      ],
+      highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
+      highlightPostTag: '</span>',
+      minWordSizefor1Typo: 3,
+      minWordSizefor2Typos: 7,
+      allowTyposOnNumericTokens: false,
+      minProximity: 1,
+      ignorePlurals: true,
+      advancedSyntax: true,
+      attributeCriteriaComputedByMinProximity: true,
+      removeWordsIfNoResults: 'allOptional',
+    },
+  },
+})
+```
+
+上述 `recordProps` 是用于默认主题的配置，你可以根据你使用的主题来修改它们。
+
+注意 `initialIndexSettings.YOUR_INDEX_NAME.attributesForFaceting` 字段**必须**包含 `'lang'`，否则该插件将无法正常工作。
+
+:::
+
+::: tip
+如果你使用的不是默认主题，或者在使用 Docsearch 的时候遇到了任何问题，你也可以检查上述的爬虫配置示例，然后前往 [Algolia Crawler](https://crawler.algolia.com/admin/crawlers/) 仓库，在你项目侧边栏中的 Editor 页面中修改你的配置。
+:::
+
+## 配置项
+
+### apiKey
+
+- 类型： `string`
+
+- 是否必需： `true`
+
+- 详情：
+
+  从 DocSearch 团队收到的 `apiKey` ，或者由你自己生成。
+
+- 参考：
+  - [DocSearch > Options > apiKey](https://docsearch.algolia.com/docs/api#apikey)
+
+### indexName
+
+- 类型： `string`
+
+- 是否必需： `true`
+
+- 详情：
+
+  从 DocSearch 团队收到的 `indexName` ，或者由你自己生成。
+
+- 参考：
+  - [DocSearch > Options > indexName](https://docsearch.algolia.com/docs/api#indexname)
+
+### appId
+
+- 类型： `string`
+
+- 是否必需： `true`
+
+- 详情：
+
+  用于设置你的 Application ID。
+
+- 参考：
+  - [DocSearch > Options > appId](https://docsearch.algolia.com/docs/api#appid)
+
+### searchParameters
+
+- 类型： `SearchParameters`
+
+- 详情：
+
+  Algolia 搜索 API 参数。
+
+- 参考：
+  - [DocSearch > Options > searchParameters](https://docsearch.algolia.com/docs/api/#searchparameters)
+  - [Algolia > Search API Parameters](https://www.algolia.com/doc/api-reference/search-api-parameters/)
+
+### placeholder
+
+- 类型： `string`
+
+- 默认值： `'Search docs'`
+
+- 详情：
+
+  搜索输入框的 placeholder 属性。
+
+- 参考：
+  - [DocSearch > Options > placeholder](https://docsearch.algolia.com/docs/api#placeholder)
+
+### disableUserPersonalization
+
+- 类型： `boolean`
+
+- 默认值： `false`
+
+- 详情：
+
+  是否禁用所有的个性化功能：最近的搜索、收藏的搜索结果等。
+
+- 参考：
+  - [DocSearch > Options > disableUserPersonalization](https://docsearch.algolia.com/docs/api#disableuserpersonalization)
+
+### initialQuery
+
+- 类型： `string`
+
+- 详情：
+
+  打开弹窗时的初始请求。
+
+- 参考：
+  - [DocSearch > Options > initialQuery](https://docsearch.algolia.com/docs/api#initialquery)
+
+### translations
+
+- 类型： `Partial<DocSearchTranslations>`
+
+- 详情：
+
+  允许替换 DocSearch 按钮和弹窗内的默认文字。
+
+- 参考：
+  - [DocSearch > Options > translations](https://docsearch.algolia.com/docs/api/#translations)
+
+### locales
+
+- 类型： `Record<string, DocsearchPluginOptions>`
+
+- 详情：
+
+  在不同 locales 下对该插件进行不同的配置。
+
+  该插件的所有其他选项都可以在 locale 中进行配置。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    docsearchPlugin({
+      appId: '<APP_ID>',
+      apiKey: '<API_KEY>',
+      indexName: '<INDEX_NAME>',
+      locales: {
+        '/': {
+          placeholder: 'Search Documentation',
+          translations: {
+            button: {
+              buttonText: 'Search Documentation',
+            },
+          },
+        },
+        '/zh/': {
+          placeholder: '搜索文档',
+          translations: {
+            button: {
+              buttonText: '搜索文档',
+            },
+          },
+        },
+      },
+    }),
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+### indexBase
+
+- 类型： `string`
+
+- 默认值： [base](../config.md#base)
+
+- 详情：
+
+  搜索索引基础路径。
+
+  如果你需要把你的站点部署到不同的域名上，你不需要把它们全都提交到 Docsearch 上来分别生成搜索索引。你可以选择其中一个域名作为 _索引域名_ ，并且仅将 _索引域名_ 提交到 DocSearch 上来爬去搜索索引。然后，你就可以在不同的部署域名下复用索引。
+
+  如果你不同部署域名下的 [base](../config.md#base) 是不一样的，你就需要将这个配置设置成 _索引域名_ 的 [base](../config.md#base) ，这样其他的部署域名就可以正确复用索引了。
+
+### injectStyles
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否注入 DocSearch 的默认样式。
+
+  如果你认为 DocSearch 的默认样式和你的站点不兼容，你可以尝试覆盖默认样式，或者将该选项设置为 `false` 来完全移除默认样式。
+
+  当该选项被禁用时，你需要为 DocSearch 引入你自己的样式。同时要注意，你也无法再使用 [样式](#样式) 章节中提到的样式自定义能力。
+
+## 样式
+
+你可以通过 [@docsearch/css](https://docsearch.algolia.com/docs/styling) 提供的 CSS 变量来自定义样式：
+
+```css
+:root {
+  --docsearch-primary-color: rgb(84, 104, 255);
+  --docsearch-text-color: rgb(28, 30, 33);
+  --docsearch-spacing: 12px;
+  --docsearch-icon-stroke-width: 1.4;
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-muted-color: rgb(150, 159, 175);
+  --docsearch-container-background: rgba(101, 108, 133, 0.8);
+  --docsearch-logo-color: rgba(84, 104, 255);
+
+  /* modal */
+  --docsearch-modal-width: 560px;
+  --docsearch-modal-height: 600px;
+  --docsearch-modal-background: rgb(245, 246, 247);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 0 3px
+      8px 0 rgba(85, 90, 100, 1);
+
+  /* searchbox */
+  --docsearch-searchbox-height: 56px;
+  --docsearch-searchbox-background: rgb(235, 237, 240);
+  --docsearch-searchbox-focus-background: #fff;
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+
+  /* hit */
+  --docsearch-hit-height: 56px;
+  --docsearch-hit-color: rgb(68, 73, 80);
+  --docsearch-hit-active-color: #fff;
+  --docsearch-hit-background: #fff;
+  --docsearch-hit-shadow: 0 1px 3px 0 rgb(212, 217, 225);
+
+  /* key */
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    rgb(213, 219, 228) 0%,
+    rgb(248, 248, 248) 100%
+  );
+  --docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230), inset 0 0 1px 1px
+      #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
+
+  /* footer */
+  --docsearch-footer-height: 44px;
+  --docsearch-footer-background: #fff;
+  --docsearch-footer-shadow: 0 -1px 0 0 rgb(224, 227, 232), 0 -3px 6px 0 rgba(69, 98, 155, 0.12);
+}
+```
+
+## 组件
+
+### Docsearch
+
+- 详情：
+
+  该插件会全局注册一个 `<Docsearch />` 组件，你可以不传入任何 Props 来使用它。
+
+  将该组件放置在你想要显示 docsearch 按钮的地方。例如，默认主题将这个组件放在了导航栏的末尾。
+
+::: tip
+该组件主要用于主题开发。在大多数情况下你不需要直接使用该组件。
+:::
diff --git a/docs/zh/plugins/external-link-icon.md b/docs/zh/plugins/external-link-icon.md
new file mode 100644
index 0000000000..a3582ffea0
--- /dev/null
+++ b/docs/zh/plugins/external-link-icon.md
@@ -0,0 +1,87 @@
+# external-link-icon
+
+<NpmBadge package="@vuepress/plugin-external-link-icon" />
+
+该插件会为你 Markdown 内容中的外部链接添加一个图标，即 <ExternalLinkIcon />
+
+该插件已经集成到默认主题中。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-external-link-icon@next
+```
+
+```ts
+import { externalLinkIconPlugin } from '@vuepress/plugin-external-link-icon'
+
+export default {
+  plugins: [
+    externalLinkIconPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### locales
+
+- 类型： `Record<string, { openInNewWindow: string }>`
+
+- 详情：
+
+  外部链接图标在不同 locales 下的 A11y 文字。
+
+  如果没有指定该配置项，它会降级使用默认文字。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    externalLinkIconPlugin({
+      locales: {
+        '/': {
+          openInNewWindow: 'open in new window',
+        },
+        '/zh/': {
+          openInNewWindow: '在新窗口打开',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+## Frontmatter
+
+### externalLinkIcon
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否在当前页面的外部链接的后面添加外部链接图标。
+
+## 样式
+
+你可以通过 CSS 变量来自定义外部链接图标的样式：
+
+@[code css](@vuepress/plugin-external-link-icon/src/client/styles/vars.css)
+
+## 组件
+
+### ExternalLinkIcon
+
+- 详情：
+
+  该插件会全局注册一个 `<ExternalLinkIcon />` 组件，你可以不传入任何 Props 来使用它。
+
+::: tip
+该组件主要用于主题开发。在大多数情况下你不需要直接使用该组件。
+:::
diff --git a/docs/zh/plugins/git.md b/docs/zh/plugins/git.md
new file mode 100644
index 0000000000..1419b325c1
--- /dev/null
+++ b/docs/zh/plugins/git.md
@@ -0,0 +1,145 @@
+# git
+
+<NpmBadge package="@vuepress/plugin-git" />
+
+该插件会收集你的页面的 Git 信息，包括创建和更新时间、贡献者等。
+
+默认主题的 [lastUpdated](../default-theme/config.md#lastupdated) 和 [contributors](../default-theme/config.md#contributors) 就是由该插件支持的。
+
+该插件主要用于开发主题，大部分情况下你不需要直接使用它。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-git@next
+```
+
+```ts
+import { gitPlugin } from '@vuepress/plugin-git'
+
+export default {
+  plugins: [
+    gitPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## Git 仓库
+
+该插件要求你的项目在 [Git 仓库](https://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository) 下，这样它才能从提交历史记录中收集信息。
+
+在构建站点时，你应该确保所有的提交记录是可以获取到的。举例来说， CI 工作流通常会在克隆你的仓库时添加 [--depth 1](https://git-scm.com/docs/git-clone#Documentation/git-clone.txt---depthltdepthgt) 参数来避免拉取全部的提交记录，因此你需要禁用这个功能，以便该插件在 CI 可以中正常使用。
+
+::: warning
+该插件会显著降低准备数据的速度，特别是在你的页面数量很多的时候。你可以考虑在 `dev` 模式下禁用该插件来获取更好的开发体验。
+:::
+
+## 配置项
+
+### createdTime
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否收集页面的创建时间。
+
+### updatedTime
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否收集页面的更新时间。
+
+### contributors
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否收集页面的贡献者。
+
+## Frontmatter
+
+### gitInclude
+
+- 类型： `string[]`
+
+- 详情：
+
+  文件相对路径组成的数组，该数组中的文件会在计算页面数据时被包含在内。
+
+- 示例：
+
+```md
+---
+gitInclude:
+  - relative/path/to/file1
+  - relative/path/to/file2
+---
+```
+
+## 页面数据
+
+该插件会向页面数据中添加一个 `git` 字段。
+
+在使用该插件后，可以在页面数据中获取该插件收集到的 Git 信息：
+
+```ts
+import type { GitPluginPageData } from '@vuepress/plugin-git'
+import { usePageData } from 'vuepress/client'
+
+export default {
+  setup() {
+    const page = usePageData<GitPluginPageData>()
+    console.log(page.value.git)
+  },
+}
+```
+
+### git.createdTime
+
+- 类型： `number`
+
+- 详情：
+
+  页面第一次提交的 Unix 毫秒时间戳。
+
+  该属性将取当前页面及 [gitInclude](#gitinclude) 中所列文件的第一次提交的时间戳的最小值。
+
+### git.updatedTime
+
+- 类型： `number`
+
+- 详情：
+
+  页面最后一次提交的 Unix 毫秒时间戳。
+
+  该属性将取当前页面及 [gitInclude](#gitinclude) 中所列文件的最后一次提交的时间戳的最大值。
+
+### git.contributors
+
+- 类型： `GitContributor[]`
+
+```ts
+interface GitContributor {
+  name: string
+  email: string
+  commits: number
+}
+```
+
+- 详情：
+
+  页面的贡献者信息。
+
+  该属性将会包含 [gitInclude](#gitinclude) 所列文件的贡献者。
diff --git a/docs/zh/plugins/google-analytics.md b/docs/zh/plugins/google-analytics.md
new file mode 100644
index 0000000000..05e6939c7f
--- /dev/null
+++ b/docs/zh/plugins/google-analytics.md
@@ -0,0 +1,78 @@
+# google-analytics
+
+<NpmBadge package="@vuepress/plugin-google-analytics" />
+
+将 [Google Analytics](https://analytics.google.com/) 集成到 VuePress 中。
+
+该插件会通过引入 [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs) 来启用 [Google Analytics 4](https://support.google.com/analytics/answer/10089681) 。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-google-analytics@next
+```
+
+```ts
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
+
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 上报事件
+
+Google Analytics 会 [自动收集部分事件](https://support.google.com/analytics/answer/9234069) ，比如 `page_view`, `first_visit` 等。
+
+因此，如果你只是想收集站点的一些基础数据，你只需要正确设置 [Measurement ID](#id) ，不需要再额外做其他事情。
+
+在引入该插件之后，一个全局的 `gtag()` 函数会被挂载到 `window` 对象上，你可以使用它进行 [自定义事件的上报](https://developers.google.com/analytics/devguides/collection/ga4/events) 。
+
+## 配置项
+
+### id
+
+- 类型： `string`
+
+- 详情：
+
+  Google Analytics 4 的 Measurement ID ，应以 `'G-'` 开头。
+
+  你可以通过 [这里](https://support.google.com/analytics/answer/9539598) 的指引来找到你的 Measurement ID 。注意区分 Google Analytics 4 的 Measurement ID （即 "G-" 开头的 ID） 和 Universal Analytics 的 Tracking ID （即 "UA-" 开头的 ID）。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      id: 'G-XXXXXXXXXX',
+    }),
+  ],
+}
+```
+
+### debug
+
+- 类型： `boolean`
+
+- 详情：
+
+  设置为 `true` 可以向 DebugView 发送事件。[了解更多关于 DebugView 的信息](https://support.google.com/analytics/answer/7201382) 。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    googleAnalyticsPlugin({
+      id: 'G-XXXXXXXXXX',
+      debug: true,
+    }),
+  ],
+}
+```
diff --git a/docs/zh/plugins/medium-zoom.md b/docs/zh/plugins/medium-zoom.md
new file mode 100644
index 0000000000..293eb6a2c2
--- /dev/null
+++ b/docs/zh/plugins/medium-zoom.md
@@ -0,0 +1,100 @@
+# medium-zoom
+
+<NpmBadge package="@vuepress/plugin-medium-zoom" />
+
+将 [medium-zoom](https://github.com/francoischalifour/medium-zoom#readme) 集成到 VuePress 中，为图片提供可缩放的功能。
+
+该插件已经集成到默认主题中。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-medium-zoom@next
+```
+
+```ts
+import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
+
+export default {
+  plugins: [
+    mediumZoomPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### selector
+
+- 类型： `string`
+
+- 默认值： `':not(a) > img'`
+
+- 详情：
+
+  可缩放的图片的选择器。
+
+  默认情况下，该插件会使 `<a>` 标签以外的所有图片都支持缩放。
+
+### delay
+
+- 类型： `number`
+
+- 默认值： `500`
+
+- 详情：
+
+  以毫秒为单位的延迟。
+
+  在切换路由进入一个新页面时，该插件会在一定延迟后才使页面内的图片支持缩放。
+
+### zoomOptions
+
+- 类型： `Object`
+
+- 详情：
+
+  medium-zoom 的配置项。
+
+- 参考：
+  - [medium-zoom > Options](https://github.com/francoischalifour/medium-zoom#options)
+
+## 样式
+
+你可以通过 [zoomOptions](#zoomoptions) 对大部分的缩放样式进行自定义，不过作为补充，该插件同样提供了一些 CSS 变量：
+
+@[code css](@vuepress/plugin-medium-zoom/src/client/styles/vars.css)
+
+## Composition API
+
+### useMediumZoom
+
+- 详情：
+
+  返回该插件使用的 `Zoom` 实例，便于你直接使用实例上的 [methods](https://github.com/francoischalifour/medium-zoom#methods) 。
+
+  该插件会在切换路由进入当前页面时使图片支持缩放。但如果你要动态添加新图片，那么你可能就需要这个方法来让这些新图片也支持缩放。
+
+  该插件在 `Zoom` 实例上额外添加了一个 `refresh` 方法，它将使用 [selector](#selector) 作为默认参数，先调用 `zoom.detach()` 再调用 `zoom.attach()` ，便于你快速刷新当前页面图片的缩放状态。
+
+- 示例：
+
+```ts
+import { nextTick } from 'vue'
+import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
+
+export default {
+  setup() {
+    const zoom = useMediumZoom()
+
+    // ... 进行了一些操作，在当前页面添加了新的图片
+
+    // 此时你可能需要手动调用 `refresh` 来让这些新图片支持缩放
+    nextTick(() => {
+      zoom.refresh()
+    })
+  },
+}
+```
diff --git a/docs/zh/plugins/nprogress.md b/docs/zh/plugins/nprogress.md
new file mode 100644
index 0000000000..2e1a600bf9
--- /dev/null
+++ b/docs/zh/plugins/nprogress.md
@@ -0,0 +1,35 @@
+---
+title: nprogress
+---
+
+<!-- `# nprogress` 会被渲染成 `<h1 id="nprogress">` ，导致 id 和 nprogress 进度条冲突 （有点蠢） -->
+
+<!-- 所以我们在 h1 标题后添加一个 '插件' 后缀，然后通过 title frontmatter 来设置页面标题 -->
+
+# nprogress 插件
+
+<NpmBadge package="@vuepress/plugin-nprogress" />
+
+将 [nprogress](https://github.com/rstacruz/nprogress) 集成到 VuePress 中，在切换到另一个页面时会展示进度条。
+
+该插件已经集成到默认主题中。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-nprogress@next
+```
+
+```ts
+import { nprogressPlugin } from '@vuepress/plugin-nprogress'
+
+export default {
+  plugins: [nprogressPlugin()],
+}
+```
+
+## 样式
+
+你可以通过 CSS 变量来自定义进度条的样式：
+
+@[code css](@vuepress/plugin-nprogress/src/client/styles/vars.css)
diff --git a/docs/zh/plugins/palette.md b/docs/zh/plugins/palette.md
new file mode 100644
index 0000000000..3499c9948c
--- /dev/null
+++ b/docs/zh/plugins/palette.md
@@ -0,0 +1,203 @@
+# palette
+
+<NpmBadge package="@vuepress/plugin-palette" />
+
+为你的主题提供调色板功能。
+
+该插件主要用于开发主题，并且已经集成到默认主题中。大部分情况下你不需要直接使用它。
+
+对于主题作者，该插件可以帮助你提供用户自定义样式的能力。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-palette@next
+```
+
+```ts
+import { palettePlugin } from '@vuepress/plugin-palette'
+
+export default {
+  plugins: [
+    palettePlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 调色板和样式
+
+该插件会提供一个 `@vuepress/plugin-palette/palette` （调色板文件）和一个 `@vuepress/plugin-palette/style` （样式文件），用于在你的主题样式中引入。
+
+调色板文件用于定义样式变量，因此它一般会在你主题样式的开头引入。举例来说，用户可以在调色板中定义 [CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) 、 [SASS 变量](https://sass-lang.com/documentation/variables) 、 [LESS 变量](http://lesscss.org/features/#variables-feature) 或 [Stylus 变量](https://stylus-lang.com/docs/variables.html) ，然后你可以在你的主题样式中使用这些变量。
+
+样式文件用于覆盖默认样式或添加额外样式，因此它一般会在你主题样式的末尾引入。
+
+## 使用
+
+在你的主题中使用该插件，假设你使用 SASS 作为 CSS 预处理器：
+
+```ts
+export default {
+  // ...
+  plugins: [palettePlugin({ preset: 'sass' })],
+}
+```
+
+### 使用调色板
+
+在你主题需要使用对应变量的地方引入该插件的调色板文件，比如在 `Layout.vue` 中：
+
+```vue
+<template>
+  <h1 class="palette-title">你好，调色板！</h1>
+</template>
+
+<style lang="scss">
+/* 从该插件的调色板中引入变量 */
+@import '@vuepress/plugin-palette/palette';
+
+/* 设置变量的默认值 */
+$color: red !default;
+
+/* 在你的样式中使用变量 */
+.palette-title {
+  color: $color;
+}
+</style>
+```
+
+然后，用户就可以在 `.vuepress/styles/palette.scss` 中自定义变量：
+
+```scss
+$color: green;
+```
+
+### 使用样式
+
+在你主题的样式之后引入该插件的样式文件，比如在 `clientConfigFile` 中：
+
+```ts
+// 引入你主题本身的样式文件
+import 'path/to/your/theme/style'
+// 引入该插件的样式文件
+import '@vuepress/plugin-palette/style'
+```
+
+然后，用户就可以在 `.vuepress/styles/index.scss` 中添加额外样式，并可以覆盖你主题本身的样式：
+
+```scss
+h1 {
+  font-size: 2.5rem;
+}
+```
+
+## 配置项
+
+### preset
+
+- 类型： `'css' | 'sass' | 'less' | 'stylus'`
+
+- 默认值： `'css'`
+
+- 详情：
+
+  设置其他选项的预设。
+
+  如果你没有对该插件进行进阶定制化的需要，建议只设置该配置项并忽略其他选项。
+
+### userPaletteFile
+
+- 类型： `string`
+
+- 默认值：
+
+  - css: `'.vuepress/styles/palette.css'`
+  - sass: `'.vuepress/styles/palette.scss'`
+  - less: `'.vuepress/styles/palette.less'`
+  - stylus: `'.vuepress/styles/palette.styl'`
+
+- 详情：
+
+  用户调色板文件的路径，是针对源文件目录的相对路径。
+
+  默认值依赖于 [preset](#preset) 配置项。
+
+  该文件用于用户定义样式变量，建议保持默认值作为约定的文件路径。
+
+### tempPaletteFile
+
+- 类型： `string`
+
+- 默认值：
+
+  - css: `'styles/palette.css'`
+  - sass: `'styles/palette.scss'`
+  - less: `'styles/palette.less'`
+  - stylus: `'styles/palette.styl'`
+
+- 详情：
+
+  生成的调色板临时文件的路径，是针对临时文件文件目录的相对路径。
+
+  默认值依赖于 [preset](#preset) 配置项。
+
+  你应该使用 `'@vuepress/plugin-palette/palette'` 别名来引入调色板文件，因此在绝大多数情况下你不需要修改该配置项。
+
+### userStyleFile
+
+- 类型： `string`
+
+- 默认值：
+
+  - css: `'.vuepress/styles/index.css'`
+  - sass: `'.vuepress/styles/index.scss'`
+  - less: `'.vuepress/styles/index.less'`
+  - stylus: `'.vuepress/styles/index.styl'`
+
+- 详情：
+
+  用户样式文件的路径，是针对源文件目录的相对路径。
+
+  默认值依赖于 [preset](#preset) 配置项。
+
+  该文件用于用户覆盖默认样式和添加额外样式，建议保持默认值作为约定的文件路径。
+
+### tempStyleFile
+
+- 类型： `string`
+
+- 默认值：
+
+  - css: `'styles/index.css'`
+  - sass: `'styles/index.scss'`
+  - less: `'styles/index.less'`
+  - stylus: `'styles/index.styl'`
+
+- 详情：
+
+  生成的样式临时文件的路径，是针对临时文件文件目录的相对路径。
+
+  默认值依赖于 [preset](#preset) 配置项。
+
+  你应该使用 `'@vuepress/plugin-palette/style'` 别名来引入样式文件，因此在绝大多数情况下你不需要修改该配置项。
+
+### importCode
+
+- 类型： `(filePath: string) => string`
+
+- 默认值：
+
+  - css: `` (filePath) => `@import '${filePath}';\n` ``
+  - sass: `` (filePath) => `@forward 'file:///${filePath}';\n` ``
+  - less: `` (filePath) => `@import '${filePath}';\n` ``
+  - stylus: `` (filePath) => `@require '${filePath}';\n` ``
+
+- 详情：
+
+  用于生成引入代码的函数。
+
+  默认值依赖于 [preset](#preset) 配置项。
+
+  该配置项用于生成 [tempPaletteFile](#temppalettefile) 和 [tempStyleFile](#tempstylefile) ，在绝大多数情况下你不需要修改该配置项。
diff --git a/docs/zh/plugins/prismjs.md b/docs/zh/plugins/prismjs.md
new file mode 100644
index 0000000000..3d52c278b6
--- /dev/null
+++ b/docs/zh/plugins/prismjs.md
@@ -0,0 +1,43 @@
+# prismjs
+
+<NpmBadge package="@vuepress/plugin-prismjs" />
+
+该插件使用 [Prism.js](https://prismjs.com/) 来为 Markdown 代码块启用代码高亮。
+
+该插件已经集成到默认主题中。
+
+需要注意的是，该插件仅会给代码块添加 HTML 标记，而不会添加样式。当你在一个自定义主题中使用它时，可能需要自己选择并引入 Prism.js 样式主题。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-prismjs@next
+```
+
+```ts
+import { prismjsPlugin } from '@vuepress/plugin-prismjs'
+
+export default {
+  plugins: [
+    prismjsPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### preloadLanguages
+
+- 类型： `string[]`
+
+- 默认值： `['markdown', 'jsdoc', 'yaml']`
+
+- 详情：
+
+  需要预加载的语言。
+
+  默认情况下，语言会在解析 Markdown 文件时按需加载。
+
+  然而， Prism.js 在动态加载语言时可能会遇到 [一些潜在的问题](https://github.com/PrismJS/prism/issues/2716) 。为了避免这些问题，你可以使用该配置项来预加载一些语言。
diff --git a/docs/zh/plugins/pwa-popup.md b/docs/zh/plugins/pwa-popup.md
new file mode 100644
index 0000000000..417114a0e3
--- /dev/null
+++ b/docs/zh/plugins/pwa-popup.md
@@ -0,0 +1,72 @@
+# pwa-popup
+
+<NpmBadge package="@vuepress/plugin-pwa-popup" />
+
+提供一个弹窗组件，允许用户手动刷新 PWA Service Worker 。
+
+该插件必须和 [pwa 插件](./pwa.md) 一起使用，并且 `skipWaiting` 配置项不能设置为 `true` 。
+
+当新的 Service Worker 就绪时，会在页面右下角出现一个弹窗，询问用户是否需要激活处于 Waiting 状态的 Service Worker 。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-pwa-popup@next
+```
+
+```ts
+import { pwaPlugin } from '@vuepress/plugin-pwa'
+import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup'
+
+export default {
+  plugins: [
+    pwaPlugin(),
+    pwaPopupPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### locales
+
+- 类型： `Record<string, { message: string, buttonText: string }>`
+
+- 详情：
+
+  弹窗在不同 locales 下的信息。
+
+  如果没有指定该配置项，它会降级使用默认信息。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    pwaPlugin(),
+    pwaPopupPlugin({
+      locales: {
+        '/': {
+          message: 'New content is available.',
+          buttonText: 'Refresh',
+        },
+        '/zh/': {
+          message: '发现新内容可用',
+          buttonText: '刷新',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+## 样式
+
+你可以通过 CSS 变量来自定义弹窗的样式：
+
+@[code css](@vuepress/plugin-pwa-popup/src/client/styles/vars.css)
diff --git a/docs/zh/plugins/pwa.md b/docs/zh/plugins/pwa.md
new file mode 100644
index 0000000000..50d6733f9a
--- /dev/null
+++ b/docs/zh/plugins/pwa.md
@@ -0,0 +1,173 @@
+# pwa
+
+<NpmBadge package="@vuepress/plugin-pwa" />
+
+使你的 VuePress 站点成为一个 [渐进式 Web 应用 (PWA)](https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps).
+
+该插件使用 [workbox-build](https://developers.google.com/web/tools/workbox/modules/workbox-build) 来生成 Service Worker 文件，并通过 [register-service-worker](https://github.com/yyx990803/register-service-worker) 来注册 Service Worker 。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-pwa@next
+```
+
+```ts
+import { pwaPlugin } from '@vuepress/plugin-pwa'
+
+export default {
+  plugins: [
+    pwaPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## Web App Manifests
+
+为了使你的网站符合 PWA 的要求，你需要创建一个 [Web app manifests](https://developer.mozilla.org/zh-CN/docs/Web/Manifest) 文件，并且为你的 PWA 设置图标、颜色等信息。
+
+你需要将你的 Manifest 文件和图标放置在 [Public 目录](../../guide/assets.md#public-文件) 下。在下述的示例中，我们假设你正在使用默认的 Public 目录 `.vuepress/public` 。
+
+1. 创建 Manifest 文件
+
+通常是 `.vuepress/public/manifest.webmanifest` ：
+
+```json
+{
+  "name": "VuePress",
+  "short_name": "VuePress",
+  "description": "Vue-powered Static Site Generator",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#3eaf7c",
+  "icons": [
+    {
+      "src": "/images/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ]
+}
+```
+
+2. 生成 PWA 图标
+
+为了提高你的 PWA 的可用性，你需要生成一些图标，并将它们放置在 Public 目录下。
+
+确保图标的路径匹配 Manifest 文件中的 `icons` 字段：
+
+- `.vuepress/public/images/icons/android-chrome-192x192.png`
+- `.vuepress/public/images/icons/android-chrome-384x384.png`
+
+::: tip
+一些工具可以帮助你做这些事。比如 [Favicon Generator](https://realfavicongenerator.net/) 可以帮助你生成图片以及一个 Manifest 文件样例。
+:::
+
+3. 设置 Head 中的标签
+
+你还需要通过 [head](../config.md#head) 配置项来设置一些标签，用来 [部署你的 Manifest 文件](https://developer.mozilla.org/en-US/docs/Web/Manifest#deploying_a_manifest_with_the_link_tag) 。
+
+```ts
+export default {
+  head: [
+    ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
+    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    // ...其他标签
+  ],
+}
+```
+
+## 配置项
+
+该插件的配置项可以接收 workbox-build 中 [generateSW 方法](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.generateSW) 除了 `globDirectory` 和 `swDest` 以外的所有参数。
+
+比如，你可以设置 `skipWaiting: true` ，这将在新的 Service Worker 就绪之后立即激活它：
+
+```ts
+export default {
+  plugins: [
+    pwaPlugin({
+      skipWaiting: true,
+    }),
+  ],
+}
+```
+
+但是如果你不设置 `skipWaiting` 或设置为 `false` ，你就需要手动激活新的 Service Worker 。
+
+- 对于用户，你可以配合我们提供的 [pwa-popup](./pwa-popup.md) 插件一起使用。
+- 对于开发者，你可以使用该插件提供的 [Composition API](#composition-api) 来控制 Service Worker 的行为。
+
+### serviceWorkerFilename
+
+- 类型： `string`
+
+- 默认值： `'service-worker.js'`
+
+- 详情：
+
+  生成的 Service Worker 文件路径，该路径是 [dest](../config.md#dest) 目录的相对路径。
+
+  Service Worker 文件只会在 `build` 模式下生成。
+
+## Composition API
+
+### usePwaEvent
+
+- 详情：
+
+  返回该插件的 Event Emitter 。
+
+  你可以为 [register-service-worker](https://github.com/yyx990803/register-service-worker) 提供的事件添加事件监听器。
+
+- 示例：
+
+```ts
+import { usePwaEvent } from '@vuepress/plugin-pwa/client'
+
+export default {
+  setup() {
+    const event = usePwaEvent()
+    event.on('ready', (registration) => {
+      console.log('Service worker 已经生效。')
+    })
+  },
+}
+```
+
+### useSkipWaiting
+
+- 参数：
+
+| 参数         | 类型                        | 描述                                        |
+| ------------ | --------------------------- | ------------------------------------------- |
+| registration | `ServiceWorkerRegistration` | 你想要激活的 Service Worker 的 Registration |
+
+- 详情：
+
+  调用 [skipWaiting()](https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/skipWaiting) 来激活处于 Waiting 状态的 Service Worker 。
+
+- 示例：
+
+```ts
+import { usePwaEvent, useSkipWaiting } from '@vuepress/plugin-pwa/client'
+
+export default {
+  setup() {
+    const event = usePwaEvent()
+    event.on('updated', (registration) => {
+      console.log('在 Waiting 状态的 Service Worker 已经就绪。')
+      // 激活 Waiting 状态的 Service Worker
+      useSkipWaiting(registration)
+    })
+  },
+}
+```
diff --git a/docs/zh/plugins/register-components.md b/docs/zh/plugins/register-components.md
new file mode 100644
index 0000000000..403f2593c8
--- /dev/null
+++ b/docs/zh/plugins/register-components.md
@@ -0,0 +1,135 @@
+# register-components
+
+<NpmBadge package="@vuepress/plugin-register-components" />
+
+根据组件文件或目录自动注册 Vue 组件。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-register-components@next
+```
+
+```ts
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### components
+
+- 类型： `Record<string, string>`
+
+- 默认值： `{}`
+
+- 详情：
+
+  一个定义了组件名称和其对应文件路径的对象。
+
+  键会被用作组件名称，值是组件文件的绝对路径。
+
+  如果该配置项中的组件名称和 [componentsDir](#componentsdir) 配置项发生冲突，那么该配置项会有更高的优先级。
+
+- 示例：
+
+```ts
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      components: {
+        FooBar: path.resolve(__dirname, './components/FooBar.vue'),
+      },
+    }),
+  ],
+}
+```
+
+### componentsDir
+
+- 类型： `string | null`
+
+- 默认值： `null`
+
+- 详情：
+
+  组件目录的绝对路径。
+
+  该目录下匹配 [componentsPatterns](#componentspatterns) 的文件会被自动注册为 Vue 组件。
+
+- 示例：
+
+```ts
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export default {
+  plugins: [
+    registerComponentsPlugin({
+      componentsDir: path.resolve(__dirname, './components'),
+    }),
+  ],
+}
+```
+
+组件目录：
+
+```bash
+components
+├─ FooBar.vue
+└─ Baz.vue
+```
+
+组件会像这样被注册：
+
+```ts
+import { defineAsyncComponent } from 'vue'
+
+app.component(
+  'FooBar',
+  defineAsyncComponent(() => import('/path/to/components/FooBar.vue')),
+)
+
+app.component(
+  'Baz',
+  defineAsyncComponent(() => import('/path/to/components/Baz.vue')),
+)
+```
+
+### componentsPatterns
+
+- 类型： `string[]`
+
+- 默认值： `['**/*.vue']`
+
+- 详情：
+
+  使用 [globby](https://github.com/sindresorhus/globby) 来匹配组件文件的 Patterns 。
+
+  该 Patterns 是相对于 [componentsDir](#componentsdir) 目录的。
+
+### getComponentName
+
+- 类型： `(filename: string) => string`
+
+- 默认值： `(filename) => path.trimExt(filename.replace(/\/|\\/g, '-'))`
+
+- 详情：
+
+  用于从文件名获取对应组件名称的函数。
+
+  它只会对 [componentsDir](#componentsdir) 目录下匹配了 [componentsPatterns](#componentspatterns) 的文件生效。
+
+  注意，这里的 `filename` 是相对于 [componentsPatterns](#componentspatterns) 目录的文件路径。
diff --git a/docs/zh/plugins/search.md b/docs/zh/plugins/search.md
new file mode 100644
index 0000000000..40956b3f3c
--- /dev/null
+++ b/docs/zh/plugins/search.md
@@ -0,0 +1,166 @@
+# search
+
+<NpmBadge package="@vuepress/plugin-search" />
+
+为你的文档网站提供本地搜索能力。
+
+::: tip
+当你正确配置该插件后，默认主题会把搜索框添加到导航栏。
+
+该插件不一定能在其他主题中直接使用，因此你应参考主题本身的文档来获取更多信息。
+:::
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-search@next
+```
+
+```ts
+import { searchPlugin } from '@vuepress/plugin-search'
+
+export default {
+  plugins: [
+    searchPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 本地搜索索引
+
+该插件会根据你的页面，在本地生成搜索索引，然后在用户访问站点时加载搜索索引文件。换句话说，这是一个轻量级的内置搜索能力，不会进行任何外部请求。
+
+然而，当你的站点包含大量页面时，搜索索引文件也会变得非常大，它可能会拖慢你的页面加载速度。在这种情况下，我们建议你使用更成熟的解决方案 - [docsearch](./docsearch.md) 。
+
+## 配置项
+
+### locales
+
+- 类型： `Record<string, { placeholder: string }>`
+
+- 详情：
+
+  搜索框在不同 locales 下的文字。
+
+  如果没有指定该配置项，它会降级使用默认文字。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      locales: {
+        '/': {
+          placeholder: 'Search',
+        },
+        '/zh/': {
+          placeholder: '搜索',
+        },
+      },
+    }),
+  ],
+}
+```
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+### hotKeys
+
+- 类型： `(string | HotKeyOptions)[]`
+
+@[code ts](@vuepress/plugin-search/src/shared/hotKey.ts)
+
+- 默认值： `['s', '/']`
+
+- 详情：
+
+  指定热键的 [event.key](http://keycode.info/) 。
+
+  当按下热键时，搜索框会被聚焦。
+
+  将该配置项设为空数组可以禁用热键功能。
+
+### maxSuggestions
+
+- 类型： `number`
+
+- 默认值： `5`
+
+- 详情：
+
+  指定搜索结果的最大条数。
+
+### isSearchable
+
+- 类型： `(page: Page) => boolean`
+
+- 默认值： `() => true`
+
+- 详情：
+
+  一个函数，用于判断一个页面是否应该被包含在搜索索引中。
+
+  - 返回 `true` 来包含该页面。
+  - 返回 `false` 来排除该页面。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      // 排除首页
+      isSearchable: (page) => page.path !== '/',
+    }),
+  ],
+}
+```
+
+### getExtraFields
+
+- 类型： `(page: Page) => string[]`
+
+- 默认值： `() => []`
+
+- 详情：
+
+  一个函数，用于在页面的搜索索引中添加额外字段。
+
+  默认情况下，该插件会将页面标题和小标题作为搜索索引。该配置项可以帮助你添加更多的可搜索字段。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    searchPlugin({
+      // 允许搜索 Frontmatter 中的 `tags`
+      getExtraFields: (page) => page.frontmatter.tags ?? [],
+    }),
+  ],
+}
+```
+
+## 样式
+
+你可以通过 CSS 变量来自定义搜索框的样式：
+
+@[code css](@vuepress/plugin-search/src/client/styles/vars.css)
+
+## 组件
+
+### SearchBox
+
+- 详情：
+
+  该插件会全局注册一个 `<SearchBox />` 组件，你可以不传入任何 Props 来使用它。
+
+  将该组件放置在你想要显示搜索框的地方。例如，默认主题将这个组件放在了导航栏的末尾。
+
+::: tip
+该组件主要用于主题开发。在大多数情况下你不需要直接使用该组件。
+:::
diff --git a/docs/zh/plugins/shiki.md b/docs/zh/plugins/shiki.md
new file mode 100644
index 0000000000..2126a84ee8
--- /dev/null
+++ b/docs/zh/plugins/shiki.md
@@ -0,0 +1,75 @@
+# shiki
+
+<NpmBadge package="@vuepress/plugin-shiki" />
+
+该插件使用 [Shiki](https://shiki.matsu.io/) ([Shikiji](https://shikiji.netlify.app/)) 来为 Markdown 代码块启用代码高亮。
+
+::: tip
+[Shiki](https://shiki.matsu.io/) 是 VSCode 正在使用的代码高亮器。它具有更高的保真度，但可能会比 [Prism.js](https://prismjs.com/) 要慢一些，特别是在有大量代码块需要处理的时候。
+
+你可以考虑在 `dev` 模式下禁用该插件来获取更好的开发体验。
+:::
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-shiki@next
+```
+
+```ts
+import { shikiPlugin } from '@vuepress/plugin-shiki'
+
+export default {
+  plugins: [
+    shikiPlugin({
+      // 配置项
+      langs: ['ts', 'json', 'vue', 'md', 'bash', 'diff'],
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### langs
+
+- 类型： `ShikiLang[]`
+
+- 详情：
+
+  Shikiji 要解析的代码块的语言。
+
+  该配置项会被传递到 Shikiji 的 `getHighlighter()` 方法中。
+
+  你需要明确传入所有你使用的语言列表，否则 Shikiji 将不会加载任何语言。
+
+- 参考：
+  - [shikiji > Languages](https://shikiji.netlify.app/languages)
+
+### theme
+
+- 类型： `ShikiTheme`
+
+- 默认值： `'nord'`
+
+- 详情：
+
+  Shikiji 的主题。
+
+  该配置项会被传递到 Shikiji 的 `codeToHtml()` 方法中。
+
+- 参考：
+  - [shikiji > Themes](https://shikiji.netlify.app/themes)
+
+### themes
+
+- 类型：`Record<'dark' | 'light', ShikiTheme>`
+
+- 详情：
+
+  Shikiji 的暗黑和明亮模式双主题。
+
+  该配置项会被传递到 Shikiji 的 `codeToHtml()` 方法中。
+
+- 参考：
+  - [shikiji > Dual Themes](https://shikiji.netlify.app/guide/dual-themes)
diff --git a/docs/zh/plugins/theme-data.md b/docs/zh/plugins/theme-data.md
new file mode 100644
index 0000000000..ed4a3ca69e
--- /dev/null
+++ b/docs/zh/plugins/theme-data.md
@@ -0,0 +1,118 @@
+# theme-data
+
+<NpmBadge package="@vuepress/plugin-theme-data" />
+
+为你的主题提供客户端数据，包含 VuePress 的 [多语言支持](../../guide/i18n.md) 。
+
+该插件主要用于开发主题，并且已经集成到默认主题中。大部分情况下你不需要直接使用它。
+
+对于主题作者，该插件可以提供与 VuePress 及默认主题相同的多语言支持机制。但是如果你的主题不需要提供多语言支持，或者你想用你自己的方式来实现多语言支持，那么你不需要使用该插件。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-theme-data@next
+```
+
+```ts
+import { themeDataPlugin } from '@vuepress/plugin-theme-data'
+
+export default {
+  plugins: [
+    themeDataPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 配置项
+
+### themeData
+
+- 类型： `ThemeData`
+
+- 默认值： `{}`
+
+- 详情：
+
+  你希望在 Client 端中使用的主题数据对象。
+
+  你可以通过该配置项，在 Node 端提供主题数据，然后在客户端通过 [useThemeData](#useThemeData) 和 [useThemeLocaleData](#useThemeLocaleData) 来使用主题数据。
+
+- 示例：
+
+```ts
+export default {
+  plugins: [
+    themeDataPlugin({
+      themeData: {
+        foo: 'foo',
+        locales: {
+          '/zh/': {
+            foo: 'zh-foo',
+          },
+        },
+      },
+    }),
+  ],
+}
+```
+
+::: warning
+主题数据对象在传递到客户端之前，会使用 `JSON.stringify()` 进行处理，因此你需要保证你提供的是一个可以被 JSON 序列化的对象。
+:::
+
+## Composition API
+
+### useThemeData
+
+- 详情：
+
+  返回主题数据的 Ref 对象。
+
+  数据是通过 [themeData](#themeData) 配置项提供的。
+
+- 示例：
+
+```ts
+import { useThemeData } from '@vuepress/plugin-theme-data/client'
+import type { ThemeData } from '@vuepress/plugin-theme-data/client'
+
+type MyThemeData = ThemeData<{
+  foo: string
+}>
+
+export default {
+  setup() {
+    const themeData = useThemeData<MyThemeData>()
+    console.log(themeData.value)
+  },
+}
+```
+
+### useThemeLocaleData
+
+- 详情：
+
+  返回当前 locale 下主题数据的 Ref 对象。
+
+  当前 locale 中的字段已被合并到顶层字段中。
+
+- 示例：
+
+```ts
+import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+import type { ThemeData } from '@vuepress/plugin-theme-data/client'
+
+type MyThemeData = ThemeData<{
+  foo: string
+}>
+
+export default {
+  setup() {
+    const themeLocaleData = useThemeLocaleData<MyThemeData>()
+    console.log(themeLocaleData.value)
+  },
+}
+```
diff --git a/docs/zh/plugins/toc.md b/docs/zh/plugins/toc.md
new file mode 100644
index 0000000000..31c8b6b6cb
--- /dev/null
+++ b/docs/zh/plugins/toc.md
@@ -0,0 +1,172 @@
+# toc
+
+<NpmBadge package="@vuepress/plugin-toc" />
+
+该插件会提供一个目录 (table-of-contents, TOC) 组件。
+
+## 使用方法
+
+```bash
+npm i -D @vuepress/plugin-toc@next
+```
+
+```ts
+import { tocPlugin } from '@vuepress/plugin-toc'
+
+export default {
+  plugins: [
+    tocPlugin({
+      // 配置项
+    }),
+  ],
+}
+```
+
+## 与 Markdown 目录语法的区别
+
+与 [Markdown 目录语法](../../guide/markdown.md#目录) 类似，该插件提供的目录组件可以直接在你的 Markdown 内容中使用：
+
+```md
+<!-- Markdown 目录语法 -->
+
+[[toc]]
+
+<!-- Vue 目录组件 -->
+<Toc />
+```
+
+在 Build 模式中，它们都可以被正确地预渲染。然而，它们之间存在一些区别。
+
+Markdown 语法 `[[toc]]` 仅能在 Markdown 文件中使用。它是由 markdown-it 解析的，生成的目录是静态内容。
+
+组件 `<Toc/>` 既可以用在 Markdown 文件中，也可以用在 Vue 文件中。它是由 Vue 加载的，生成的目录是一个 Vue 组件。
+
+该插件可以和 [@vuepress/plugin-active-header-links](./active-header-links.md) 协同工作，你只需要将 [headerLinkSelector](./active-header-links.md#headerlinkselector) 与该插件的 `linkClass` 匹配即可。当页面滚动至某个标题锚点后，对应的链接就会被加上 `linkActiveClass` 类名。
+
+因此，该插件对于主题开发者来说更为有用。
+
+## 配置项
+
+### componentName
+
+- 类型： `string`
+
+- 默认值： `'Toc'`
+
+- 详情：
+
+  指定目录组件的名称。
+
+### defaultPropsOptions
+
+- 类型： `Partial<TocPropsOptions>`
+
+- 默认值： `{}`
+
+- 详情：
+
+  覆盖组件 [options](#options) Prop 的默认值。
+
+## 组件 Props
+
+目录组件可以通过 Props 来进行自定义。
+
+```vue
+<template>
+  <Toc :headers="headers" :options="options" />
+</template>
+```
+
+### headers
+
+- 类型： `PageHeader[]`
+
+```ts
+interface PageHeader {
+  level: number
+  title: string
+  slug: string
+  children: PageHeader[]
+}
+```
+
+- 详情：
+
+  指定要渲染的标题数组。
+
+  如果该 Prop 没有被设置，默认会使用当前页面的标题。
+
+### options
+
+- 类型： `Partial<TocPropsOptions>`
+
+```ts
+interface TocPropsOptions {
+  containerTag: string
+  containerClass: string
+  listClass: string
+  itemClass: string
+  linkTag: 'a' | 'RouterLink'
+  linkClass: string
+  linkActiveClass: string
+  linkChildrenActiveClass: string
+}
+```
+
+- 默认值：
+
+  下列默认值可以用过 [defaultPropsOptions](#defaultpropsoptions) 来覆盖：
+
+```ts
+const defaultOptions = {
+  containerTag: 'nav',
+  containerClass: 'vuepress-toc',
+  listClass: 'vuepress-toc-list',
+  itemClass: 'vuepress-toc-item',
+  linkTag: 'RouterLink',
+  linkClass: 'vuepress-toc-link',
+  linkActiveClass: 'active',
+  linkChildrenActiveClass: 'active',
+}
+```
+
+- 详情：
+
+  自定义目录组件。
+
+  如果 `containerTag` 设置为空字符串 `''` ，那么最外层的 `<nav>` Container 会被完全移除。
+
+- 示例：
+
+  使用默认 options 的目录组件的渲染结果类似以下结构：
+
+```vue
+<template>
+  <!-- container -->
+  <nav class="vuepress-toc">
+    <!-- list -->
+    <ul class="vuepress-toc-list">
+      <!-- item -->
+      <li class="vuepress-toc-item">
+        <!-- link -->
+        <RouterLink class="vuepress-toc-link" to="#foo">Foo</RouterLink>
+      </li>
+      <!-- item with children -->
+      <li class="vuepress-toc-item">
+        <!-- link (children active) -->
+        <RouterLink class="vuepress-toc-link active" to="#bar">Bar</RouterLink>
+        <!-- list (children) -->
+        <ul class="vuepress-toc-list">
+          <!-- item -->
+          <li class="vuepress-toc-item">
+            <!-- link (active) -->
+            <RouterLink class="vuepress-toc-link active" to="#bar-child">
+              Bar Child
+            </RouterLink>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>
+```
diff --git a/docs/zh/themes/default/README.md b/docs/zh/themes/default/README.md
new file mode 100644
index 0000000000..b8c56dfe27
--- /dev/null
+++ b/docs/zh/themes/default/README.md
@@ -0,0 +1,21 @@
+# 使用方法
+
+<NpmBadge package="@vuepress/theme-default" />
+
+安装默认主题：
+
+```bash
+npm i -D @vuepress/theme-default@next
+```
+
+在配置文件中指定主题：
+
+```ts title=".vuepress/config.ts"
+import { defaultTheme } from '@vuepress/theme-default'
+
+export default {
+  theme: defaultTheme({
+    // 在这里添加主题配置
+  }),
+}
+```
diff --git a/docs/zh/themes/default/components.md b/docs/zh/themes/default/components.md
new file mode 100644
index 0000000000..2031e19789
--- /dev/null
+++ b/docs/zh/themes/default/components.md
@@ -0,0 +1,126 @@
+# 内置组件
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## Badge <Badge text="badge" />
+
+- Props:
+
+  - type
+    - 类型： `'tip' | 'warning' | 'danger'`
+    - 默认值： `'tip'`
+  - text
+    - 类型： `string`
+    - 默认值： `''`
+  - vertical
+    - 类型： `'top' | 'middle' | 'bottom' | undefined`
+    - 默认值： `undefined`
+
+- 示例：
+
+**输入**
+
+```md
+- VuePress - <Badge type="tip" text="v2" vertical="top" />
+- VuePress - <Badge type="warning" text="v2" vertical="middle" />
+- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
+```
+
+**输出**
+
+- VuePress - <Badge type="tip" text="v2" vertical="top" />
+- VuePress - <Badge type="warning" text="v2" vertical="middle" />
+- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
+
+## CodeGroup
+
+- 详情：
+
+  [CodeGroupItem](#codegroupitem) 组件的 Wrapper 。
+
+## CodeGroupItem
+
+- Props:
+
+  - title
+    - 类型： `string`
+    - 是否必需： `true`
+  - active
+    - 类型： `boolean`
+    - 默认值： `false`
+
+- 详情：
+
+  该组件必须放置在 [CodeGroup](#codegroup) 组件的内部。
+
+  可以通过 `active` Prop 来设置初始激活的元素。如果不设置，默认激活第一个元素。
+
+- 示例：
+
+**输入**
+
+````md
+<CodeGroup>
+  <CodeGroupItem title="pnpm">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="yarn">
+
+```bash:no-line-numbers
+yarn install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="npm" active>
+
+```bash:no-line-numbers
+npm install
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+````
+
+**输出**
+
+<CodeGroup>
+  <CodeGroupItem title="pnpm">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="yarn">
+
+```bash:no-line-numbers
+yarn install
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="npm" active>
+
+```bash:no-line-numbers
+npm install
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+::: warning
+你必须在 `<CodeGroupItem>` 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。
+
+所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。
+
+了解更多： [Cookbook > Markdown 与 Vue SFC](../../advanced/cookbook/markdown-and-vue-sfc.md)
+
+或者你可以选择使用 [自定义容器](./markdown.md#自定义容器) 。
+:::
diff --git a/docs/zh/themes/default/config.md b/docs/zh/themes/default/config.md
new file mode 100644
index 0000000000..8b30304bf7
--- /dev/null
+++ b/docs/zh/themes/default/config.md
@@ -0,0 +1,734 @@
+# 配置
+
+## 基础配置
+
+### locales
+
+- 类型： `{ [path: string]: Partial<DefaultThemeLocaleData> }`
+
+- 默认值： `{}`
+
+- 详情：
+
+  多语言支持的各个语言 locales 。
+
+  所有在 [Locale 配置](#locale-配置) 章节内的配置项都可以在 locales 中使用。
+
+  该配置项仅能在默认主题内生效，注意不要和 [站点配置](../config.md#locales) 中的 `locales` 混淆。
+
+- 参考：
+  - [指南 > 多语言支持](../../guide/i18n.md)
+
+## Locale 配置
+
+该章节内的配置项可以作为一般配置使用，也可以使用在 [locales](#locales) 内。
+
+### colorMode
+
+- 类型： `'auto' | 'light' | 'dark'`
+
+- 默认值： `'auto'`
+
+- 详情：
+
+  默认颜色模式。
+
+  如果设置为 `'auto'` ，则会根据 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 自动设置初始颜色模式。
+
+- 参考：
+  - [默认主题 > 配置 > colorModeSwitch](#colormodeswitch)
+
+### colorModeSwitch
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用切换颜色模式的功能。
+
+  如果设置为 `true` ，将会在导航栏展示一个切换颜色模式的按钮。
+
+- 参考：
+  - [默认主题 > 配置 > colorMode](#colormode)
+  - [默认主题 > 配置 > toggleColorMode](#togglecolormode)
+
+### home
+
+- 类型： `string`
+
+- 默认值： `/`
+
+- 详情：
+
+  首页的路径。
+
+  它将被用于：
+
+  - 导航栏中 Logo 的链接
+  - 404 页面的 _返回首页_ 链接
+
+### navbar
+
+- 类型： `false | (NavbarItem | NavbarGroup | string)[]`
+
+- 默认值： `[]`
+
+- 详情：
+
+  导航栏配置。
+
+  设置为 `false` 可以禁用导航栏。
+
+  为了配置导航栏元素，你可以将其设置为 _导航栏数组_ ，其中的每个元素是 `NavbarItem` 对象、 `NavbarGroup` 对象、或者字符串：
+
+  - `NavbarItem` 对象应该有一个 `text` 字段和一个 `link` 字段，还有一个可选的 `activeMatch` 字段。
+  - `NavbarGroup` 对象应该有一个 `text` 字段和一个 `children` 字段。 `children` 字段同样是一个 _导航栏数组_ 。
+  - 字符串应为目标页面文件的路径。它将会被转换为 `NavbarItem` 对象，将页面标题作为 `text` ，将页面路由路径作为 `link` 。
+
+- 示例 1：
+
+```ts
+export default {
+  theme: defaultTheme({
+    navbar: [
+      // NavbarItem
+      {
+        text: 'Foo',
+        link: '/foo/',
+      },
+      // NavbarGroup
+      {
+        text: 'Group',
+        children: ['/group/foo.md', '/group/bar.md'],
+      },
+      // 字符串 - 页面文件路径
+      '/bar/README.md',
+    ],
+  }),
+}
+```
+
+- 示例 2：
+
+```ts
+export default {
+  theme: defaultTheme({
+    navbar: [
+      // 嵌套 Group - 最大深度为 2
+      {
+        text: 'Group',
+        children: [
+          {
+            text: 'SubGroup',
+            children: ['/group/sub/foo.md', '/group/sub/bar.md'],
+          },
+        ],
+      },
+      // 控制元素何时被激活
+      {
+        text: 'Group 2',
+        children: [
+          {
+            text: 'Always active',
+            link: '/',
+            // 该元素将一直处于激活状态
+            activeMatch: '/',
+          },
+          {
+            text: 'Active on /foo/',
+            link: '/not-foo/',
+            // 该元素在当前路由路径是 /foo/ 开头时激活
+            // 支持正则表达式
+            activeMatch: '^/foo/',
+          },
+        ],
+      },
+    ],
+  }),
+}
+```
+
+### logo
+
+- 类型： `null | string `
+
+- 详情：
+
+  Logo 图片的 URL。
+
+  Logo 图片将会显示在导航栏的左端。
+
+  设置为 `null` 可以禁用 Logo 。
+
+- 示例：
+
+```ts
+export default {
+  theme: defaultTheme({
+    // Public 文件路径
+    logo: '/images/hero.png',
+    // URL
+    logo: 'https://vuejs.org/images/logo.png',
+  }),
+}
+```
+
+- 参考：
+  - [指南 > 静态资源 > Public 文件](../../guide/assets.md#public-文件)
+
+### logoDark
+
+- 类型： `null | string`
+
+- 详情：
+
+  在夜间模式中使用的 Logo 图片的 URL。
+
+  如果你想在夜间模式中使用不同的 Logo 图片，就可以使用该配置项。
+
+  设置为 `null` 可以在夜间模式下禁用 Logo 。忽略该配置项将会在夜间模式中使用 [logo](#logo) 配置。
+
+- 参考：
+  - [默认主题 > 配置 > logo](#logo)
+  - [默认主题 > 配置 > colorMode](#colormode)
+
+### repo
+
+- 类型： `string`
+
+- 详情：
+
+  项目仓库的 URL。
+
+  它将被用作 _仓库链接_ 的链接。_仓库链接_ 将会显示为导航栏的最后一个元素。
+
+```ts
+export default {
+  theme: defaultTheme({
+    // 如果你按照 `organization/repository` 的格式设置它
+    // 我们会将它作为一个 GitHub 仓库
+    repo: 'vuejs/vuepress',
+    // 你也可以直接将它设置为一个 URL
+    repo: 'https://gitlab.com/foo/bar',
+  }),
+}
+```
+
+### repoLabel
+
+- 类型： `string`
+
+- 详情：
+
+  项目仓库的标签。
+
+  它将被用作 _仓库链接_ 的文字。_仓库链接_ 将会显示为导航栏的最后一个元素。
+
+  如果你不明确指定该配置项，它将会根据 [repo](#repo) 配置项自动推断。
+
+### selectLanguageText
+
+- 类型： `string`
+
+- 详情：
+
+  _选择语言菜单_ 的文字。
+
+  如果你在站点配置中设置了多个 [locales](../config.md#locales) ，那么 _选择语言菜单_ 就会显示在导航栏中仓库按钮的旁边。
+
+### selectLanguageAriaLabel
+
+- 类型： `string`
+
+- 详情：
+
+  _选择语言菜单_ 的 `aria-label` 属性。
+
+  它主要是为了站点的可访问性 (a11y) 。
+
+### selectLanguageName
+
+- 类型： `string`
+
+- 详情：
+
+  Locale 的语言名称。
+
+  该配置项 **仅能在主题配置的 [locales](#locales) 的内部生效** 。它将被用作 locale 的语言名称，展示在 _选择语言菜单_ 内。
+
+- 示例：
+
+```ts
+export default {
+  locales: {
+    '/': {
+      lang: 'en-US',
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+    },
+  },
+  theme: defaultTheme({
+    locales: {
+      '/': {
+        selectLanguageName: 'English',
+      },
+      '/zh/': {
+        selectLanguageName: '简体中文',
+      },
+    },
+  }),
+}
+```
+
+### sidebar
+
+- 类型： `false | 'auto' | SidebarConfigArray | SidebarConfigObject`
+
+- 默认值： `'auto'`
+
+- 详情：
+
+  侧边栏配置。
+
+  你可以通过页面的 [sidebar](./frontmatter.md#sidebar) frontmatter 来覆盖这个全局配置。
+
+  设置为 `false` 可以禁用侧边栏。
+
+  如果你设置为 `'auto'`，侧边栏会根据页面标题自动生成。
+
+  为了手动配置侧边栏元素，你可以将其设置为 _侧边栏数组_ ，其中的每个元素是一个 `SidebarItem` 对象或者一个字符串：
+
+  - `SidebarItem` 对象应该有一个 `text` 字段，有一个可选的 `link` 字段、一个可选的 `children` 字段和一个可选的 `collapsible` 字段。 `children` 字段同样是一个 _侧边栏数组_ 。 `collapsible` 字段来控制它是否可折叠。
+  - 字符串应为目标页面文件的路径。它将会被转换为 `SidebarItem` 对象，将页面标题作为 `text` ，将页面路由路径作为 `link` ，并根据页面小标题自动生成 `children` 。
+
+  如果你想在不同子路径中使用不同的侧边栏，你可以将该配置项设置为 _侧边栏对象_ ：
+
+  - Key 为路径前缀。
+  - Value 为 _侧边栏数组_ 。
+
+- 示例 1：
+
+```ts
+export default {
+  theme: defaultTheme({
+    // 侧边栏数组
+    // 所有页面会使用相同的侧边栏
+    sidebar: [
+      // SidebarItem
+      {
+        text: 'Foo',
+        link: '/foo/',
+        children: [
+          // SidebarItem
+          {
+            text: 'github',
+            link: 'https://github.com',
+            children: [],
+          },
+          // 字符串 - 页面文件路径
+          '/foo/bar.md',
+        ],
+      },
+      // 字符串 - 页面文件路径
+      '/bar/README.md',
+    ],
+  }),
+}
+```
+
+- 示例 2：
+
+```ts
+export default {
+  theme: defaultTheme({
+    // 侧边栏对象
+    // 不同子路径下的页面会使用不同的侧边栏
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          children: ['/guide/introduction.md', '/guide/getting-started.md'],
+        },
+      ],
+      '/reference/': [
+        {
+          text: 'Reference',
+          children: ['/reference/cli.md', '/reference/config.md'],
+        },
+      ],
+    },
+  }),
+}
+```
+
+- 示例 3：
+
+```ts
+export default {
+  theme: defaultTheme({
+    // 可折叠的侧边栏
+    sidebar: {
+      '/reference/': [
+        {
+          text: 'VuePress Reference',
+          collapsible: true,
+          children: ['/reference/cli.md', '/reference/config.md'],
+        },
+        {
+          text: 'Bundlers Reference',
+          collapsible: true,
+          children: [
+            '/reference/bundler/vite.md',
+            '/reference/bundler/webpack.md',
+          ],
+        },
+      ],
+    },
+  }),
+}
+```
+
+### sidebarDepth
+
+- 类型： `number`
+
+- 默认值： `2`
+
+- 详情：
+
+  设置根据页面标题自动生成的侧边栏的最大深度。
+
+  - 设为 `0` 来禁用所有级别的页面标题。
+  - 设为 `1` 来包含 `<h2>` 标题。
+  - 设为 `2` 来包含 `<h2>` 和 `<h3>` 标题。
+  - ...
+
+  最大值取决于你通过 [markdown.headers.level](../config.md#markdown-headers) 提取了哪些级别的标题。
+
+  由于 `markdown.headers.level` 的默认值是 `[2, 3]` ，因此 `sidebarDepth` 的默认最大值是 `2` 。
+
+  你可以通过页面的 [sidebarDepth](./frontmatter.md#sidebardepth) frontmatter 来覆盖这个全局配置。
+
+### editLink
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 _编辑此页_ 链接。
+
+  你可以通过页面的 [editLink](./frontmatter.md#editlink) frontmatter 来覆盖这个全局配置。
+
+### editLinkText
+
+- 类型： `string`
+
+- 默认值： `'Edit this page'`
+
+- 详情：
+
+  _编辑此页_ 链接的文字。
+
+### editLinkPattern
+
+- 类型： `string`
+
+- 详情：
+
+  _编辑此页_ 链接的 Pattern 。
+
+  它将会用于生成 _编辑此页_ 的链接。
+
+  如果你不设置该选项，则会根据 [docsRepo](#docsrepo) 配置项来推断 Pattern 。但是如果你的文档仓库没有托管在常用的平台上，比如 GitHub 、 GitLab 、 Bitbucket 、 Gitee 等，那么你必须设置该选项才能使 _编辑此页_ 链接正常工作。
+
+- 用法：
+
+  | Pattern   | 描述                                                              |
+  | --------- | ----------------------------------------------------------------- |
+  | `:repo`   | 文档仓库 URL ，即 [docsRepo](#docsrepo)                           |
+  | `:branch` | 文档仓库分支 ，即 [docsBranch](#docsbranch)                       |
+  | `:path`   | 页面源文件的路径，即 [docsDir](#docsdir) 拼接上页面文件的相对路径 |
+
+- 示例：
+
+```ts
+export default {
+  theme: defaultTheme({
+    docsRepo: 'https://gitlab.com/owner/name',
+    docsBranch: 'master',
+    docsDir: 'docs',
+    editLinkPattern: ':repo/-/edit/:branch/:path',
+  }),
+}
+```
+
+则会生成类似于 `'https://gitlab.com/owner/name/-/edit/master/docs/path/to/file.md'` 的链接。
+
+### docsRepo
+
+- 类型： `string`
+
+- 详情：
+
+  文档源文件的仓库 URL 。
+
+  它将会用于生成 _编辑此页_ 的链接。
+
+  如果你不设置该选项，则默认会使用 [repo](#repo) 配置项。但是如果你的文档源文件是在一个不同的仓库内，你就需要设置该配置项了。
+
+### docsBranch
+
+- 类型： `string`
+
+- 默认值： `'main'`
+
+- 详情：
+
+  文档源文件的仓库分支。
+
+  它将会用于生成 _编辑此页_ 的链接。
+
+### docsDir
+
+- 类型： `string`
+
+- 默认值： `''`
+
+- 详情：
+
+  文档源文件存放在仓库中的目录名。
+
+  它将会用于生成 _编辑此页_ 的链接。
+
+### lastUpdated
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 _最近更新时间戳_ 。
+
+  你可以通过页面的 [lastUpdated](./frontmatter.md#lastupdated) frontmatter 来覆盖这个全局配置。要注意的是，如果你已经将该选项设为了 `false` ，那么这个功能会被完全禁用，并且无法在 locales 或页面 frontmatter 中启用。
+
+### lastUpdatedText
+
+- 类型： `string`
+
+- 默认值： `'Last Updated'`
+
+- 详情：
+
+  _最近更新时间戳_ 标签的文字。
+
+### contributors
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 _贡献者列表_ 。
+
+  你可以通过页面的 [contributors](./frontmatter.md#contributors) frontmatter 来覆盖这个全局配置。要注意的是，如果你已经将该选项设为了 `false` ，那么这个功能会被完全禁用，并且无法在 locales 或页面 frontmatter 中启用。
+
+### contributorsText
+
+- 类型： `string`
+
+- 默认值： `'Contributors'`
+
+- 详情：
+
+  _贡献者列表_ 标签的文字。
+
+### tip
+
+- 类型： `string`
+
+- 默认值： `'TIP'`
+
+- 详情：
+
+  Tip [自定义容器](./markdown.md#自定义容器) 的默认标题。
+
+### warning
+
+- 类型： `string`
+
+- 默认值： `'WARNING'`
+
+- 详情：
+
+  Warning [自定义容器](./markdown.md#自定义容器) 的默认标题。
+
+### danger
+
+- 类型： `string`
+
+- 默认值： `'DANGER'`
+
+- 详情：
+
+  Danger [自定义容器](./markdown.md#自定义容器) 的默认标题。
+
+### notFound
+
+- 类型： `string[]`
+
+- 默认值： `['Not Found']`
+
+- 详情：
+
+  404 页面的提示信息。
+
+  当用户进入 404 页面时，会从数组中随机选取一条信息进行展示。
+
+### backToHome
+
+- 类型： `string`
+
+- 默认值： `'Back to home'`
+
+- 详情：
+
+  404 页面中 _返回首页_ 链接的文字。
+
+### openInNewWindow
+
+- 类型： `string`
+
+- 默认值： `'open in new window'`
+
+- 详情：
+
+  [ExternalLinkIcon](../plugin/external-link-icon.md#externallinkicon). 链接内的 `sr-only` 文字。
+
+  它主要是为了站点的可访问性 (a11y) 。
+
+- 参考：
+  - [默认主题 > 配置 > themePlugins.externalLinkIcon](#themeplugins-externallinkicon)
+
+### toggleColorMode
+
+- 类型： `string`
+
+- 默认值： `'toggle color mode'`
+
+- 详情：
+
+  切换颜色模式按钮的标题文字。
+
+  它主要是为了站点的可访问性 (a11y) 。
+
+- 参考：
+  - [默认主题 > 配置 > colorModeSwitch](#colormodeswitch)
+
+### toggleSidebar
+
+- 类型： `string`
+
+- 默认值： `'toggle sidebar'`
+
+- 详情：
+
+  切换侧边栏按钮的标题文字。
+
+  它主要是为了站点的可访问性 (a11y) 。
+
+## 插件配置
+
+### themePlugins
+
+- 详情：
+
+  设置默认主题使用的插件。
+
+  默认主题使用了一些插件，如果你确实不需要该插件，你可以选择禁用它。在禁用插件之前，请确保你已了解它的用途。
+
+### themePlugins.activeHeaderLinks
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-active-header-links](../plugin/active-header-links.md) 。
+
+#### themePlugins.backToTop
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-back-to-top](../plugin/back-to-top.md) 。
+
+### themePlugins.container
+
+- 类型： `Record<ContainerType, boolean>`
+
+- 详情：
+
+  是否启用由 [@vuepress/plugin-container](../plugin/container.md) 支持的自定义容器。
+
+  `ContainerType` 类型为：
+
+  - `tip`
+  - `warning`
+  - `danger`
+  - `details`
+  - `codeGroup`
+  - `codeGroupItem`
+
+- 参考：
+  - [默认主题 > Markdown > 自定义容器](./markdown.md#自定义容器)
+
+### themePlugins.externalLinkIcon
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-external-link-icon](../plugin/external-link-icon.md) 。
+
+### themePlugins.git
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-git](../plugin/git.md) 。
+
+### themePlugins.mediumZoom
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-medium-zoom](../plugin/medium-zoom.md) 。
+
+### themePlugins.nprogress
+
+- 类型： `boolean`
+
+- 默认值： `true`
+
+- 详情：
+
+  是否启用 [@vuepress/plugin-nprogress](../plugin/nprogress.md) 。
diff --git a/docs/zh/themes/default/extending.md b/docs/zh/themes/default/extending.md
new file mode 100644
index 0000000000..461a91d1cb
--- /dev/null
+++ b/docs/zh/themes/default/extending.md
@@ -0,0 +1,117 @@
+# 继承
+
+VuePress 默认主题有着大量的用户，因此我们对它进行了一些便于继承的设计，以便用户轻松进行定制化。
+
+## 布局插槽
+
+默认主题的 `Layout` 布局提供了一些插槽：
+
+- `navbar`
+- `navbar-before`
+- `navbar-after`
+- `sidebar`
+- `sidebar-top`
+- `sidebar-bottom`
+- `page`
+- `page-top`
+- `page-bottom`
+- `page-content-top`
+- `page-content-bottom`
+
+在它们的帮助下，你可以很容易地添加或替换内容。下面通过一个示例来介绍一下如何使用布局插槽来继承默认主题。
+
+首先，创建一个客户端配置文件 `.vuepress/client.ts` ：
+
+```ts
+import { defineClientConfig } from 'vuepress/client'
+import Layout from './layouts/Layout.vue'
+
+export default defineClientConfig({
+  layouts: {
+    Layout,
+  },
+})
+```
+
+接下来，创建 `.vuepress/layouts/Layout.vue` ，并使用由默认主题的 `Layout` 布局提供的插槽：
+
+```vue
+<script setup>
+import ParentLayout from '@vuepress/theme-default/layouts/Layout.vue'
+</script>
+
+<template>
+  <ParentLayout>
+    <template #page-bottom>
+      <div class="my-footer">This is my custom page footer</div>
+    </template>
+  </ParentLayout>
+</template>
+
+<style lang="css">
+.my-footer {
+  text-align: center;
+}
+</style>
+```
+
+此时默认的 `Layout` 布局已经被你的本地布局覆盖，将会在除了首页外的所有页面添加一个自定义的页脚：
+
+![extending-a-theme](/images/cookbook/extending-a-theme-01.png)
+
+## 组件替换
+
+布局插槽十分实用，但有时候你可能会觉得它不够灵活。默认主题同样提供了替换单个组件的能力。
+
+默认主题将所有 [非全局的组件](https://github.com/vuepress/ecosystem/tree/main/themes/theme-default/src/client/components) 都注册了一个带 `@theme` 前缀的 [alias](../plugin-api.md#alias) 。例如，`HomeFooter.vue` 的别名是 `@theme/HomeFooter.vue` 。
+
+接下来，如果你想要替换 `HomeFooter.vue` 组件，只需要在配置文件 `.vuepress/config.ts` 中覆盖这个别名即可：
+
+```ts
+import { defaultTheme } from '@vuepress/theme-default'
+import { getDirname, path } from 'vuepress/utils'
+import { defineUserConfig } from 'vuepress'
+
+const __dirname = getDirname(import.meta.url)
+
+export default defineUserConfig({
+  theme: defaultTheme(),
+  alias: {
+    '@theme/HomeFooter.vue': path.resolve(
+      __dirname,
+      './components/MyHomeFooter.vue',
+    ),
+  },
+})
+```
+
+## 开发一个子主题
+
+除了在 `.vuepress/config.ts` 和 `.vuepress/client.ts` 中直接扩展默认主题以外，你可以通过继承默认主题来开发一个你自己的主题：
+
+```ts
+import { defaultTheme, type DefaultThemeOptions } from '@vuepress/theme-default'
+import type { Theme } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
+
+export const childTheme = (options: DefaultThemeOptions): Theme => {
+  return {
+    name: 'vuepress-theme-child',
+    extends: defaultTheme(options),
+
+    // 在子主题的客户端配置文件中覆盖布局
+    // 注意，你在发布到 NPM 之前会将 TS 构建为 JS ，因此这里需要设置为 JS 文件的路径
+    clientConfigFile: path.resolve(__dirname, './client.js'),
+
+    // 覆盖组件别名
+    alias: {
+      '@theme/HomeFooter.vue': path.resolve(
+        __dirname,
+        './components/MyHomeFooter.vue',
+      ),
+    },
+  }
+}
+```
diff --git a/docs/zh/themes/default/frontmatter.md b/docs/zh/themes/default/frontmatter.md
new file mode 100644
index 0000000000..bc35ac0f43
--- /dev/null
+++ b/docs/zh/themes/default/frontmatter.md
@@ -0,0 +1,360 @@
+# Frontmatter
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## 所有页面
+
+本章节中的 Frontmatter 会在所有类型的页面中生效。
+
+### externalLinkIcon
+
+- 类型： `boolean`
+
+- 详情：
+
+  由[@vuepress/plugin-external-link-icon](../plugin/external-link-icon.md#externallinkicon) 提供。
+
+- 参考：
+  - [默认主题 > 配置 > themePlugins.externalLinkIcon](./config.md#themeplugins-externallinkicon)
+
+### navbar
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否在当前页面展示导航栏。
+
+  如果你在主题配置中禁用了导航栏，那么该 Frontmatter 将不会生效。
+
+- 参考：
+  - [默认主题 > 配置 > navbar](./config.md#navbar)
+
+### pageClass
+
+- 类型： `string`
+
+- 详情：
+
+  为当前页面添加额外的类名。
+
+- 示例：
+
+```md
+---
+pageClass: custom-page-class
+---
+```
+
+然后你可以在 `.vuepress/styles/index.scss` 文件中为这个页面添加自定义样式：
+
+```scss
+.theme-container.custom-page-class {
+  /* 页面样式 */
+}
+```
+
+- 参考：
+  - [默认主题 > 样式 > Style 文件](./styles.md#style-文件)
+
+## 首页
+
+本章节中的 Frontmatter 只会在首页中生效。
+
+### home
+
+- 类型： `boolean`
+
+- 详情：
+
+  设定该页面是首页还是普通页面。
+
+  如果你不设置该 Frontmatter 或将其设为 `false` ，则该页面会是一个 [普通页面](#普通页面)
+
+- 示例：
+
+  ```md
+  ---
+  home: true
+  ---
+  ```
+
+### heroImage
+
+- 类型： `string`
+
+- 详情：
+
+  首页图片的 URL 。
+
+- 示例：
+
+  ```md
+  ---
+  # Public 文件路径
+  heroImage: /images/hero.png
+  # URL
+  heroImage: https://vuejs.org/images/logo.png
+  ---
+  ```
+
+- 参考：
+  - [指南 > 静态资源 > Public 文件](../../guide/assets.md#public-文件)
+
+### heroImageDark
+
+- 类型： `string`
+
+- 详情：
+
+  在夜间模式中使用的首页图片的 URL 。
+
+  如果你想在夜间模式中使用不同的首页图片，就可以使用该配置项。
+
+- 参考：
+  - [默认主题 > Frontmatter > heroImage](#heroimage)
+  - [默认主题 > 配置 > colorMode](./config.md#colormode)
+
+### heroAlt
+
+- 类型： `string`
+
+- 详情：
+
+  首页图片的 `alt` 属性。
+
+  如果不设置，则默认使用 [heroText](#herotext) 。
+
+### heroHeight
+
+- 类型： `number`
+
+- 默认值： `280`
+
+- 详情：
+
+  首页图片 `<img>` 标签的 `height` 属性。
+
+  当你的首页图片高度小于默认值时，你可能需要减小该属性。
+
+  需要注意的是，首页图片的高度同样受到了 CSS 的约束。设置这个属性主要是为了减少由加载首页图片引起的 [累积布局偏移 (CLS)](https://web.dev/cls/) 。
+
+### heroText
+
+- 类型： `string | null`
+
+- 详情：
+
+  首页的大标题。
+
+  如果不设置，则默认使用站点 [title](../config.md#title) 。
+
+  设置为 `null` 来禁用首页大标题。
+
+### tagline
+
+- 类型： `string | null`
+
+- 详情：
+
+  首页的标语。
+
+  如果不设置，则默认使用站点 [description](../config.md#description) 。
+
+  设置为 `null` 来禁用首页标语。
+
+### actions
+
+- 类型：
+
+```ts
+Array<{
+  text: string
+  link: string
+  type?: 'primary' | 'secondary'
+}>
+```
+
+- 详情：
+
+  配置首页按钮。
+
+- 示例：
+
+```md
+---
+actions:
+  - text: 快速上手
+    link: /zh/guide/getting-started.html
+    type: primary
+  - text: 项目简介
+    link: /zh/guide/introduction.html
+    type: secondary
+---
+```
+
+### features
+
+- 类型：
+
+```ts
+Array<{
+  title: string
+  details: string
+}>
+```
+
+- 详情：
+
+  配置首页特性列表。
+
+- 示例：
+
+```md
+---
+features:
+  - title: 简洁至上
+    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
+  - title: Vue 驱动
+    details: 享受 Vue 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
+  - title: 高性能
+    details: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
+---
+```
+
+### footer
+
+- 类型： `string`
+
+- 详情：
+
+  首页的页脚。
+
+### footerHtml
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否允许页脚中使用 HTML 。
+
+  如果设置为 `true` ，那么 [footer](#footer) 会被作为 HTML 代码处理。
+
+## 普通页面
+
+本章节中的 Frontmatter 只会在普通页面中生效。
+
+### editLink
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否在本页面中启用 _编辑此页_ 链接。
+
+- 参考：
+  - [默认主题 > 配置 > editLink](./config.md#editlink)
+
+### editLinkPattern
+
+- 类型： `string`
+
+- 详情：
+
+  本页面中 _编辑此页_ 链接的 Pattern 。
+
+- 参考：
+  - [默认主题 > 配置 > editLinkPattern](./config.md#editlinkpattern)
+
+### lastUpdated
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否在本页面中启用 _最近更新时间戳_ 。
+
+- 参考：
+  - [默认主题 > 配置 > lastUpdated](./config.md#lastupdated)
+
+### contributors
+
+- 类型： `boolean`
+
+- 详情：
+
+  是否在本页面中启用 _贡献者列表_ 。
+
+- 参考：
+  - [默认主题 > 配置 > contributors](./config.md#contributors)
+
+### sidebar
+
+- 类型： `false | 'auto' | SidebarConfigArray | SidebarConfigObject`
+
+- 详情：
+
+  配置本页面的侧边栏。
+
+- 参考：
+  - [默认主题 > 配置 > sidebar](./config.md#sidebar)
+
+### sidebarDepth
+
+- 类型： `number`
+
+- 详情：
+
+  配置本页面的侧边栏深度。
+
+- 参考：
+  - [默认主题 > 配置 > sidebarDepth](./config.md#sidebardepth)
+
+### prev
+
+- 类型： `NavLink | string`
+
+- 详情：
+
+  上一个页面的链接。
+
+  如果你不设置该 Frontmatter ，该链接会自动根据侧边栏配置进行推断。
+
+  为了手动配置上一页面的链接，你可以将其设置为一个 `NavLink` 对象或者一个字符串：
+
+  - `NavLink` 对象应该有一个 `text` 字段和一个 `link` 字段。
+  - 字符串应为目标页面文件的路径。它将会被转换为 `NavLink` 对象，将页面标题作为 `text` ，将页面路由路径作为 `link` 。
+
+- 示例：
+
+```md
+---
+# NavLink
+prev:
+  text: Get Started
+  link: /guide/getting-started.html
+
+# NavLink - 外部 URL
+prev:
+  text: GitHub
+  link: https://github.com
+
+# 字符串 - 页面文件路径
+prev: /guide/getting-started.md
+
+# 字符串 - 页面文件相对路径
+prev: ../../guide/getting-started.md
+---
+```
+
+### next
+
+- 类型： `NavLink | string`
+
+- 详情：
+
+  下一个页面的链接。
+
+  如果你不设置该 Frontmatter ，该链接会自动根据侧边栏配置进行推断。
+
+  类型和 [prev](#prev) Frontmatter 相同。
diff --git a/docs/zh/themes/default/markdown.md b/docs/zh/themes/default/markdown.md
new file mode 100644
index 0000000000..c9c681d295
--- /dev/null
+++ b/docs/zh/themes/default/markdown.md
@@ -0,0 +1,141 @@
+# Markdown
+
+<NpmBadge package="@vuepress/theme-default" />
+
+## 自定义容器
+
+- 使用：
+
+  ```md
+  ::: <type> [title]
+  [content]
+  :::
+  ```
+
+  `type` 是必需的， `title` 和 `content` 是可选的。
+
+  支持的 `type` 有：
+
+  - `tip`
+  - `warning`
+  - `danger`
+  - `details`
+  - [CodeGroup](./components.md#codegroup) 和 [CodeGroupItem](./components.md#codegroupitem) 的别名：
+    - `code-group`
+    - `code-group-item`
+
+- 示例 1 （默认标题）：
+
+**输入**
+
+```md
+::: tip
+这是一个提示
+:::
+
+::: warning
+这是一个警告
+:::
+
+::: danger
+这是一个危险警告
+:::
+
+::: details
+这是一个 details 标签
+:::
+```
+
+**输出**
+
+::: tip
+这是一个提示
+:::
+
+::: warning
+这是一个警告
+:::
+
+::: danger
+这是一个危险警告
+:::
+
+::: details
+这是一个 details 标签
+:::
+
+- 示例 2 （自定义标题）：
+
+**输入**
+
+````md
+::: danger STOP
+危险区域，禁止通行
+:::
+
+::: details 点击查看代码
+
+```ts
+console.log('你好，VuePress！')
+```
+
+:::
+````
+
+**输出**
+
+::: danger STOP
+危险区域，禁止通行
+:::
+
+::: details 点击查看代码
+
+```ts
+console.log('你好，VuePress！')
+```
+
+:::
+
+- 示例 3 （Code Group 别名）：
+
+**输入**
+
+````md
+:::: code-group
+::: code-group-item FOO
+
+```ts
+const foo = 'foo'
+```
+
+:::
+
+::: code-group-item BAR
+
+```ts
+const bar = 'bar'
+```
+
+:::
+::::
+````
+
+**输出**
+
+:::: code-group
+::: code-group-item FOO
+
+```ts
+const foo = 'foo'
+```
+
+:::
+
+::: code-group-item BAR
+
+```ts
+const bar = 'bar'
+```
+
+:::
+::::
diff --git a/docs/zh/themes/default/styles.md b/docs/zh/themes/default/styles.md
new file mode 100644
index 0000000000..9de408a6db
--- /dev/null
+++ b/docs/zh/themes/default/styles.md
@@ -0,0 +1,39 @@
+# 样式
+
+<NpmBadge package="@vuepress/theme-default" />
+
+默认主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器。
+
+用户可以通过 [palette 文件](#palette-文件) 来自定义样式变量，还可以通过 [style 文件](#style-文件) 来添加额外的样式。
+
+## Palette 文件
+
+Palette 文件的路径是 `.vuepress/styles/palette.scss` 。
+
+你可以利用它来覆盖默认主题的预定义 SASS 变量。
+
+::: details 点击查看 SASS 变量
+@[code{3-} scss](@vuepress/theme-default/src/client/styles/_variables.scss)
+:::
+
+## Style 文件
+
+Style 文件的路径是 `.vuepress/styles/index.scss` 。
+
+你可以在这里添加额外的样式，或者覆盖默认样式：
+
+```scss
+:root {
+  scroll-behavior: smooth;
+}
+```
+
+你也可以利用它来覆盖默认主题的预定义 CSS 变量。
+
+::: details 点击查看 CSS 变量
+@[code scss](@vuepress/theme-default/src/client/styles/vars.scss)
+:::
+
+::: details 点击查看暗黑模式 CSS 变量
+@[code scss](@vuepress/theme-default/src/client/styles/vars-dark.scss)
+:::
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 561ec4e283..e944a80ad5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -76,7 +76,7 @@ importers:
         version: 5.3.3
       vite:
         specifier: ~5.0.12
-        version: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+        version: 5.0.12(@types/node@20.11.7)
       vitest:
         specifier: ^1.2.1
         version: 1.2.2(@types/node@20.11.7)
@@ -84,6 +84,60 @@ importers:
         specifier: 2.0.0-rc.2
         version: 2.0.0-rc.2(@vuepress/bundler-vite@2.0.0-rc.2)(@vuepress/bundler-webpack@2.0.0-rc.2)(typescript@5.3.3)(vue@3.4.15)
 
+  docs:
+    dependencies:
+      '@vuepress/bundler-vite':
+        specifier: 2.0.0-rc.2
+        version: 2.0.0-rc.2(@types/node@20.11.7)(typescript@5.3.3)
+      '@vuepress/bundler-webpack':
+        specifier: 2.0.0-rc.2
+        version: 2.0.0-rc.2(typescript@5.3.3)
+      '@vuepress/plugin-back-to-top':
+        specifier: workspace:*
+        version: link:../plugins/plugin-back-to-top
+      '@vuepress/plugin-docsearch':
+        specifier: workspace:*
+        version: link:../plugins/plugin-docsearch
+      '@vuepress/plugin-external-link-icon':
+        specifier: workspace:*
+        version: link:../plugins/plugin-external-link-icon
+      '@vuepress/plugin-google-analytics':
+        specifier: workspace:*
+        version: link:../plugins/plugin-google-analytics
+      '@vuepress/plugin-medium-zoom':
+        specifier: workspace:*
+        version: link:../plugins/plugin-medium-zoom
+      '@vuepress/plugin-nprogress':
+        specifier: workspace:*
+        version: link:../plugins/plugin-nprogress
+      '@vuepress/plugin-pwa-popup':
+        specifier: workspace:*
+        version: link:../plugins/plugin-pwa-popup
+      '@vuepress/plugin-register-components':
+        specifier: workspace:*
+        version: link:../plugins/plugin-register-components
+      '@vuepress/plugin-search':
+        specifier: workspace:*
+        version: link:../plugins/plugin-search
+      '@vuepress/plugin-shiki':
+        specifier: workspace:*
+        version: link:../plugins/plugin-shiki
+      '@vuepress/theme-default':
+        specifier: workspace:*
+        version: link:../themes/theme-default
+      anywhere:
+        specifier: ^1.6.0
+        version: 1.6.0
+      sass-loader:
+        specifier: ^14.0.0
+        version: 14.0.0(sass@1.70.0)(webpack@5.90.0)
+      vue:
+        specifier: ^3.4.15
+        version: 3.4.15(typescript@5.3.3)
+      vuepress:
+        specifier: 2.0.0-rc.2
+        version: 2.0.0-rc.2(@vuepress/bundler-vite@2.0.0-rc.2)(@vuepress/bundler-webpack@2.0.0-rc.2)(typescript@5.3.3)(vue@3.4.15)
+
   e2e:
     dependencies:
       '@vuepress/bundler-vite':
@@ -440,7 +494,7 @@ importers:
         version: 3.4.38
       '@vuepress/bundler-vite':
         specifier: 2.0.0-rc.2
-        version: 2.0.0-rc.2(@types/node@20.11.7)(sass@1.70.0)(typescript@5.3.3)
+        version: 2.0.0-rc.2(@types/node@20.11.7)(typescript@5.3.3)
       '@vuepress/bundler-webpack':
         specifier: 2.0.0-rc.2
         version: 2.0.0-rc.2(typescript@5.3.3)
@@ -449,7 +503,7 @@ importers:
         version: link:../../plugins/plugin-git
       vite:
         specifier: 5.0.12
-        version: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+        version: 5.0.12(@types/node@20.11.7)
 
 packages:
 
@@ -3776,7 +3830,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+      vite: 5.0.12(@types/node@20.11.7)
       vue: 3.4.15(typescript@5.3.3)
 
   /@vitest/coverage-istanbul@1.2.2(vitest@1.2.2):
@@ -3932,6 +3986,36 @@ packages:
       - supports-color
       - terser
       - typescript
+    dev: false
+
+  /@vuepress/bundler-vite@2.0.0-rc.2(@types/node@20.11.7)(typescript@5.3.3):
+    resolution: {integrity: sha512-bjkn0krtucciUkGGdckCkGGg+wlv3Pj7s1lO/ChACLQncDwc3GgMTuMm0JyaCDKzTXE8sufjHHGWMftRL8qFOg==}
+    dependencies:
+      '@vitejs/plugin-vue': 5.0.3(vite@5.0.12)(vue@3.4.15)
+      '@vuepress/client': 2.0.0-rc.2(typescript@5.3.3)
+      '@vuepress/core': 2.0.0-rc.2(typescript@5.3.3)
+      '@vuepress/shared': 2.0.0-rc.2
+      '@vuepress/utils': 2.0.0-rc.2
+      autoprefixer: 10.4.17(postcss@8.4.33)
+      connect-history-api-fallback: 2.0.0
+      postcss: 8.4.33
+      postcss-load-config: 5.0.2(postcss@8.4.33)
+      rollup: 4.9.6
+      vite: 5.0.12(@types/node@20.11.7)
+      vue: 3.4.15(typescript@5.3.3)
+      vue-router: 4.2.5(vue@3.4.15)
+    transitivePeerDependencies:
+      - '@types/node'
+      - '@vue/composition-api'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - typescript
 
   /@vuepress/bundler-webpack@2.0.0-rc.2(typescript@5.3.3):
     resolution: {integrity: sha512-ukYXFFTI5vOQ24zv+oIGRjYwBjgeIuTe6S8pKBZj5dJuQIafVFYTEd6YSJbuBtqTJBtxbwcF4oW/pMynKkMYBQ==}
@@ -4385,7 +4469,6 @@ packages:
       serve-static: 1.15.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /aproba@2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
@@ -4418,17 +4501,14 @@ packages:
   /arr-diff@4.0.0:
     resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /arr-flatten@1.1.0:
     resolution: {integrity: sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /arr-union@3.1.0:
     resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
@@ -4462,7 +4542,6 @@ packages:
   /array-unique@0.3.2:
     resolution: {integrity: sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /array.prototype.findlastindex@1.2.3:
     resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==}
@@ -4530,7 +4609,6 @@ packages:
   /assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /astral-regex@2.0.0:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
@@ -4552,7 +4630,6 @@ packages:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
     hasBin: true
-    dev: true
 
   /autoprefixer@10.4.17(postcss@8.4.33):
     resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==}
@@ -4644,7 +4721,6 @@ packages:
       isobject: 3.0.1
       mixin-deep: 1.3.2
       pascalcase: 0.1.1
-    dev: true
 
   /batch@0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
@@ -4746,7 +4822,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -4842,7 +4917,6 @@ packages:
       to-object-path: 0.3.0
       union-value: 1.0.1
       unset-value: 1.0.0
-    dev: true
 
   /cachedir@2.4.0:
     resolution: {integrity: sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==}
@@ -5001,7 +5075,6 @@ packages:
       define-property: 0.2.5
       isobject: 3.0.1
       static-extend: 0.1.2
-    dev: true
 
   /clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
@@ -5091,7 +5164,6 @@ packages:
     dependencies:
       map-visit: 1.0.0
       object-visit: 1.0.1
-    dev: true
 
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
@@ -5167,7 +5239,6 @@ packages:
 
   /component-emitter@1.3.1:
     resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==}
-    dev: true
 
   /compressible@2.0.18:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
@@ -5202,7 +5273,6 @@ packages:
   /connect-history-api-fallback@1.6.0:
     resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
     engines: {node: '>=0.8'}
-    dev: true
 
   /connect-history-api-fallback@2.0.0:
     resolution: {integrity: sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==}
@@ -5218,7 +5288,6 @@ packages:
       utils-merge: 1.0.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
@@ -5389,7 +5458,6 @@ packages:
   /copy-descriptor@0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /copy-webpack-plugin@12.0.2(webpack@5.90.0):
     resolution: {integrity: sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==}
@@ -5693,7 +5761,6 @@ packages:
   /decode-uri-component@0.2.2:
     resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
     engines: {node: '>=0.10'}
-    dev: true
 
   /dedent@1.5.1:
     resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==}
@@ -5765,14 +5832,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-descriptor: 0.1.7
-    dev: true
 
   /define-property@1.0.0:
     resolution: {integrity: sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==}
     engines: {node: '>=0.10.0'}
     dependencies:
       is-descriptor: 1.0.3
-    dev: true
 
   /define-property@2.0.2:
     resolution: {integrity: sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==}
@@ -5780,7 +5845,6 @@ packages:
     dependencies:
       is-descriptor: 1.0.3
       isobject: 3.0.1
-    dev: true
 
   /delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
@@ -6096,7 +6160,7 @@ packages:
     peerDependencies:
       webpack: ^4.40.0 || ^5.0.0
     dependencies:
-      esbuild: 0.19.10
+      esbuild: 0.19.12
       get-tsconfig: 4.7.2
       loader-utils: 2.0.4
       webpack: 5.90.0
@@ -6609,7 +6673,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /exponential-backoff@3.1.1:
     resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
@@ -6665,7 +6728,6 @@ packages:
     dependencies:
       assign-symbols: 1.0.0
       is-extendable: 1.0.1
-    dev: true
 
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -6693,7 +6755,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /extract-zip@2.0.1(supports-color@8.1.1):
     resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
@@ -6798,7 +6859,6 @@ packages:
       is-number: 3.0.0
       repeat-string: 1.6.1
       to-regex-range: 2.1.1
-    dev: true
 
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
@@ -6819,7 +6879,6 @@ packages:
       unpipe: 1.0.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /finalhandler@1.2.0:
     resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
@@ -6890,7 +6949,6 @@ packages:
         optional: true
     dependencies:
       debug: 2.6.9
-    dev: true
 
   /follow-redirects@1.15.5(debug@4.3.4):
     resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
@@ -6911,7 +6969,6 @@ packages:
   /for-in@1.0.2:
     resolution: {integrity: sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /foreground-child@3.1.1:
     resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
@@ -6962,7 +7019,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       map-cache: 0.2.2
-    dev: true
 
   /fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
@@ -7109,7 +7165,6 @@ packages:
   /get-value@2.0.6:
     resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /getos@3.2.1:
     resolution: {integrity: sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==}
@@ -7363,7 +7418,6 @@ packages:
       get-value: 2.0.6
       has-values: 0.1.4
       isobject: 2.1.0
-    dev: true
 
   /has-value@1.0.0:
     resolution: {integrity: sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==}
@@ -7372,12 +7426,10 @@ packages:
       get-value: 2.0.6
       has-values: 1.0.0
       isobject: 3.0.1
-    dev: true
 
   /has-values@0.1.4:
     resolution: {integrity: sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /has-values@1.0.0:
     resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==}
@@ -7385,7 +7437,6 @@ packages:
     dependencies:
       is-number: 3.0.0
       kind-of: 4.0.0
-    dev: true
 
   /hash-sum@2.0.0:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
@@ -7532,7 +7583,6 @@ packages:
     transitivePeerDependencies:
       - debug
       - supports-color
-    dev: true
 
   /http-proxy-middleware@2.0.6(@types/express@4.17.21):
     resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==}
@@ -7571,7 +7621,6 @@ packages:
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
-    dev: true
 
   /http-signature@1.3.6:
     resolution: {integrity: sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==}
@@ -7654,6 +7703,7 @@ packages:
 
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
+    dev: false
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -7747,7 +7797,6 @@ packages:
     engines: {node: '>= 0.10'}
     dependencies:
       hasown: 2.0.0
-    dev: true
 
   /is-array-buffer@3.0.2:
     resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==}
@@ -7779,7 +7828,6 @@ packages:
 
   /is-buffer@1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
-    dev: true
 
   /is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
@@ -7809,7 +7857,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       hasown: 2.0.0
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -7823,7 +7870,6 @@ packages:
     dependencies:
       is-accessor-descriptor: 1.0.1
       is-data-descriptor: 1.0.1
-    dev: true
 
   /is-descriptor@1.0.3:
     resolution: {integrity: sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==}
@@ -7831,7 +7877,6 @@ packages:
     dependencies:
       is-accessor-descriptor: 1.0.1
       is-data-descriptor: 1.0.1
-    dev: true
 
   /is-docker@2.2.1:
     resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
@@ -7847,7 +7892,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-plain-object: 2.0.4
-    dev: true
 
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
@@ -7914,7 +7958,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
@@ -8035,7 +8078,6 @@ packages:
   /is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
@@ -8062,7 +8104,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isarray: 1.0.0
-    dev: true
 
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
@@ -8297,14 +8338,12 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-buffer: 1.1.6
-    dev: true
 
   /kind-of@4.0.0:
     resolution: {integrity: sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==}
     engines: {node: '>=0.10.0'}
     dependencies:
       is-buffer: 1.1.6
-    dev: true
 
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
@@ -8640,7 +8679,6 @@ packages:
   /map-cache@0.2.2:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /map-obj@1.0.1:
     resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
@@ -8661,7 +8699,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       object-visit: 1.0.1
-    dev: true
 
   /markdown-it-anchor@8.6.7(@types/markdown-it@13.0.7)(markdown-it@14.0.0):
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
@@ -8765,7 +8802,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /micromatch@4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@@ -8844,7 +8880,6 @@ packages:
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
-    dev: true
 
   /minipass-collect@2.0.1:
     resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
@@ -8927,7 +8962,6 @@ packages:
     dependencies:
       for-in: 1.0.2
       is-extendable: 1.0.1
-    dev: true
 
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
@@ -8986,7 +9020,6 @@ packages:
       to-regex: 3.0.2
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@@ -9192,7 +9225,6 @@ packages:
       copy-descriptor: 0.1.1
       define-property: 0.2.5
       kind-of: 3.2.2
-    dev: true
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -9206,7 +9238,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isobject: 3.0.1
-    dev: true
 
   /object.assign@4.1.4:
     resolution: {integrity: sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==}
@@ -9240,7 +9271,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       isobject: 3.0.1
-    dev: true
 
   /object.values@1.1.7:
     resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
@@ -9259,7 +9289,6 @@ packages:
     engines: {node: '>= 0.8'}
     dependencies:
       ee-first: 1.1.1
-    dev: true
 
   /on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
@@ -9552,7 +9581,6 @@ packages:
   /pascalcase@0.1.1:
     resolution: {integrity: sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
@@ -9662,7 +9690,6 @@ packages:
   /posix-character-classes@0.1.1:
     resolution: {integrity: sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /postcss-csso@6.0.1(postcss@8.4.33):
     resolution: {integrity: sha512-ZV4yEziMrx6CEiqabGLrDva0pMD7Fbw7yP+LzJvaynM4OJgTssGN6dHiMsJMJdpmNaLJltXVLsrb/5sxbFa8sA==}
@@ -10077,7 +10104,6 @@ packages:
     dependencies:
       extend-shallow: 3.0.2
       safe-regex: 1.1.0
-    dev: true
 
   /regexp.prototype.flags@1.5.1:
     resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==}
@@ -10126,12 +10152,10 @@ packages:
   /repeat-element@1.1.4:
     resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /repeat-string@1.6.1:
     resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==}
     engines: {node: '>=0.10'}
-    dev: true
 
   /request-progress@3.0.0:
     resolution: {integrity: sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==}
@@ -10180,7 +10204,6 @@ packages:
   /resolve-url@0.2.1:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
     deprecated: https://github.com/lydell/resolve-url#deprecated
-    dev: true
 
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
@@ -10207,7 +10230,6 @@ packages:
   /ret@0.1.15:
     resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
     engines: {node: '>=0.12'}
-    dev: true
 
   /retry@0.12.0:
     resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
@@ -10343,7 +10365,6 @@ packages:
     resolution: {integrity: sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==}
     dependencies:
       ret: 0.1.15
-    dev: true
 
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
@@ -10377,6 +10398,7 @@ packages:
       chokidar: 3.5.3
       immutable: 4.3.4
       source-map-js: 1.0.2
+    dev: false
 
   /schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
@@ -10522,7 +10544,6 @@ packages:
       is-extendable: 0.1.1
       is-plain-object: 2.0.4
       split-string: 3.1.0
-    dev: true
 
   /setprototypeof@1.1.0:
     resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==}
@@ -10649,14 +10670,12 @@ packages:
       define-property: 1.0.0
       isobject: 3.0.1
       snapdragon-util: 3.0.1
-    dev: true
 
   /snapdragon-util@3.0.1:
     resolution: {integrity: sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==}
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /snapdragon@0.8.2:
     resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
@@ -10672,7 +10691,6 @@ packages:
       use: 3.1.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /sockjs@0.3.24:
     resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
@@ -10740,7 +10758,6 @@ packages:
       resolve-url: 0.2.1
       source-map-url: 0.4.1
       urix: 0.1.0
-    dev: true
 
   /source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -10751,12 +10768,10 @@ packages:
   /source-map-url@0.4.1:
     resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==}
     deprecated: See https://github.com/lydell/source-map-url#deprecated
-    dev: true
 
   /source-map@0.5.7:
     resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -10825,7 +10840,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       extend-shallow: 3.0.2
-    dev: true
 
   /split2@3.2.2:
     resolution: {integrity: sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==}
@@ -10897,7 +10911,6 @@ packages:
     dependencies:
       define-property: 0.2.5
       object-copy: 0.1.0
-    dev: true
 
   /statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
@@ -11251,7 +11264,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       kind-of: 3.2.2
-    dev: true
 
   /to-regex-range@2.1.1:
     resolution: {integrity: sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==}
@@ -11259,7 +11271,6 @@ packages:
     dependencies:
       is-number: 3.0.0
       repeat-string: 1.6.1
-    dev: true
 
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
@@ -11275,7 +11286,6 @@ packages:
       extend-shallow: 3.0.2
       regex-not: 1.0.2
       safe-regex: 1.1.0
-    dev: true
 
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
@@ -11526,7 +11536,6 @@ packages:
       get-value: 2.0.6
       is-extendable: 0.1.1
       set-value: 2.0.1
-    dev: true
 
   /unique-filename@3.0.0:
     resolution: {integrity: sha512-afXhuC55wkAmZ0P18QsVE6kp8JaxrEokN2HGIoIVv2ijHQd419H0+6EigAFcIzXeMIkcIkNBpB3L/DXB3cTS/g==}
@@ -11572,7 +11581,6 @@ packages:
     dependencies:
       has-value: 0.3.1
       isobject: 3.0.1
-    dev: true
 
   /untildify@4.0.0:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
@@ -11606,7 +11614,6 @@ packages:
   /urix@0.1.0:
     resolution: {integrity: sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==}
     deprecated: Please see https://github.com/lydell/urix#deprecated
-    dev: true
 
   /url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
@@ -11618,7 +11625,6 @@ packages:
   /use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -11675,7 +11681,7 @@ packages:
       debug: 4.3.4(supports-color@8.1.1)
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+      vite: 5.0.12(@types/node@20.11.7)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -11687,7 +11693,7 @@ packages:
       - terser
     dev: true
 
-  /vite@5.0.12(@types/node@20.11.7)(sass@1.70.0):
+  /vite@5.0.12(@types/node@20.11.7):
     resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
@@ -11719,9 +11725,45 @@ packages:
       esbuild: 0.19.10
       postcss: 8.4.32
       rollup: 4.9.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /vite@5.0.12(@types/node@20.11.7)(sass@1.70.0):
+    resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.11.7
+      esbuild: 0.19.12
+      postcss: 8.4.33
+      rollup: 4.9.6
       sass: 1.70.0
     optionalDependencies:
       fsevents: 2.3.3
+    dev: false
 
   /vitest@1.2.2(@types/node@20.11.7):
     resolution: {integrity: sha512-d5Ouvrnms3GD9USIK36KG8OZ5bEvKEkITFtnGv56HFaSlbItJuYr7hv2Lkn903+AvRAgSixiamozUVfORUekjw==}
@@ -11767,7 +11809,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.5.1
       tinypool: 0.8.2
-      vite: 5.0.12(@types/node@20.11.7)(sass@1.70.0)
+      vite: 5.0.12(@types/node@20.11.7)
       vite-node: 1.2.2(@types/node@20.11.7)
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
@@ -11867,7 +11909,7 @@ packages:
       '@vuepress/bundler-webpack':
         optional: true
     dependencies:
-      '@vuepress/bundler-vite': 2.0.0-rc.2(@types/node@20.11.7)(sass@1.70.0)(typescript@5.3.3)
+      '@vuepress/bundler-vite': 2.0.0-rc.2(@types/node@20.11.7)(typescript@5.3.3)
       '@vuepress/bundler-webpack': 2.0.0-rc.2(typescript@5.3.3)
       '@vuepress/cli': 2.0.0-rc.2(typescript@5.3.3)
       '@vuepress/client': 2.0.0-rc.2(typescript@5.3.3)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index bb6afc94ff..5d7a748dcb 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,6 @@
 packages:
-  - e2e
+  - docs/
+  - e2e/
   - plugins/*
   - themes/*
   - tools/*