Hexo博客 | 如何让Butterfly主题导航栏居中

最近有很多小伙伴留言问我ButterFly主题的导航栏是怎么居中的，说实话我的博客样式其实都是一点一点从其他博主的博客那模仿来的（如果我没记错的话，导航栏应该是看的Heo大佬的），所以样式修改的时间跨度有点长，我自己也不太清楚具体改了哪些地方，但是鉴于问的小伙伴太多，我决定把导航栏文件全部展示出来，至于CSS可以参考我的css文件第168到434行（当前时间2022/3/15，不排除之后我又改了）……

主题模板文件

index.pug

themes\butterfly\layout\includes\header\index.pug

if !theme.disable_top_img && page.top_img !== false
  if is_post()
    - var top_img = page.top_img || page.cover || page.randomcover
  else if is_page()
    - var top_img = page.top_img || theme.default_top_img
  else if is_tag()
    - var top_img = theme.tag_per_img && theme.tag_per_img[page.tag] 
    - top_img = top_img ? top_img : (theme.tag_img !== false ? theme.tag_img || theme.default_top_img : false)
  else if is_category()
    - var top_img = theme.category_per_img && theme.category_per_img[page.category]
    - top_img = top_img ? top_img : (theme.category_img !== false ? theme.category_img || theme.default_top_img : false)
  else if is_home()
    - var top_img = theme.index_img !== false ? theme.index_img || theme.default_top_img : false
  else if is_archive()
    - var top_img = theme.archive_img !== false ? theme.archive_img || theme.default_top_img : false
  else
    - var top_img = page.top_img || theme.default_top_img

  if top_img !== false
    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
    - var bg_img = top_img ? imgSource : ''
    - var site_title = is_archive() ? fragment_cache('findArchivesTitle', function(){return findArchivesTitle(theme.menu);}) : page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'
else
  - var top_img = false
  - var isHomeClass = 'not-top-img'

header#page-header(class=isHomeClass style=bg_img)
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      #coverdiv.coverdiv
        img#post-cover.cover.entered.loading(alt='cover' src=`${top_img}`)
      include ./post-info.pug
    else if is_home() 
      #site-info
        h1#site-title=site_title
        if theme.subtitle.enable
          - var loadSubJs = true
          #site-subtitle
            span#subtitle
        if(theme.social)
          #site_social_icons
            !=fragment_cache('social', function(){return partial('includes/header/social')})
      #scroll-down
        i.fas.fa-angle-down.scroll-down-effects
    else
      #coverdiv.coverdiv
        img#post-cover.cover.entered.loading(alt='cover' src=`${top_img}`)
      #page-site-info
        h1#site-title=site_title

nav.pug

themes\butterfly\layout\includes\header\nav.pug

nav#nav
  #nav-group
    #blog_name
      a#site-name(href=url_for('/')) #[=config.author]

    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})

    #nav-right
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          a.nav-rightbutton.site-page.social-icon.search
            i.fas.fa-search.fa-fw
      #darkmode_navswitch
        a.nav-rightbutton.site-page.darkmode_switchbutton(onclick="switchDarkMode()")
          i.fas.fa-adjust
      #toggle-menu
        a.nav-rightbutton.site-page
          i.fas.fa-bars.fa-fw

上面提到的switchDarkMode()

function switchDarkMode() { // Switch Between Light And Dark Mode
      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
      if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
      } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
      }
      // handle some cases
      typeof utterancesTheme === 'function' && utterancesTheme()
      typeof FB === 'object' && window.loadFBComment()
      window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
    }