起因

众所周知，我的博客是玻璃拟物风格，但是navbar的默认样式是白色和黑色的，没有很搭配我的博客，所以做一些默认样式的修改。

步骤

当我们有了一个明确的需求以后，我们就要去分析这个需求。

查看文档

查看文档，我们首先要做的就是去看看官网有没有规定相关插槽，或者传参，可以自定义。

通过查看文档，我们并没有找到相关插槽或者传参，可以自定义。文档地址：https://vitepress.dev/zh/reference/site-config

查看源码

查看源码，当没有查到文档的时候，我们可以看看源码中有没有隐藏的插槽或者传参，可以自定义。

遗憾的是，源码中也没有找到可以自定义样式的方法,路径：node_modules\vitepress\dist\client\theme-default\components\VPNav.vue

<script setup lang="ts">
import { inBrowser } from 'vitepress'
import { computed, provide, watchEffect } from 'vue'
import { useData } from '../composables/data'
import { useNav } from '../composables/nav'
import VPNavBar from './VPNavBar.vue'
import VPNavScreen from './VPNavScreen.vue'

const { isScreenOpen, closeScreen, toggleScreen } = useNav()
const { frontmatter } = useData()

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>
  <header v-if="hasNavbar" class="VPNav">
    <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>
  </header>
</template>

<style scoped>
.VPNav {
  position: relative;
  top: var(--vp-layout-top-height, 0px);
  /*rtl:ignore*/
  left: 0;
  z-index: var(--vp-z-index-nav);
  width: 100%;
  pointer-events: none;
  transition: background-color 0.5s;
}

@media (min-width: 960px) {
  .VPNav {
    position: fixed;
  }
}
</style>

手动修改

没有其他办法的时候，我们只能手动覆盖框架中的样式。

代码还是比较简单的，我们来自定义一下样式，然后在layout.vue文件中引入。

/* 覆盖默认样式 */
.VPNavBar:not(.home.top) {
  position: fixed !important;
  border-radius: 0 0 20px 20px;
  backdrop-filter: blur(4px) !important;
  background-color: #ffffffa6 !important;
  width: 100%;
}
/* 添加暗黑模式适配 */
.dark .VPNavBar:not(.home.top) {
  background-color: #000000a6 !important;
}

完活

总的来看,修改是相对比较简单的,但是如果已经存在的样式,需要用!important来覆盖,如果需要添加暗黑模式适配，需要添加dark类名。

如果你有更好的方案,也欢迎留言提出,如果有什么错误的地方也欢迎指出。