在 vitepress-theme-Teek\src\styles\vp-plus 文件夹，然后新建 nav-blur.scss 并填入如下代码
scss
.
├─ docs
├─ vitepress-theme-Teek
│ │ └─ src
│ │ └─ style
│ │ └─ vp-plus
│ │ └─ nav-blur.scss
└─ node_modules在主题原始文件中， VPNavBar.vue 组件有其对应的属性
复制下面代码，粘贴到 nav-blur.scss 中，可以自行增减
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 引入 即可看到效果
ts
import "vitepress-theme-Teek/vp-plus/nav-blur.scss"; //导航栏毛玻璃此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。