Hexo博客搭建系列（四）：透明居中导航栏+鼠标悬停放大效果

前言

在使用Hexo+Butterfly主题搭建博客时，默认的导航栏样式比较常规。如果你想让博客更具个性化，本文将手把手教你实现一个炫酷的导航栏效果。

实现效果

通过本教程，你将实现以下四大特色功能：

• ✨ 导航栏完全透明：去除背景色和阴影，与页面背景完美融合
• 🎯 菜单真正居中：使用绝对定位让菜单精确居中在导航栏中央
• 🔍 搜索图标右侧固定：搜索功能固定在右侧，移除多余的文字说明
• 🎨 鼠标悬停放大动画：鼠标移到菜单项上时有平滑的放大效果

效果展示

从图中可以看到：

• 导航栏背景完全透明，没有任何色块或阴影
• 菜单项（首页、标签、分类等）精确居中显示
• 搜索图标独立在右侧，界面简洁
• 左侧有网站标题和FPS显示（可选）

鼠标悬停效果

当鼠标移到"标签"菜单项时，可以看到明显的放大效果，视觉反馈非常友好。

实现原理

在开始修改之前，先了解一下实现原理：

布局结构

导航栏采用三段式布局：

┌─────────────────────────────────────────────────────────┐
│  [标题+FPS]           [菜单居中]           [搜索图标]      │
│  (左侧固定)        (绝对定位居中)          (右侧固定)      │
└─────────────────────────────────────────────────────────┘

关键技术点：

1. 使用 display: flex + justify-content: space-between 让左右两侧固定
2. 菜单使用 position: absolute + left: 50% + transform: translateX(-50%) 实现真正居中
3. 设置 z-index 确保左右元素不被中间菜单遮挡

详细实现步骤

步骤一：修改导航栏布局文件

首先需要调整导航栏的HTML结构，将搜索按钮从菜单区域独立出来。

文件位置：themes/butterfly/layout/includes/header/nav.pug

原始代码

nav#navspan#blog-infoa.nav-site-title(href=url_for('/'))if theme.nav.logoimg.site-icon(src=url_for(theme.nav.logo) alt='Logo')if theme.nav.display_titlespan.site-name=config.titleif globalPageType === 'post' && theme.nav.display_post_titlea.nav-page-title(href=url_for('/'))span.site-name=(page.title || config.title)span.site-namei.fa-solid.fa-circle-arrow-leftspan= '  ' + _p('post.back_to_home')#menusif theme.search.use#search-buttonspan.site-page.social-icon.searchi.fas.fa-search.fa-fwspan= ' ' + _p('search.title')if theme.menu!= partial('includes/header/menu_item', {}, {cache: true})#toggle-menuspan.site-pagei.fas.fa-bars.fa-fw

修改后的代码

将上述代码完整替换为以下内容：

nav#navspan#blog-infoa.nav-site-title(href=url_for('/'))if theme.nav.logoimg.site-icon(src=url_for(theme.nav.logo) alt='Logo')if theme.nav.display_titlespan.site-name=config.titleif globalPageType === 'post' && theme.nav.display_post_titlea.nav-page-title(href=url_for('/'))span.site-name=(page.title || config.title)span.site-namei.fa-solid.fa-circle-arrow-leftspan= '  ' + _p('post.back_to_home')#menusif theme.menu!= partial('includes/header/menu_item', {}, {cache: true})#toggle-menuspan.site-pagei.fas.fa-bars.fa-fwif theme.search.use#search-buttonspan.site-page.social-icon.searchi.fas.fa-search.fa-fw

修改要点说明

1. 搜索按钮移出 #menus

   • 将 #search-button 从 #menus 内移到外面
   • 使其成为 nav#nav 的直接子元素

2. 移除搜索文字

   • 删除 span= ' ' + _p('search.title') 这行
   • 只保留搜索图标 i.fas.fa-search.fa-fw

3. 调整条件判断位置

   • if theme.search.use 移到最外层
   • 确保搜索按钮独立渲染

步骤二：修改CSS样式文件

接下来需要修改CSS样式，实现透明背景、真正居中和放大效果。

文件位置：themes/butterfly/source/css/_layout/head.styl

这个文件比较长，我们需要修改多个位置。为了方便查找，可以使用编辑器的搜索功能（Ctrl+F）。

2.1 修改导航栏主体样式

搜索：#nav （约在287行）

找到以下代码：

#navposition: absolutetop: 0z-index: 90display: flexalign-items: centerpadding: 0 36pxwidth: 100%height: 60pxfont-size: 1.3emopacity: 0transition: all .5s+maxWidth768()padding: 0 16px&.showopacity: 1#blog-infoflex: 1color: var(--light-grey)@extend .limit-one-line.site-iconmargin-right: 6pxheight: 36pxvertical-align: middle.nav-page-titledisplay: none

替换为：

#navposition: absolutetop: 0z-index: 90display: flexalign-items: centerjustify-content: space-betweenpadding: 0 36pxwidth: 100%height: 60pxfont-size: 1.3emopacity: 0transition: all .5sbackground: transparent !important+maxWidth768()padding: 0 16px&.showopacity: 1#blog-infoposition: relativez-index: 2display: flexalign-items: centergap: 15pxcolor: var(--light-grey)@extend .limit-one-line.site-iconmargin-right: 6pxheight: 36pxvertical-align: middle.nav-page-titledisplay: none#menusposition: absoluteleft: 50%transform: translateX(-50%)display: flexalign-items: center

