导航栏居中

看看类的

如果仅仅是只希望居中自己的导航栏，使用css就可以实现，首先通过路径找到文件themes\butterfly\layout\includes\header\nav.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
nav#nav
  span#blog-info
    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
    if globalPageType === 'post' && theme.nav.display_post_title
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
        span.site-name
          i.fa-solid.fa-circle-arrow-left
          span= '  ' + _p('post.back_to_home')

  #menus
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span= ' ' + _p('search.title')
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})

      #toggle-menu
        span.site-page
          i.fas.fa-bars.fa-fw

创建导航栏的css文件

可以发现，导航栏的菜单部分由#menus类控制，那我们就通过css自定义对齐方式，创建自定义css文件nav.css如下：

1
2
3
4
5
6
7
8
9
10
11
12
#menus {
  position: absolute;
  left: 50%;
}

/* 通过以上代码实现导航栏居中后，屏幕过窄时会导致logo部分遮挡菜单，
deepseek建议移动端访问时使用默认定位，实测效果还行 */
@media (max-width: 768px) {
  #menus {
    position: static;
  }
}

在主题配置文件中引入

打开_config.butterfly.yml文件，找到以下位置，或者Ctrl + F查找Insert the code to head，在head部分引入刚刚创建的css文件

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/nav.css">

运行三件套预览效果

1
hexo cl; hexo g; hexo s

居中，但是搜索在右

开启主题的搜索功能后，在导航栏居中的前提下，搜索的按钮也在中间，那有没有办法把搜索放右边去呢，有的兄弟，有的

参考教程：关于Butterfly的导航栏的一些教程

找到前面提到的nav.pug文件，更改#menus部分，直接复制我的到自己的nav.pug文件里面也行，butterfly主题版本：5.5.3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
nav#nav
  span#blog-info
    a.nav-site-title(href=url_for('/'))
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
      if theme.nav.display_title
        span.site-name=config.title
    if globalPageType === 'post' && theme.nav.display_post_title
      a.nav-page-title(href=url_for('/'))
        span.site-name=(page.title || config.title)
        span.site-name
          i.fa-solid.fa-circle-arrow-left
          span= '  ' + _p('post.back_to_home')

  #menus
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})
  #nav-right
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span= ' ' + _p('search.title')

      #toggle-menu
        span.site-page
          i.fas.fa-bars.fa-fw

后续也需要引入css文件，内容和参考教程里的一致，这里我不展示了，相关步骤可以查看下大佬的博客，里面写得也很详细