效果预览#

• 首页滚动到顶部：导航栏背景透明，无阴影，无毛玻璃。
• 向下滚动离开 Hero：导航栏自动添加背景模糊（毛玻璃），文字颜色变浅，并出现阴影。
• 非首页（文章页、关于页等）：导航栏保持正常的主题样式，不受滚动影响。
• 侧边栏切换按钮：同样跟随滚动状态改变颜色。

组件功能概述#

TopNavBeautify 是一个无渲染组件（不产生实际 UI 元素），通过监听滚动事件和路由变化，动态为 .theme-container 添加/移除特定的 CSS 类，从而触发导航栏的样式变化。它的主要作用包括：

• 检测当前页面是否为博客首页（是否存在 .vp-blog-hero 元素）。
• 监听滚动位置，当滚动距离 < 60px 时添加 ayund-scroll-top 类。
• 在首页时，根据滚动距离是否小于 Hero 高度减去 30px，添加 ayund-scroll-blog-hero-inner 类。
• 监听路由变化，离开首页时移除首页专属的样式类。
• 为侧边栏切换按钮绑定事件，确保每次打开/关闭侧边栏后重新检测滚动状态。

实现细节#

1
const blogHeroElms = document.getElementsByClassName("vp-blog-hero");
2
const hasHero = blogHeroElms.length > 0;
3
if (hasHero) {
4
  themeElm.classList.add("ayund-blog-hero");
5
} else {
6
  themeElm.classList.remove("ayund-blog-hero");
7
}

1
const scrollTop = document.documentElement.scrollTop;
2
if (scrollTop < 60) {
3
  themeElm.classList.add("ayund-scroll-top");
4
} else {
5
  themeElm.classList.remove("ayund-scroll-top");
6
}

1
if (scrollTop < blogHeroElm.clientHeight - 30) {
2
  themeElm.classList.add("ayund-scroll-blog-hero-inner");
3
} else {
4
  themeElm.classList.remove("ayund-scroll-blog-hero-inner");
5
}

1
router.afterEach(() => {
2
  nextTick(() => {
3
    setTimeout(() => {
4
      CheckScrollTopClass();
5
    }, 50);
6
  });
7
});

1
toggleSidebarElm.removeEventListener("click", CheckSidebarOpen);
2
toggleSidebarElm.addEventListener("click", CheckSidebarOpen);

样式适配要点#

在 SCSS 中，我们定义了几个关键的样式规则：

• 当同时存在 ayund-scroll-top 和 ayund-blog-hero 时，导航栏 box-shadow: none。
• 首页时，导航栏背景默认透明（background: transparent）。
• 在 ayund-scroll-blog-hero-inner 状态下，导航栏内的链接、图标、按钮颜色都改为浅色（#eee），并添加文字阴影，以适应深色 Hero。
• 暗色模式（[data-theme='dark']）下，我们隐藏了下拉箭头（.arrow），保持界面整洁。

在主题中集成#

该组件需要被注册为全局组件。在 .vuepress/client.ts 或 .vuepress/config.ts 中通过 rootComponents 引入：

1
import TopNavBeautify from "./components/TopNavBeautify.vue";
2

3
export default defineClientConfig({
4
  rootComponents: [
5
    TopNavBeautify,
6
    // 其他全局组件...
7
  ],
8
});

组件的 <template> 中只包含一个隐藏的占位元素，不会影响页面布局。

总结#

TopNavBeautify 组件，以极低的成本实现了导航栏的动态美化，提升了博客首页的视觉体验。这种“无渲染组件 + CSS 类切换”的模式非常适合对第三方主题进行轻量级定制，而无需 fork 整个主题。如果您也在使用 VuePress，希望这篇文章能给您带来一些用途。

相关资源

• vuepress-theme-hope 官方文档
• TopNavBeautify.vue 在 GitHub 上的源码