修改要点说明：

1. justify-content: space-between：让左右两侧内容分布在两端
2. background: transparent !important：强制背景透明
3. #blog-info：
   • 添加 position: relative 和 z-index: 2，确保不被菜单遮挡
   • 添加 display: flex 和 gap: 15px，为后续添加FPS等元素预留空间
4. #menus：
   • 使用 position: absolute 脱离文档流
   • left: 50% 让左边缘在50%位置
   • transform: translateX(-50%) 向左偏移自身宽度的一半
   • 实现真正的居中效果

2.2 添加菜单项悬停放大效果

搜索：.menus_items （约在378行）

找到以下代码：

  .menus_itemsdisplay: inline.menus_itemposition: relativedisplay: inline-blockpadding: 0 0 0 14px&:hover.menus_item_childdisplay: block& > span > i:last-childtransform: rotate(180deg)& > span > i:last-childpadding: 4pxtransition: transform .3s

修改为：

  .menus_itemsdisplay: inline.menus_itemposition: relativedisplay: inline-blockpadding: 0 0 0 14pxtransition: transform .3s ease&:hovertransform: scale(1.15).menus_item_childdisplay: block& > span > i:last-childtransform: rotate(180deg)& > span > i:last-childpadding: 4pxtransition: transform .3s

修改要点说明：

• 添加 transition: transform .3s ease：平滑过渡效果
• 在 &:hover 中添加 transform: scale(1.15)：鼠标悬停时放大到115%

2.3 修改搜索按钮样式

搜索：#search-button （约在457行）

找到以下代码：

  #search-buttondisplay: inlinepadding: 0 0 0 14px

替换为：

  #search-buttonposition: relativez-index: 2display: flexalign-items: centerpadding: 0transition: transform .3s ease&:hovertransform: scale(1.15)

修改要点说明：

• position: relative 和 z-index: 2：确保不被菜单遮挡
• display: flex 和 align-items: center：垂直居中对齐
• padding: 0：移除内边距
• 添加悬停放大效果，与菜单项保持一致

2.4 修改无顶部图片状态的透明效果

搜索：&.not-top-img （约在126行）

找到以下代码：

  &.not-top-imgmargin-bottom: 10pxheight: 60pxbackground: 0.title-seodisplay: none#navbackground: rgba(255, 255, 255, .8)box-shadow: 0 5px 6px -5px rgba(133, 133, 133, .6)a,span.site-page,.site-namecolor: var(--font-color)text-shadow: none

替换为：

  &.not-top-imgmargin-bottom: 10pxheight: 60pxbackground: 0.title-seodisplay: none#navbackground: transparent !importantbox-shadow: nonea,span.site-page,.site-namecolor: var(--font-color)text-shadow: none

修改要点说明：

• background: transparent !important：改为完全透明
• box-shadow: none：移除阴影效果

2.5 修改滚动固定状态的透明效果

搜索：&.nav-fixed （约在144行）

找到以下代码：

  &.nav-fixed#navposition: fixedtop: -60pxz-index: 91background: rgba(255, 255, 255, .7)box-shadow: 0 5px 6px -5px alpha($grey, .6)transition: transform .2s ease-in-out, opacity .2s ease-in-outwill-change: transformbackdrop-filter: blur(7px)#blog-infocolor: var(--font-color)&:hovercolor: $light-blue.site-nametext-shadow: none& > a:first-childdisplay: none& > a:last-childdisplay: inlinea,span.site-page,#toggle-menucolor: var(--font-color)text-shadow: none&:hovercolor: $light-blue

替换为：

  &.nav-fixed#navposition: fixedtop: -60pxz-index: 91background: transparent !importantbox-shadow: nonetransition: transform .2s ease-in-out, opacity .2s ease-in-outwill-change: transformbackdrop-filter: none#blog-infocolor: var(--light-grey)&:hovercolor: var(--white).site-nametext-shadow: 2px 2px 4px rgba($dark-black, .15)& > a:first-childdisplay: none& > a:last-childdisplay: inlinea,span.site-page,#toggle-menucolor: var(--light-grey)text-shadow: 1px 1px 2px rgba($dark-black, .3)&:hovercolor: var(--white)

修改要点说明：

• background: transparent !important：滚动时也保持透明
• box-shadow: none：移除阴影
• backdrop-filter: none：移除毛玻璃效果
• 文字颜色改为 var(--light-grey)（浅灰色）
• 添加文字阴影：text-shadow: 1px 1px 2px rgba($dark-black, .3)
• 悬停时文字变为白色：color: var(--white)

运行测试

完成所有修改后，按以下步骤运行测试：

# 1. 清除旧的生成文件和缓存
hexo clean# 2. 重新生成静态文件
hexo generate# 3. 本地预览测试
hexo server# 4. 在浏览器中访问 http://localhost:4000 查看效果# 5. 测试以下场景：
#    - 首页显示效果
#    - 滚动后导航栏效果
#    - 鼠标悬停各菜单项
#    - 搜索功能是否正常
#    - 移动端响应式效果