导航栏毛玻璃

创建

在 vitepress-theme-Teek\src\styles\vp-plus 文件夹，然后新建 nav-blur.scss 并填入如下代码

.
├─ docs
├─ vitepress-theme-Teek
│  │  └─ src
│  │     └─ style
│  │        └─ vp-plus
│  │          └─ nav-blur.scss
└─ node_modules

在主题原始文件中， VPNavBar.vue 组件有其对应的属性

配置

复制下面代码，粘贴到 nav-blur.scss 中，可以自行增减

/* .vitepress-theme-Teek\src\styles\vp-plus\blur.css */
:root {
  /* 首页下滑后导航透明 */
  .VPNavBar:not(.has-sidebar):not(.home.top) {
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
  }

  /* 搜索框透明 */
  .DocSearch-Button {
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
  }

  /* Feature透明 */
  .VPFeature {
    border: none;
    box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
    background-color: transparent;
  }

  /* 文档页侧边栏顶部透明 */
  .curtain {
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
  }

  @media (min-width: 960px) {
    /* 文档页导航中间透明 */
    .VPNavBar:not(.home.top) .content-body {
      background-color: rgba(255, 255, 255, 0);
      backdrop-filter: blur(10px);
    }
  }

  /* 移动端大纲栏透明 */
  .VPLocalNav {
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
  }
}

引入

最后在Demo\docs-base\.vitepress\theme\index.ts 引入 即可看到效果

import "vitepress-theme-Teek/vp-plus/nav-blur.scss"; //导航栏毛玻璃