From 86a50e9601eb114ae47cb61394bd47ed43bb2447 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 15 Jun 2024 12:13:09 +0800
Subject: [PATCH] chore: tweak

---
 theme/src/client/components/Nav/NavBar.vue    | 237 ----------------
 theme/src/client/components/Nav/VPNav.vue     |  86 ++++++
 theme/src/client/components/Nav/VPNavBar.vue  | 268 ++++++++++++++++++
 ...rAppearance.vue => VPNavBarAppearance.vue} |   6 +-
 .../{NavBarExtra.vue => VPNavBarExtra.vue}    |  23 +-
 ...BarHamburger.vue => VPNavBarHamburger.vue} |  24 +-
 .../Nav/{NavBarMenu.vue => VPNavBarMenu.vue}  |  14 +-
 ...BarMenuGroup.vue => VPNavBarMenuGroup.vue} |  10 +-
 ...avBarMenuLink.vue => VPNavBarMenuLink.vue} |  10 +-
 .../{NavBarSearch.vue => VPNavBarSearch.vue}  |   2 +-
 ...ocialLinks.vue => VPNavBarSocialLinks.vue} |   6 +-
 .../{NavBarTitle.vue => VPNavBarTitle.vue}    |  14 +-
 ...nslations.vue => VPNavBarTranslations.vue} |   6 +-
 .../Nav/{NavScreen.vue => VPNavScreen.vue}    |  45 +--
 ...pearance.vue => VPNavScreenAppearance.vue} |   4 +-
 ...{NavScreenMenu.vue => VPNavScreenMenu.vue} |  10 +-
 ...MenuGroup.vue => VPNavScreenMenuGroup.vue} |  28 +-
 ...pLink.vue => VPNavScreenMenuGroupLink.vue} |   6 +-
 ...on.vue => VPNavScreenMenuGroupSection.vue} |   8 +-
 ...enMenuLink.vue => VPNavScreenMenuLink.vue} |   6 +-
 ...alLinks.vue => VPNavScreenSocialLinks.vue} |   2 +-
 ...ations.vue => VPNavScreenTranslations.vue} |   6 +-
 theme/src/client/components/Nav/index.vue     |  54 ----
 theme/src/client/components/VPEncryptForm.vue |   4 +-
 .../src/client/components/VPEncryptGlobal.vue |   6 +-
 theme/src/client/components/VPEncryptPage.vue |   6 +-
 theme/src/client/components/VPMenuGroup.vue   |   8 +-
 theme/src/client/components/VPMenuLink.vue    |   4 +-
 theme/src/client/components/VPSkipLink.vue    |   8 +-
 theme/src/client/layouts/Layout.vue           |  23 +-
 theme/src/client/layouts/NotFound.vue         |  24 +-
 theme/src/client/styles/search.css            |  37 ++-
 theme/src/shared/frontmatter/normal.ts        |  11 +
 theme/src/shared/navbar.ts                    |   2 +
 34 files changed, 576 insertions(+), 432 deletions(-)
 delete mode 100644 theme/src/client/components/Nav/NavBar.vue
 create mode 100644 theme/src/client/components/Nav/VPNav.vue
 create mode 100644 theme/src/client/components/Nav/VPNavBar.vue
 rename theme/src/client/components/Nav/{NavBarAppearance.vue => VPNavBarAppearance.vue} (83%)
 rename theme/src/client/components/Nav/{NavBarExtra.vue => VPNavBarExtra.vue} (88%)
 rename theme/src/client/components/Nav/{NavBarHamburger.vue => VPNavBarHamburger.vue} (78%)
 rename theme/src/client/components/Nav/{NavBarMenu.vue => VPNavBarMenu.vue} (62%)
 rename theme/src/client/components/Nav/{NavBarMenuGroup.vue => VPNavBarMenuGroup.vue} (75%)
 rename theme/src/client/components/Nav/{NavBarMenuLink.vue => VPNavBarMenuLink.vue} (81%)
 rename theme/src/client/components/Nav/{NavBarSearch.vue => VPNavBarSearch.vue} (60%)
 rename theme/src/client/components/Nav/{NavBarSocialLinks.vue => VPNavBarSocialLinks.vue} (88%)
 rename theme/src/client/components/Nav/{NavBarTitle.vue => VPNavBarTitle.vue} (82%)
 rename theme/src/client/components/Nav/{NavBarTranslations.vue => VPNavBarTranslations.vue} (91%)
 rename theme/src/client/components/Nav/{NavScreen.vue => VPNavScreen.vue} (53%)
 rename theme/src/client/components/Nav/{NavScreenAppearance.vue => VPNavScreenAppearance.vue} (92%)
 rename theme/src/client/components/Nav/{NavScreenMenu.vue => VPNavScreenMenu.vue} (66%)
 rename theme/src/client/components/Nav/{NavScreenMenuGroup.vue => VPNavScreenMenuGroup.vue} (78%)
 rename theme/src/client/components/Nav/{NavScreenMenuGroupLink.vue => VPNavScreenMenuGroupLink.vue} (85%)
 rename theme/src/client/components/Nav/{NavScreenMenuGroupSection.vue => VPNavScreenMenuGroupSection.vue} (78%)
 rename theme/src/client/components/Nav/{NavScreenMenuLink.vue => VPNavScreenMenuLink.vue} (83%)
 rename theme/src/client/components/Nav/{NavScreenSocialLinks.vue => VPNavScreenSocialLinks.vue} (87%)
 rename theme/src/client/components/Nav/{NavScreenTranslations.vue => VPNavScreenTranslations.vue} (92%)
 delete mode 100644 theme/src/client/components/Nav/index.vue

diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue
deleted file mode 100644
index 7e0e3fe3..00000000
--- a/theme/src/client/components/Nav/NavBar.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script lang="ts" setup>
-import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
-import { useSidebar } from '../../composables/sidebar.js'
-import { useData } from '../../composables/data.js'
-import NavBarAppearance from './NavBarAppearance.vue'
-import NavBarExtra from './NavBarExtra.vue'
-import NavBarHamburger from './NavBarHamburger.vue'
-import NavBarMenu from './NavBarMenu.vue'
-import NavBarSearch from './NavBarSearch.vue'
-import NavBarSocialLinks from './NavBarSocialLinks.vue'
-import NavBarTitle from './NavBarTitle.vue'
-import NavBarTranslations from './NavBarTranslations.vue'
-
-defineProps<{
-  isScreenOpen: boolean
-}>()
-defineEmits<(e: 'toggleScreen') => void>()
-
-const { frontmatter } = useData()
-
-const { y } = useWindowScroll()
-const { hasSidebar } = useSidebar()
-
-const classes = ref<Record<string, boolean>>({})
-watchPostEffect(() => {
-  classes.value = {
-    'has-sidebar': hasSidebar.value,
-    'top': frontmatter.value.pageLayout === 'home' && y.value === 0,
-  }
-})
-</script>
-
-<template>
-  <div class="navbar-wrapper" :class="classes">
-    <div class="container">
-      <div class="title">
-        <NavBarTitle />
-      </div>
-
-      <div class="content">
-        <div class="curtain" />
-        <div class="content-body">
-          <NavBarSearch class="search" />
-          <NavBarMenu class="menu" />
-          <NavBarTranslations class="translations" />
-          <NavBarAppearance class="appearance" />
-          <NavBarSocialLinks class="social-links" />
-          <NavBarExtra class="extra" />
-          <NavBarHamburger
-            class="hamburger"
-            :active="isScreenOpen"
-            @click="$emit('toggleScreen')"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.navbar-wrapper {
-  position: relative;
-  height: var(--vp-nav-height);
-  padding: 0 8px 0 24px;
-  white-space: nowrap;
-  pointer-events: none;
-  border-bottom: 1px solid transparent;
-  transition: var(--t-color);
-  transition-property: background-color, color, border-bottom;
-}
-
-@media (min-width: 768px) {
-  .navbar-wrapper {
-    padding: 0 32px;
-  }
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper.has-sidebar {
-    padding: 0;
-  }
-
-  .navbar-wrapper:not(.has-sidebar, .top) {
-    background-color: var(--vp-nav-bg-color);
-    border-bottom-color: var(--vp-c-gutter);
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  max-width: calc(var(--vp-layout-max-width) - 64px);
-  height: var(--vp-nav-height);
-  margin: 0 auto;
-  pointer-events: none;
-}
-
-.container :deep(*) {
-  pointer-events: auto;
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper.has-sidebar .container {
-    max-width: 100%;
-  }
-}
-
-.title {
-  flex-shrink: 0;
-  height: calc(var(--vp-nav-height) - 1px);
-  transition: background-color var(--t-color);
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper.has-sidebar .title {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-    width: var(--vp-sidebar-width);
-    height: var(--vp-nav-height);
-    padding: 0 32px;
-    background-color: transparent;
-  }
-}
-
-@media (min-width: 1440px) {
-  .navbar-wrapper.has-sidebar .title {
-    width:
-      calc(
-        (100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) -
-        32px
-      );
-    padding-left:
-      max(
-        32px,
-        calc((100% - (var(--vp-layout-max-width) - 64px)) / 2)
-      );
-  }
-}
-
-.content {
-  flex-grow: 1;
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper.has-sidebar .content {
-    position: relative;
-    z-index: 1;
-    padding-right: 32px;
-    padding-left: var(--vp-sidebar-width);
-  }
-}
-
-@media (min-width: 1440px) {
-  .navbar-wrapper.has-sidebar .content {
-    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
-    padding-left:
-      calc(
-        (100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)
-      );
-  }
-}
-
-.content-body {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  height: calc(var(--vp-nav-height) - 1px);
-  transition: var(--t-color);
-  transition-property: background-color;
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper:not(.top) .content-body {
-    position: relative;
-    background-color: var(--vp-nav-bg-color);
-  }
-}
-
-@media (max-width: 767px) {
-  .content-body {
-    column-gap: 0.5rem;
-  }
-}
-
-.menu + .translations::before,
-.menu + .appearance::before,
-.menu + .social-links::before,
-.translations + .appearance::before,
-.translations + .social-links::before,
-.appearance + .social-links::before {
-  width: 1px;
-  height: 24px;
-  margin-right: 8px;
-  margin-left: 8px;
-  content: "";
-  background-color: var(--vp-c-divider);
-  transition: background-color var(--t-color);
-}
-
-.menu + .appearance::before,
-.translations + .appearance::before {
-  margin-right: 16px;
-}
-
-.appearance + .social-links::before {
-  margin-left: 16px;
-}
-
-.social-links {
-  margin-right: -8px;
-}
-
-@media (min-width: 960px) {
-  .navbar-wrapper.has-sidebar .curtain {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    width: calc(100% - var(--vp-sidebar-width));
-    height: 0;
-    border-bottom: solid 1px var(--vp-c-divider);
-    transition: border-bottom var(--t-color);
-  }
-}
-
-@media (min-width: 1440px) {
-  .navbar-wrapper.has-sidebar .curtain {
-    width:
-      calc(
-        100% -
-        ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))
-      );
-  }
-}
-</style>
diff --git a/theme/src/client/components/Nav/VPNav.vue b/theme/src/client/components/Nav/VPNav.vue
new file mode 100644
index 00000000..95389307
--- /dev/null
+++ b/theme/src/client/components/Nav/VPNav.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { computed, provide, watchEffect } from 'vue'
+import { useNav } from '../../composables/nav.js'
+import { useData } from '../../composables/data.js'
+import { inBrowser } from '../../utils/index.js'
+import VPNavbar from './VPNavBar.vue'
+import VPNavScreen from './VPNavScreen.vue'
+
+const { page, frontmatter } = useData()
+
+const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+
+const fixedInclude = ['blog', 'friends', 'blog-archives', 'blog-tags']
+
+const fixed = computed(() => {
+  return fixedInclude.includes(page.value.type as string)
+})
+
+const hasNavbar = computed(() => {
+  return frontmatter.value.navbar !== false
+})
+
+provide('close-screen', closeScreen)
+
+watchEffect(() => {
+  if (inBrowser) {
+    document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
+  }
+})
+</script>
+
+<template>
+  <div class="vp-nav" :class="{ fixed }">
+    <VPNavbar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
+      <template #nav-bar-title-before>
+        <slot name="nav-bar-title-before" />
+      </template>
+      <template #nav-bar-title-after>
+        <slot name="nav-bar-title-after" />
+      </template>
+      <template #nav-bar-content-before>
+        <slot name="nav-bar-content-before" />
+      </template>
+      <template #nav-bar-content-after>
+        <slot name="nav-bar-content-after" />
+      </template>
+    </VPNavbar>
+
+    <VPNavScreen :open="isScreenOpen">
+      <template #nav-screen-content-before>
+        <slot name="nav-screen-content-before" />
+      </template>
+      <template #nav-screen-content-after>
+        <slot name="nav-screen-content-after" />
+      </template>
+    </VPNavScreen>
+  </div>
+</template>
+
+<style scoped>
+.vp-nav {
+  position: relative;
+  top: var(--vp-layout-top-height, 0);
+
+  /* rtl:ignore */
+  left: 0;
+  z-index: var(--vp-z-index-nav);
+  width: 100%;
+  pointer-events: none;
+}
+
+.vp-nav.fixed {
+  position: fixed;
+}
+
+.vp-nav.fixed :deep(.vp-navbar) {
+  background-color: var(--vp-nav-bg-color);
+  border-bottom-color: var(--vp-c-gutter);
+}
+
+@media (min-width: 960px) {
+  .vp-nav {
+    position: fixed;
+  }
+}
+</style>
diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
new file mode 100644
index 00000000..fa069c37
--- /dev/null
+++ b/theme/src/client/components/Nav/VPNavBar.vue
@@ -0,0 +1,268 @@
+<script lang="ts" setup>
+import { useWindowScroll } from '@vueuse/core'
+import { ref, watchPostEffect } from 'vue'
+import { useSidebar } from '../../composables/sidebar.js'
+import { useData } from '../../composables/data.js'
+import VPNavBarAppearance from './VPNavBarAppearance.vue'
+import VPNavBarExtra from './VPNavBarExtra.vue'
+import VPNavBarHamburger from './VPNavBarHamburger.vue'
+import VPNavBarMenu from './VPNavBarMenu.vue'
+import VPNavBarSearch from './VPNavBarSearch.vue'
+import VPNavBarSocialLinks from './VPNavBarSocialLinks.vue'
+import VPNavBarTitle from './VPNavBarTitle.vue'
+import VPNavBarTranslations from './VPNavBarTranslations.vue'
+
+defineProps<{
+  isScreenOpen: boolean
+}>()
+defineEmits<(e: 'toggleScreen') => void>()
+
+const { frontmatter } = useData()
+
+const { y } = useWindowScroll()
+const { hasSidebar } = useSidebar()
+
+const classes = ref<Record<string, boolean>>({})
+watchPostEffect(() => {
+  classes.value = {
+    'has-sidebar': hasSidebar.value,
+    'home': frontmatter.value.pageLayout === 'home',
+    'top': y.value === 0,
+  }
+})
+</script>
+
+<template>
+  <div class="vp-navbar" :class="classes">
+    <div class="wrapper">
+      <div class="container">
+        <div class="title">
+          <VPNavBarTitle>
+            <template #nav-bar-title-before>
+              <slot name="nav-bar-title-before" />
+            </template>
+            <template #nav-bar-title-after>
+              <slot name="nav-bar-title-after" />
+            </template>
+          </VPNavBarTitle>
+        </div>
+
+        <div class="content">
+          <div class="content-body">
+            <slot name="nav-bar-content-before" />
+            <VPNavBarSearch class="search" />
+            <VPNavBarMenu class="menu" />
+            <VPNavBarTranslations class="translations" />
+            <VPNavBarAppearance class="appearance" />
+            <VPNavBarSocialLinks class="social-links" />
+            <VPNavBarExtra class="extra" />
+            <slot name="nav-bar-content-after" />
+            <VPNavBarHamburger
+              class="hamburger"
+              :active="isScreenOpen"
+              @click="$emit('toggleScreen')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="divider">
+      <div class="divider-line" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vp-navbar {
+  position: relative;
+  height: var(--vp-nav-height);
+  white-space: nowrap;
+  pointer-events: none;
+  transition: var(--t-color);
+  transition-property: background-color, color, border-bottom;
+}
+
+.vp-navbar:not(.home) {
+  background-color: var(--vp-nav-bg-color);
+}
+
+@media (min-width: 960px) {
+  .vp-navbar:not(.home) {
+    background-color: transparent;
+  }
+
+  .vp-navbar:not(.has-sidebar, .home.top) {
+    background-color: var(--vp-nav-bg-color);
+  }
+}
+
+.wrapper {
+  padding: 0 8px 0 24px;
+}
+
+@media (min-width: 768px) {
+  .wrapper {
+    padding: 0 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-navbar.has-sidebar .wrapper {
+    padding: 0;
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  max-width: calc(var(--vp-layout-max-width) - 64px);
+  height: var(--vp-nav-height);
+  margin: 0 auto;
+  pointer-events: none;
+}
+
+.content {
+  flex-grow: 1;
+}
+
+.title {
+  flex-shrink: 0;
+  height: calc(var(--vp-nav-height) - 1px);
+  transition: background-color var(--t-color);
+}
+
+.container > .title,
+.container > .content {
+  pointer-events: none;
+}
+
+.container :deep(*) {
+  pointer-events: auto;
+}
+
+@media (min-width: 960px) {
+  .vp-navbar.has-sidebar .container {
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-navbar.has-sidebar .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: var(--vp-sidebar-width);
+    height: var(--vp-nav-height);
+    padding: 0 32px;
+    background-color: transparent;
+  }
+}
+
+@media (min-width: 1440px) {
+  .vp-navbar.has-sidebar .title {
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left:
+      max(32px,
+      calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-navbar.has-sidebar .content {
+    position: relative;
+    z-index: 1;
+    padding-right: 32px;
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
+@media (min-width: 1440px) {
+  .vp-navbar.has-sidebar .content {
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
+.content-body {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  height: var(--vp-nav-height);
+
+  transition: background-color var(--t-color);
+}
+
+@media (min-width: 960px) {
+  .vp-navbar:not(.home.top) .content-body {
+    position: relative;
+    background-color: var(--vp-nav-bg-color);
+  }
+
+  .vp-navbar:not(.has-sidebar, .home.top) .content-body {
+    background-color: transparent;
+  }
+}
+
+@media (max-width: 767px) {
+  .content-body {
+    column-gap: 0.5rem;
+  }
+}
+
+.menu + .translations::before,
+.menu + .appearance::before,
+.menu + .social-links::before,
+.translations + .appearance::before,
+.translations + .social-links::before,
+.appearance + .social-links::before {
+  width: 1px;
+  height: 24px;
+  margin-right: 8px;
+  margin-left: 8px;
+  content: "";
+  background-color: var(--vp-c-divider);
+  transition: background-color var(--t-color);
+}
+
+.menu + .appearance::before,
+.translations + .appearance::before {
+  margin-right: 16px;
+}
+
+.appearance + .social-links::before {
+  margin-left: 16px;
+}
+
+.social-links {
+  margin-right: -8px;
+}
+
+@media (min-width: 1440px) {
+  .vp-navbar.has-sidebar .divider {
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
+  }
+}
+
+.divider-line {
+  width: 100%;
+  height: 1px;
+  transition: background-color var(--t-color);
+}
+
+.vp-navbar:not(.home) .divider-line {
+  background-color: var(--vp-c-gutter);
+}
+
+@media (min-width: 960px) {
+  .vp-navbar:not(.home.top) .divider-line {
+    background-color: var(--vp-c-gutter);
+  }
+
+  .vp-navbar:not(.has-sidebar, .home.top) .divider {
+    background-color: var(--vp-c-gutter);
+  }
+}
+</style>
diff --git a/theme/src/client/components/Nav/NavBarAppearance.vue b/theme/src/client/components/Nav/VPNavBarAppearance.vue
similarity index 83%
rename from theme/src/client/components/Nav/NavBarAppearance.vue
rename to theme/src/client/components/Nav/VPNavBarAppearance.vue
index 722ca102..0511ba86 100644
--- a/theme/src/client/components/Nav/NavBarAppearance.vue
+++ b/theme/src/client/components/Nav/VPNavBarAppearance.vue
@@ -8,19 +8,19 @@ const { theme } = useData()
 <template>
   <div
     v-if="theme.appearance && theme.appearance !== 'force-dark'"
-    class="navbar-appearance"
+    class="vp-navbar-appearance"
   >
     <VPSwitchAppearance />
   </div>
 </template>
 
 <style scoped>
-.navbar-appearance {
+.vp-navbar-appearance {
   display: none;
 }
 
 @media (min-width: 1280px) {
-  .navbar-appearance {
+  .vp-navbar-appearance {
     display: flex;
     align-items: center;
   }
diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/VPNavBarExtra.vue
similarity index 88%
rename from theme/src/client/components/Nav/NavBarExtra.vue
rename to theme/src/client/components/Nav/VPNavBarExtra.vue
index 13f9403a..b28353d7 100644
--- a/theme/src/client/components/Nav/NavBarExtra.vue
+++ b/theme/src/client/components/Nav/VPNavBarExtra.vue
@@ -10,10 +10,6 @@ import VPSwitchAppearance from '../VPSwitchAppearance.vue'
 const { theme } = useData()
 const { localeLinks, currentLang } = useLangs()
 
-const hasExtraContent = computed(
-  () => theme.value.appearance || theme.value.social,
-)
-
 const social = computed(() => {
   const includes = theme.value.navbarSocialInclude ?? []
   if (!includes.length)
@@ -23,10 +19,21 @@ const social = computed(() => {
     ({ icon }) => typeof icon === 'string' && includes.includes(icon),
   )
 })
+
+const hasExtraContent = computed(
+  () =>
+    (localeLinks.value.length && currentLang.value.label)
+    || theme.value.appearance
+    || social.value?.length,
+)
 </script>
 
 <template>
-  <VPFlyout v-if="hasExtraContent" class="navbar-extra" label="extra navigation">
+  <VPFlyout
+    v-if="hasExtraContent"
+    class="vp-navbar-extra"
+    label="extra navigation"
+  >
     <div
       v-if="localeLinks.length && currentLang.label"
       class="group translations"
@@ -60,19 +67,19 @@ const social = computed(() => {
 </template>
 
 <style scoped>
-.navbar-extra {
+.vp-navbar-extra {
   display: none;
   margin-right: -12px;
 }
 
 @media (min-width: 768px) {
-  .navbar-extra {
+  .vp-navbar-extra {
     display: block;
   }
 }
 
 @media (min-width: 1280px) {
-  .navbar-extra {
+  .vp-navbar-extra {
     display: none;
   }
 }
diff --git a/theme/src/client/components/Nav/NavBarHamburger.vue b/theme/src/client/components/Nav/VPNavBarHamburger.vue
similarity index 78%
rename from theme/src/client/components/Nav/NavBarHamburger.vue
rename to theme/src/client/components/Nav/VPNavBarHamburger.vue
index dd7787b7..fe6e226e 100644
--- a/theme/src/client/components/Nav/NavBarHamburger.vue
+++ b/theme/src/client/components/Nav/VPNavBarHamburger.vue
@@ -9,7 +9,7 @@ defineEmits<(e: 'click') => void>()
 <template>
   <button
     type="button"
-    class="navbar-hamburger"
+    class="vp-navbar-hamburger"
     :class="{ active }"
     aria-label="mobile navigation"
     :aria-expanded="active"
@@ -25,7 +25,7 @@ defineEmits<(e: 'click') => void>()
 </template>
 
 <style scoped>
-.navbar-hamburger {
+.vp-navbar-hamburger {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +34,7 @@ defineEmits<(e: 'click') => void>()
 }
 
 @media (min-width: 768px) {
-  .navbar-hamburger {
+  .vp-navbar-hamburger {
     display: none;
   }
 }
@@ -77,42 +77,42 @@ defineEmits<(e: 'click') => void>()
   transform: translateX(4px);
 }
 
-.navbar-hamburger:hover .top {
+.vp-navbar-hamburger:hover .top {
   top: 0;
   left: 0;
   transform: translateX(4px);
 }
 
-.navbar-hamburger:hover .middle {
+.vp-navbar-hamburger:hover .middle {
   top: 6px;
   left: 0;
   transform: translateX(0);
 }
 
-.navbar-hamburger:hover .bottom {
+.vp-navbar-hamburger:hover .bottom {
   top: 12px;
   left: 0;
   transform: translateX(8px);
 }
 
-.navbar-hamburger.active .top {
+.vp-navbar-hamburger.active .top {
   top: 6px;
   transform: translateX(0) rotate(225deg);
 }
 
-.navbar-hamburger.active .middle {
+.vp-navbar-hamburger.active .middle {
   top: 6px;
   transform: translateX(16px);
 }
 
-.navbar-hamburger.active .bottom {
+.vp-navbar-hamburger.active .bottom {
   top: 6px;
   transform: translateX(0) rotate(135deg);
 }
 
-.navbar-hamburger.active:hover .top,
-.navbar-hamburger.active:hover .middle,
-.navbar-hamburger.active:hover .bottom {
+.vp-navbar-hamburger.active:hover .top,
+.vp-navbar-hamburger.active:hover .middle,
+.vp-navbar-hamburger.active:hover .bottom {
   background-color: var(--vp-c-text-2);
   transition:
     top 0.25s,
diff --git a/theme/src/client/components/Nav/NavBarMenu.vue b/theme/src/client/components/Nav/VPNavBarMenu.vue
similarity index 62%
rename from theme/src/client/components/Nav/NavBarMenu.vue
rename to theme/src/client/components/Nav/VPNavBarMenu.vue
index 1069f751..95c11493 100644
--- a/theme/src/client/components/Nav/NavBarMenu.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenu.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useData } from '../../composables/data.js'
-import NavBarMenuGroup from './NavBarMenuGroup.vue'
-import NavBarMenuLink from './NavBarMenuLink.vue'
+import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
+import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
 
 const { theme } = useData()
 </script>
@@ -10,23 +10,23 @@ const { theme } = useData()
   <nav
     v-if="theme.navbar"
     aria-labelledby="main-nav-aria-label"
-    class="navbar-menu"
+    class="vp-navbar-menu"
   >
     <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
     <template v-for="item in theme.navbar" :key="item.text">
-      <NavBarMenuLink v-if="'link' in item" :item="item" />
-      <NavBarMenuGroup v-else :item="item" />
+      <VPNavBarMenuLink v-if="'link' in item" :item="item" />
+      <VPNavBarMenuGroup v-else :item="item" />
     </template>
   </nav>
 </template>
 
 <style scoped>
-.navbar-menu {
+.vp-navbar-menu {
   display: none;
 }
 
 @media (min-width: 768px) {
-  .navbar-menu {
+  .vp-navbar-menu {
     display: flex;
   }
 }
diff --git a/theme/src/client/components/Nav/NavBarMenuGroup.vue b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue
similarity index 75%
rename from theme/src/client/components/Nav/NavBarMenuGroup.vue
rename to theme/src/client/components/Nav/VPNavBarMenuGroup.vue
index 84661283..468c0994 100644
--- a/theme/src/client/components/Nav/NavBarMenuGroup.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenuGroup.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { resolveRouteFullPath } from 'vuepress/client'
 import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import VPFlyout from '../VPFlyout.vue'
@@ -15,7 +16,7 @@ function isChildActive(navItem: NavItem) {
   if ('link' in navItem) {
     return isActive(
       page.value.path,
-      navItem.link,
+      resolveRouteFullPath(navItem.link),
       !!props.item.activeMatch,
     )
   }
@@ -28,8 +29,11 @@ const childrenActive = computed(() => isChildActive(props.item))
 
 <template>
   <VPFlyout
-    class="navbar-menu-group" :class="{
-      active: isActive(page.path, item.activeMatch, !!item.activeMatch) || childrenActive,
+    class="vp-navbar-menu-group" :class="{
+      active: isActive(
+        page.path, item.activeMatch,
+        !!item.activeMatch,
+      ) || childrenActive,
     }"
     :button="item.text"
     :items="item.items"
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
similarity index 81%
rename from theme/src/client/components/Nav/NavBarMenuLink.vue
rename to theme/src/client/components/Nav/VPNavBarMenuLink.vue
index 5519e428..3456a1dd 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavBarMenuLink.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { resolveRoutePath } from 'vuepress/client'
 import type { NavItemWithLink } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import VPLink from '../VPLink.vue'
@@ -17,15 +18,18 @@ const { page } = useData()
     class="navbar-menu-link" :class="{
       active: isActive(
         page.path,
-        item.activeMatch || item.link,
+        item.activeMatch || resolveRoutePath(item.link),
         !!item.activeMatch,
       ),
     }"
     :href="item.link"
-    :no-icon="true"
+    no-icon
+    :target="item.target"
+    :rel="item.rel"
+    tabindex="0"
   >
     <VPIcon v-if="item.icon" :name="item.icon" />
-    <i v-text="item.text" />
+    <span v-html="item.text" />
   </VPLink>
 </template>
 
diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/VPNavBarSearch.vue
similarity index 60%
rename from theme/src/client/components/Nav/NavBarSearch.vue
rename to theme/src/client/components/Nav/VPNavBarSearch.vue
index 09970773..e6aa68b5 100644
--- a/theme/src/client/components/Nav/NavBarSearch.vue
+++ b/theme/src/client/components/Nav/VPNavBarSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar-search">
+  <div class="vp-navbar-search">
     <DocSearch />
   </div>
 </template>
diff --git a/theme/src/client/components/Nav/NavBarSocialLinks.vue b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue
similarity index 88%
rename from theme/src/client/components/Nav/NavBarSocialLinks.vue
rename to theme/src/client/components/Nav/VPNavBarSocialLinks.vue
index 90ea20fe..2373b85b 100644
--- a/theme/src/client/components/Nav/NavBarSocialLinks.vue
+++ b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue
@@ -19,18 +19,18 @@ const social = computed(() => {
 <template>
   <VPSocialLinks
     v-if="social"
-    class="navbar-social-links"
+    class="vp-navbar-social-links"
     :links="social"
   />
 </template>
 
 <style scoped>
-.navbar-social-links {
+.vp-navbar-social-links {
   display: none;
 }
 
 @media (min-width: 1280px) {
-  .navbar-social-links {
+  .vp-navbar-social-links {
     display: flex;
     align-items: center;
   }
diff --git a/theme/src/client/components/Nav/NavBarTitle.vue b/theme/src/client/components/Nav/VPNavBarTitle.vue
similarity index 82%
rename from theme/src/client/components/Nav/NavBarTitle.vue
rename to theme/src/client/components/Nav/VPNavBarTitle.vue
index 22d5847f..2c34f006 100644
--- a/theme/src/client/components/Nav/NavBarTitle.vue
+++ b/theme/src/client/components/Nav/VPNavBarTitle.vue
@@ -11,14 +11,18 @@ const routeLocale = useRouteLocale()
 </script>
 
 <template>
-  <div class="navbar-title" :class="{ 'has-sidebar': hasSidebar }">
+  <div class="vp-navbar-title" :class="{ 'has-sidebar': hasSidebar }">
     <VPLink class="title" :href="theme.home ?? routeLocale">
+      <slot name="nav-bar-title-before" />
+
       <VPImage
         v-if="theme.logo"
         class="logo"
         :image="{ light: theme.logo, dark: theme.logoDark || theme.logo }"
       />
-      {{ site.title }}
+      <span>{{ site.title }}</span>
+
+      <slot name="nav-bar-title-after" />
     </VPLink>
   </div>
 </template>
@@ -36,16 +40,12 @@ const routeLocale = useRouteLocale()
   transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color);
 }
 
-.title:hover {
-  opacity: 0.6;
-}
-
 @media (min-width: 960px) {
   .title {
     flex-shrink: 0;
   }
 
-  .navbar-title.has-sidebar .title {
+  .vp-navbar-title.has-sidebar .title {
     border-bottom-color: var(--vp-c-divider);
   }
 }
diff --git a/theme/src/client/components/Nav/NavBarTranslations.vue b/theme/src/client/components/Nav/VPNavBarTranslations.vue
similarity index 91%
rename from theme/src/client/components/Nav/NavBarTranslations.vue
rename to theme/src/client/components/Nav/VPNavBarTranslations.vue
index af9e0de8..45618772 100644
--- a/theme/src/client/components/Nav/NavBarTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavBarTranslations.vue
@@ -11,7 +11,7 @@ const { currentLang, localeLinks } = useLangs()
 <template>
   <VPFlyout
     v-if="localeLinks.length && currentLang.label"
-    class="navbar-translations"
+    class="vp-navbar-translations"
     icon="vpi-languages"
     :label="theme.selectLanguageText || 'Change Language'"
   >
@@ -28,12 +28,12 @@ const { currentLang, localeLinks } = useLangs()
 </template>
 
 <style lang="scss" scoped>
-.navbar-translations {
+.vp-navbar-translations {
   display: none;
 }
 
 @media (min-width: 1280px) {
-  .navbar-translations {
+  .vp-navbar-translations {
     display: flex;
     align-items: center;
   }
diff --git a/theme/src/client/components/Nav/NavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
similarity index 53%
rename from theme/src/client/components/Nav/NavScreen.vue
rename to theme/src/client/components/Nav/VPNavScreen.vue
index 4bf7eba4..aa4c8ea6 100644
--- a/theme/src/client/components/Nav/NavScreen.vue
+++ b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useScrollLock } from '@vueuse/core'
 import { inBrowser } from '../../utils/index.js'
-import NavScreenAppearance from './NavScreenAppearance.vue'
-import NavScreenMenu from './NavScreenMenu.vue'
-import NavScreenSocialLinks from './NavScreenSocialLinks.vue'
-import NavScreenTranslates from './NavScreenTranslations.vue'
+import VPNavScreenAppearance from './VPNavScreenAppearance.vue'
+import VPNavScreenMenu from './VPNavScreenMenu.vue'
+import VPNavScreenSocialLinks from './VPNavScreenSocialLinks.vue'
+import VPNavScreenTranslates from './VPNavScreenTranslations.vue'
 
 defineProps<{
   open: boolean
@@ -19,25 +19,30 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
     @enter="isLocked = true"
     @after-leave="isLocked = false"
   >
-    <div v-if="open" id="navScreen" class="nav-screen">
+    <div v-if="open" id="navScreen" class="vp-nav-screen">
       <div class="container">
-        <NavScreenMenu class="menu" />
-        <NavScreenTranslates class="translations" />
-        <NavScreenAppearance class="appearance" />
-        <NavScreenSocialLinks class="social-links" />
+        <slot name="nav-screen-content-before" />
+        <VPNavScreenMenu class="menu" />
+        <VPNavScreenTranslates class="translations" />
+        <VPNavScreenAppearance class="appearance" />
+        <VPNavScreenSocialLinks class="social-links" />
+        <slot name="nav-screen-content-after" />
       </div>
     </div>
   </Transition>
 </template>
 
 <style scoped>
-.nav-screen {
+.vp-nav-screen {
   position: fixed;
-  inset: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) 0 0;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);
 
   /* rtl:ignore */
+  right: 0;
+  bottom: 0;
 
   /* rtl:ignore */
+  left: 0;
   width: 100%;
   padding: 0 32px;
   overflow-y: auto;
@@ -53,28 +58,28 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   margin: 0 auto;
 }
 
-.nav-screen.fade-enter-active,
-.nav-screen.fade-leave-active {
+.vp-nav-screen.fade-enter-active,
+.vp-nav-screen.fade-leave-active {
   transition: opacity var(--t-color);
 }
 
-.nav-screen.fade-enter-active .container,
-.nav-screen.fade-leave-active .container {
+.vp-nav-screen.fade-enter-active .container,
+.vp-nav-screen.fade-leave-active .container {
   transition: transform var(--t-color);
 }
 
-.nav-screen.fade-enter-from,
-.nav-screen.fade-leave-to {
+.vp-nav-screen.fade-enter-from,
+.vp-nav-screen.fade-leave-to {
   opacity: 0;
 }
 
-.nav-screen.fade-enter-from .container,
-.nav-screen.fade-leave-to .container {
+.vp-nav-screen.fade-enter-from .container,
+.vp-nav-screen.fade-leave-to .container {
   transform: translateY(-8px);
 }
 
 @media (min-width: 768px) {
-  .nav-screen {
+  .vp-nav-screen {
     display: none;
   }
 }
diff --git a/theme/src/client/components/Nav/NavScreenAppearance.vue b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
similarity index 92%
rename from theme/src/client/components/Nav/NavScreenAppearance.vue
rename to theme/src/client/components/Nav/VPNavScreenAppearance.vue
index 5aec2d98..eea19ff7 100644
--- a/theme/src/client/components/Nav/NavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/VPNavScreenAppearance.vue
@@ -8,7 +8,7 @@ const { theme } = useData()
 <template>
   <div
     v-if="theme.appearance && theme.appearance !== 'force-dark'"
-    class="nav-screen-appearance"
+    class="vp-nav-screen-appearance"
   >
     <p class="text">
       {{ theme.appearanceText ?? 'Appearance' }}
@@ -18,7 +18,7 @@ const { theme } = useData()
 </template>
 
 <style scoped>
-.nav-screen-appearance {
+.vp-nav-screen-appearance {
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/theme/src/client/components/Nav/NavScreenMenu.vue b/theme/src/client/components/Nav/VPNavScreenMenu.vue
similarity index 66%
rename from theme/src/client/components/Nav/NavScreenMenu.vue
rename to theme/src/client/components/Nav/VPNavScreenMenu.vue
index 3309f436..275ab1fc 100644
--- a/theme/src/client/components/Nav/NavScreenMenu.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenu.vue
@@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import { useData } from '../../composables/data.js'
-import NavScreenMenuGroup from './NavScreenMenuGroup.vue'
-import NavScreenMenuLink from './NavScreenMenuLink.vue'
+import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
+import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
 
 const { theme } = useData()
 </script>
 
 <template>
-  <nav v-if="theme.navbar" class="nav-screen-menu">
+  <nav v-if="theme.navbar" class="vp-nav-screen-menu">
     <template v-for="item in theme.navbar" :key="item.text">
-      <NavScreenMenuLink
+      <VPNavScreenMenuLink
         v-if="'link' in item"
         :text="item.text"
         :link="item.link"
         :icon="item.icon"
       />
-      <NavScreenMenuGroup
+      <VPNavScreenMenuGroup
         v-else
         :text="item.text || ''"
         :items="item.items"
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroup.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
similarity index 78%
rename from theme/src/client/components/Nav/NavScreenMenuGroup.vue
rename to theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
index 2d618fb6..44ead460 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroup.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroup.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import VPIcon from '../VPIcon.vue'
-import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
-import NavScreenMenuGroupSection from './NavScreenMenuGroupSection.vue'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
 
 const props = defineProps<{
   text: string
@@ -22,7 +22,7 @@ function toggle() {
 </script>
 
 <template>
-  <div class="nav-screen-menu-group" :class="{ open: isOpen }">
+  <div class="vp-nav-screen-menu-group" :class="{ open: isOpen }">
     <button
       class="button"
       :aria-controls="groupId"
@@ -31,7 +31,7 @@ function toggle() {
     >
       <span class="button-text">
         <VPIcon v-if="icon" :name="icon" />
-        <i v-text="text" />
+        <span v-html="text" />
       </span>
       <span class="vpi-plus button-icon" />
     </button>
@@ -39,7 +39,7 @@ function toggle() {
     <div :id="groupId" class="items">
       <template v-for="item in items" :key="item.text">
         <div v-if="'link' in item" :key="item.text" class="item">
-          <NavScreenMenuGroupLink
+          <VPNavScreenMenuGroupLink
             :text="item.text"
             :link="item.link"
             :icon="item.icon"
@@ -47,7 +47,7 @@ function toggle() {
         </div>
 
         <div v-else class="group">
-          <NavScreenMenuGroupSection
+          <VPNavScreenMenuGroupSection
             :text="item.text"
             :items="item.items"
             :icon="item.icon"
@@ -59,22 +59,22 @@ function toggle() {
 </template>
 
 <style scoped>
-.nav-screen-menu-group {
+.vp-nav-screen-menu-group {
   height: 48px;
   overflow: hidden;
   border-bottom: 1px solid var(--vp-c-divider);
   transition: border-color var(--t-color);
 }
 
-.nav-screen-menu-group .items {
+.vp-nav-screen-menu-group .items {
   visibility: hidden;
 }
 
-.nav-screen-menu-group.open .items {
+.vp-nav-screen-menu-group.open .items {
   visibility: visible;
 }
 
-.nav-screen-menu-group.open {
+.vp-nav-screen-menu-group.open {
   height: auto;
   padding-bottom: 10px;
 }
@@ -96,7 +96,7 @@ function toggle() {
   color: var(--vp-c-brand-1);
 }
 
-.nav-screen-menu-group.open .button {
+.vp-nav-screen-menu-group.open .button {
   padding-bottom: 6px;
   color: var(--vp-c-brand-1);
 }
@@ -110,15 +110,11 @@ function toggle() {
     transform 0.25s;
 }
 
-.nav-screen-menu-group.open .button-icon {
+.vp-nav-screen-menu-group.open .button-icon {
   /* rtl:ignore */
   transform: rotate(45deg);
 }
 
-.button-text i {
-  font-style: normal;
-}
-
 .group:first-child {
   padding-top: 0;
 }
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
similarity index 85%
rename from theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
rename to theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
index 46c2f6e1..cd1c084e 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupLink.vue
@@ -14,7 +14,7 @@ const closeScreen = inject('close-screen') as () => void
 
 <template>
   <VPLink
-    class="nav-screen-menu-group-link"
+    class="vp-nav-screen-menu-group-link"
     :href="link"
     @click="closeScreen"
   >
@@ -24,7 +24,7 @@ const closeScreen = inject('close-screen') as () => void
 </template>
 
 <style scoped>
-.nav-screen-menu-group-link {
+.vp-nav-screen-menu-group-link {
   display: block;
   margin-left: 12px;
   font-size: 14px;
@@ -34,7 +34,7 @@ const closeScreen = inject('close-screen') as () => void
   transition: color var(--t-color);
 }
 
-.nav-screen-menu-group-link:hover {
+.vp-nav-screen-menu-group-link:hover {
   color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
similarity index 78%
rename from theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
rename to theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
index ab8fc1f0..f3e0faed 100644
--- a/theme/src/client/components/Nav/NavScreenMenuGroupSection.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuGroupSection.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NavItemWithLink } from '../../../shared/index.js'
 import VPIcon from '../VPIcon.vue'
-import NavScreenMenuGroupLink from './NavScreenMenuGroupLink.vue'
+import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
 
 defineProps<{
   icon?: string | { svg: string }
@@ -11,12 +11,12 @@ defineProps<{
 </script>
 
 <template>
-  <div class="nav-screen-menu-group-section">
+  <div class="vp-nav-screen-menu-group-section">
     <p v-if="text" class="title">
       <VPIcon v-if="icon" :name="icon" />
       {{ text }}
     </p>
-    <NavScreenMenuGroupLink
+    <VPNavScreenMenuGroupLink
       v-for="item in items"
       :key="item.text"
       :text="item.text"
@@ -27,7 +27,7 @@ defineProps<{
 </template>
 
 <style scoped>
-.nav-screen-menu-group-section {
+.vp-nav-screen-menu-group-section {
   display: block;
 }
 
diff --git a/theme/src/client/components/Nav/NavScreenMenuLink.vue b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
similarity index 83%
rename from theme/src/client/components/Nav/NavScreenMenuLink.vue
rename to theme/src/client/components/Nav/VPNavScreenMenuLink.vue
index 6a36cae4..aba938df 100644
--- a/theme/src/client/components/Nav/NavScreenMenuLink.vue
+++ b/theme/src/client/components/Nav/VPNavScreenMenuLink.vue
@@ -13,14 +13,14 @@ const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VPLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
+  <VPLink class="vp-nav-screen-menu-link" :href="link" @click="closeScreen">
     <VPIcon v-if="icon" :name="icon" />
     <i v-text="text" />
   </VPLink>
 </template>
 
 <style scoped>
-.nav-screen-menu-link {
+.vp-nav-screen-menu-link {
   display: block;
   padding: 12px 0 11px;
   font-size: 14px;
@@ -33,7 +33,7 @@ const closeScreen = inject('close-screen') as () => void
     color var(--t-color);
 }
 
-.nav-screen-menu-link:hover {
+.vp-nav-screen-menu-link:hover {
   color: var(--vp-c-brand-1);
 }
 </style>
diff --git a/theme/src/client/components/Nav/NavScreenSocialLinks.vue b/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
similarity index 87%
rename from theme/src/client/components/Nav/NavScreenSocialLinks.vue
rename to theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
index bdd07ae9..76d313db 100644
--- a/theme/src/client/components/Nav/NavScreenSocialLinks.vue
+++ b/theme/src/client/components/Nav/VPNavScreenSocialLinks.vue
@@ -8,7 +8,7 @@ const { theme } = useData()
 <template>
   <VPSocialLinks
     v-if="theme.social"
-    class="VPNavScreenSocialLinks"
+    class="vp-nav-screen-social-links"
     :links="theme.social"
   />
 </template>
diff --git a/theme/src/client/components/Nav/NavScreenTranslations.vue b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
similarity index 92%
rename from theme/src/client/components/Nav/NavScreenTranslations.vue
rename to theme/src/client/components/Nav/VPNavScreenTranslations.vue
index 45a839b4..592dae40 100644
--- a/theme/src/client/components/Nav/NavScreenTranslations.vue
+++ b/theme/src/client/components/Nav/VPNavScreenTranslations.vue
@@ -14,7 +14,7 @@ function toggle() {
 <template>
   <div
     v-if="localeLinks.length && currentLang.label"
-    class="nav-screen-translations"
+    class="vp-nav-screen-translations"
     :class="{ open: isOpen }"
   >
     <button class="title" @click="toggle">
@@ -34,12 +34,12 @@ function toggle() {
 </template>
 
 <style lang="scss" scoped>
-.nav-screen-translations {
+.vp-nav-screen-translations {
   height: 24px;
   overflow: hidden;
 }
 
-.nav-screen-translations.open {
+.vp-nav-screen-translations.open {
   height: auto;
 }
 
diff --git a/theme/src/client/components/Nav/index.vue b/theme/src/client/components/Nav/index.vue
deleted file mode 100644
index 8dd7e852..00000000
--- a/theme/src/client/components/Nav/index.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide } from 'vue'
-import { useNav } from '../../composables/nav.js'
-import { useData } from '../../composables/data.js'
-import Navbar from './NavBar.vue'
-import NavScreen from './NavScreen.vue'
-
-const { page } = useData()
-
-const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-
-const fixedInclude = ['blog', 'friends', 'blog-archives', 'blog-tags']
-
-const fixed = computed(() => {
-  return fixedInclude.includes(page.value.type as string)
-})
-
-provide('close-screen', closeScreen)
-</script>
-
-<template>
-  <div class="nav-wrapper" :class="{ fixed }">
-    <Navbar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
-    <NavScreen :open="isScreenOpen" />
-  </div>
-</template>
-
-<style scoped>
-.nav-wrapper {
-  position: relative;
-  top: var(--vp-layout-top-height, 0);
-
-  /* rtl:ignore */
-  left: 0;
-  z-index: var(--vp-z-index-nav);
-  width: 100%;
-  pointer-events: none;
-}
-
-.nav-wrapper.fixed {
-  position: fixed;
-}
-
-.nav-wrapper.fixed :deep(.navbar-wrapper) {
-  background-color: var(--vp-nav-bg-color);
-  border-bottom-color: var(--vp-c-gutter);
-}
-
-@media (min-width: 960px) {
-  .nav-wrapper {
-    position: fixed;
-  }
-}
-</style>
diff --git a/theme/src/client/components/VPEncryptForm.vue b/theme/src/client/components/VPEncryptForm.vue
index d380f96e..a246557b 100644
--- a/theme/src/client/components/VPEncryptForm.vue
+++ b/theme/src/client/components/VPEncryptForm.vue
@@ -26,7 +26,7 @@ function onSubmit() {
 </script>
 
 <template>
-  <div class="encrypt-form">
+  <div class="vp-encrypt-form">
     <p class="encrypt-text" v-html="info ?? 'Only Password can access this site'" />
     <p class="encrypt-input-wrapper">
       <span class="vpi-lock icon-lock" />
@@ -47,7 +47,7 @@ function onSubmit() {
 </template>
 
 <style scoped>
-.encrypt-form {
+.vp-encrypt-form {
   margin-top: 20px;
 }
 
diff --git a/theme/src/client/components/VPEncryptGlobal.vue b/theme/src/client/components/VPEncryptGlobal.vue
index 37da7715..eab6fee2 100644
--- a/theme/src/client/components/VPEncryptGlobal.vue
+++ b/theme/src/client/components/VPEncryptGlobal.vue
@@ -13,7 +13,7 @@ const title = computed(() => avatar.value?.name || site.value.title)
 </script>
 
 <template>
-  <div class="global-encrypt-wrapper">
+  <div class="vp-global-encrypt">
     <div class="global-encrypt-container">
       <div v-if="avatar || title" class="profile">
         <p v-if="avatar" class="avatar" :class="{ circle: avatar.circle }">
@@ -30,7 +30,7 @@ const title = computed(() => avatar.value?.name || site.value.title)
 </template>
 
 <style scoped>
-.global-encrypt-wrapper {
+.vp-global-encrypt {
   display: flex;
   flex: 1;
   width: 100%;
@@ -40,7 +40,7 @@ const title = computed(() => avatar.value?.name || site.value.title)
 }
 
 @media (min-width: 768px) {
-  .global-encrypt-wrapper {
+  .vp-global-encrypt {
     align-items: center;
     justify-content: center;
     background-color: var(--vp-c-bg-soft);
diff --git a/theme/src/client/components/VPEncryptPage.vue b/theme/src/client/components/VPEncryptPage.vue
index 216bbecf..a24204fd 100644
--- a/theme/src/client/components/VPEncryptPage.vue
+++ b/theme/src/client/components/VPEncryptPage.vue
@@ -8,7 +8,7 @@ const { comparePage } = usePageEncrypt()
 </script>
 
 <template>
-  <div class="page-encrypt-wrapper">
+  <div class="vp-page-encrypt">
     <div class="logo">
       <span class="vpi-lock icon-lock-head" />
     </div>
@@ -17,7 +17,7 @@ const { comparePage } = usePageEncrypt()
 </template>
 
 <style scoped>
-.page-encrypt-wrapper .logo {
+.vp-page-encrypt .logo {
   text-align: center;
 }
 
@@ -29,7 +29,7 @@ const { comparePage } = usePageEncrypt()
 }
 
 @media (min-width: 768px) {
-  .page-encrypt-wrapper {
+  .vp-page-encrypt {
     width: 400px;
     padding: 20px;
     margin: 40px auto 0;
diff --git a/theme/src/client/components/VPMenuGroup.vue b/theme/src/client/components/VPMenuGroup.vue
index 5cca4b77..3148253c 100644
--- a/theme/src/client/components/VPMenuGroup.vue
+++ b/theme/src/client/components/VPMenuGroup.vue
@@ -10,7 +10,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="menu-group">
+  <div class="vp-menu-group">
     <p v-if="text" class="title">
       <VPIcon v-if="icon" :name="icon" />
       <span v-text="text" />
@@ -23,20 +23,20 @@ defineProps<{
 </template>
 
 <style scoped>
-.menu-group {
+.vp-menu-group {
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
   transition: border-top var(--t-color);
 }
 
-.menu-group:first-child {
+.vp-menu-group:first-child {
   padding-top: 0;
   margin-top: 0;
   border-top: 0;
 }
 
-.menu-group + .menu-group {
+.vp-menu-group + .vp-menu-group {
   margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider);
 }
diff --git a/theme/src/client/components/VPMenuLink.vue b/theme/src/client/components/VPMenuLink.vue
index 840500f2..9118d30d 100644
--- a/theme/src/client/components/VPMenuLink.vue
+++ b/theme/src/client/components/VPMenuLink.vue
@@ -12,7 +12,7 @@ const { page } = useData()
 </script>
 
 <template>
-  <div class="menu-link">
+  <div class="vp-menu-link">
     <VPLink
       :class="{
         active: isActive(
@@ -30,7 +30,7 @@ const { page } = useData()
 </template>
 
 <style scoped>
-.menu-group + .menu-link {
+.vp-menu-group + .vp-menu-link {
   padding: 12px 12px 0;
   margin: 12px -12px 0;
   border-top: 1px solid var(--vp-c-divider);
diff --git a/theme/src/client/components/VPSkipLink.vue b/theme/src/client/components/VPSkipLink.vue
index 286b7b1f..2b440adc 100644
--- a/theme/src/client/components/VPSkipLink.vue
+++ b/theme/src/client/components/VPSkipLink.vue
@@ -33,7 +33,7 @@ function focusOnTargetAnchor({ target }: Event) {
   <span ref="backToTop" tabindex="-1" />
   <a
     href="#VPContent"
-    class="skip-link visually-hidden"
+    class="vp-skip-link visually-hidden"
     @click="focusOnTargetAnchor"
   >
     Skip to content
@@ -41,7 +41,7 @@ function focusOnTargetAnchor({ target }: Event) {
 </template>
 
 <style scoped>
-.skip-link {
+.vp-skip-link {
   top: 8px;
   left: 8px;
   z-index: 999;
@@ -55,7 +55,7 @@ function focusOnTargetAnchor({ target }: Event) {
   box-shadow: var(--vp-shadow-3);
 }
 
-.skip-link:focus {
+.vp-skip-link:focus {
   width: auto;
   height: auto;
   clip: auto;
@@ -63,7 +63,7 @@ function focusOnTargetAnchor({ target }: Event) {
 }
 
 @media (min-width: 1280px) {
-  .skip-link {
+  .vp-skip-link {
     top: 14px;
     left: 16px;
   }
diff --git a/theme/src/client/layouts/Layout.vue b/theme/src/client/layouts/Layout.vue
index dc6d8d51..b01542da 100644
--- a/theme/src/client/layouts/Layout.vue
+++ b/theme/src/client/layouts/Layout.vue
@@ -4,7 +4,7 @@ import { watch } from 'vue'
 import VPBackdrop from '../components/VPBackdrop.vue'
 import VPContent from '../components/VPContent.vue'
 import VPLocalNav from '../components/VPLocalNav.vue'
-import Nav from '../components/Nav/index.vue'
+import VPNav from '../components/Nav/VPNav.vue'
 import VPSidebar from '../components/VPSidebar.vue'
 import VPSkipLink from '../components/VPSkipLink.vue'
 import VPFooter from '../components/VPFooter.vue'
@@ -42,7 +42,26 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 
       <VPBackdrop :show="isSidebarOpen" @click="closeSidebar" />
 
-      <Nav />
+      <VPNav>
+        <template #nav-bar-title-before>
+          <slot name="nav-bar-title-before" />
+        </template>
+        <template #nav-bar-title-after>
+          <slot name="nav-bar-title-after" />
+        </template>
+        <template #nav-bar-content-before>
+          <slot name="nav-bar-content-before" />
+        </template>
+        <template #nav-bar-content-after>
+          <slot name="nav-bar-content-after" />
+        </template>
+        <template #nav-screen-content-before>
+          <slot name="nav-screen-content-before" />
+        </template>
+        <template #nav-screen-content-after>
+          <slot name="nav-screen-content-after" />
+        </template>
+      </VPNav>
 
       <VPLocalNav :open="isSidebarOpen" :show-outline="isPageDecrypted" @open-menu="openSidebar" />
 
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 12cb8645..47d2d595 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useRouteLocale, withBase } from 'vuepress/client'
-import Nav from '../components/Nav/index.vue'
+import VPNav from '../components/Nav/VPNav.vue'
 import VPSkipLink from '../components/VPSkipLink.vue'
 import VPFooter from '../components/VPFooter.vue'
 import { useData } from '../composables/data.js'
@@ -14,7 +14,27 @@ const { theme } = useData()
     <slot name="layout-top" />
     <VPSkipLink />
 
-    <Nav />
+    <VPNav>
+      <template #nav-bar-title-before>
+        <slot name="nav-bar-title-before" />
+      </template>
+      <template #nav-bar-title-after>
+        <slot name="nav-bar-title-after" />
+      </template>
+      <template #nav-bar-content-before>
+        <slot name="nav-bar-content-before" />
+      </template>
+      <template #nav-bar-content-after>
+        <slot name="nav-bar-content-after" />
+      </template>
+      <template #nav-screen-content-before>
+        <slot name="nav-screen-content-before" />
+      </template>
+      <template #nav-screen-content-after>
+        <slot name="nav-screen-content-after" />
+      </template>
+    </VPNav>
+
     <div id="VPContent" class="vp-content">
       <slot name="not-found">
         <div class="vp-not-found">
diff --git a/theme/src/client/styles/search.css b/theme/src/client/styles/search.css
index b7ac766b..bcec7ed3 100644
--- a/theme/src/client/styles/search.css
+++ b/theme/src/client/styles/search.css
@@ -1,8 +1,21 @@
-.navbar-search {
+.vp-navbar-search {
   display: flex;
   align-items: center;
 }
 
+@media (min-width: 768px) {
+  .vp-navbar-search {
+    flex-grow: 1;
+    padding-left: 24px;
+  }
+}
+
+@media (min-width: 960px) {
+  .vp-navbar-search {
+    padding-left: 32px;
+  }
+}
+
 /* plugin-docsearch */
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1);
@@ -27,7 +40,7 @@
   --docsearch-hit-shadow: none;
 }
 
-.navbar-search .DocSearch-Button {
+.vp-navbar-search .DocSearch-Button {
   display: flex;
   align-items: center;
   justify-content: center !important;
@@ -39,20 +52,20 @@
   transition: border-color var(--t-color), background var(--t-color);
 }
 
-.navbar-search .DocSearch-Button:hover {
+.vp-navbar-search .DocSearch-Button:hover {
   background: var(--docsearch-searchbox-focus-background);
 }
 
-.navbar-search .DocSearch-Button:focus {
+.vp-navbar-search .DocSearch-Button:focus {
   outline: 1px dotted;
   outline: 5px auto -webkit-focus-ring-color;
 }
 
-.navbar-search .DocSearch-Button:focus:not(:focus-visible) {
+.vp-navbar-search .DocSearch-Button:focus:not(:focus-visible) {
   outline: none !important;
 }
 
-.navbar-search #docsearch-container {
+.vp-navbar-search #docsearch-container {
   min-width: 32px;
 }
 
@@ -166,7 +179,7 @@
 /* plugin-docsearch */
 
 /* plugin-search */
-.navbar-search .search-box input {
+.vp-navbar-search .search-box input {
   padding: 0 0.3rem 0 1.655rem;
   background-position: 0.5rem 0.4rem;
 }
@@ -174,26 +187,26 @@
 /* plugin-search */
 /* stylelint-disable-next-line order/order */
 @media (min-width: 768px) {
-  .navbar-search {
+  .vp-navbar-search {
     flex-grow: 1;
     padding-left: 24px;
   }
 }
 
 @media (min-width: 960px) {
-  .navbar-search {
+  .vp-navbar-search {
     padding-left: 32px;
   }
 }
 
 @media print {
-  .navbar-search {
+  .vp-navbar-search {
     display: none;
   }
 }
 
 @media (min-width: 768px) {
-  .navbar-search .DocSearch-Button {
+  .vp-navbar-search .DocSearch-Button {
     justify-content: flex-start;
     width: 100%;
     height: 40px;
@@ -203,7 +216,7 @@
     border-radius: 8px;
   }
 
-  .navbar-search .DocSearch-Button:hover {
+  .vp-navbar-search .DocSearch-Button:hover {
     background: var(--docsearch-searchbox-focus-background);
     border-color: var(--vp-c-brand-1);
   }
diff --git a/theme/src/shared/frontmatter/normal.ts b/theme/src/shared/frontmatter/normal.ts
index 1dd6898a..fa2b1b9b 100644
--- a/theme/src/shared/frontmatter/normal.ts
+++ b/theme/src/shared/frontmatter/normal.ts
@@ -26,13 +26,24 @@ export interface PlumeNormalFrontmatter extends PageFrontmatter {
    */
   pageClass?: string
 
+  /**
+   * 是否显示导航栏
+   *
+   * @default true
+   */
+  navbar?: boolean
+
   /**
    * 是否显示返回顶部按钮
+   *
+   * @default true
    */
   backToTop?: boolean
 
   /**
    * 当前页面是否显示 外部链接图标
+   *
+   * @default true
    */
   externalLinkIcon?: boolean
 
diff --git a/theme/src/shared/navbar.ts b/theme/src/shared/navbar.ts
index 3f547f5f..5f812131 100644
--- a/theme/src/shared/navbar.ts
+++ b/theme/src/shared/navbar.ts
@@ -4,6 +4,8 @@ export interface NavItemWithLink {
   text: string
   link: string
   icon?: string | { svg: string }
+  rel?: string
+  target?: string
 
   /**
    * `activeMatch` is expected to be a regex string. We can't use actual