Butterfly主题魔改之导航栏

效果展示

电脑端
手机端

用编辑器打开 themes\butterfly\source\css\_layout\head.styl 文件，找到如图所示内容：
.menus_items
display: inline
修改内容如下：
.menus_items
display: inline
position: absolute
width: 400px
text-align: center
left: 0
right: 0
margin: auto
上述css样式方案复制于Heo，可以去关注一下他的博客，其他方案还在修改中，完善后会更新本文。

自定义munu始终居于右边

用编辑器打开 themes\butterfly\layout\includes\header\nav.pug 文件，找到如图所示内容：

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

  span#menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search_button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
        span=' '+_p('search')
  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

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

修改为如下所示：

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

  span#menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search_button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
        span=' '+_p('search')
      #search_button
        a.site-page.(href='url')
        //其中url为链接内容，如：https://blog.molipre.com或博客内嵌页面 /about/ 等
          i.fas.xxxxx.fa-fw
          //其中xxxxx可以为Font Awesome图标格式，如fa-search
        span=' '+'xxxx'
        //其中xxxx为自定义的内容，如效果图中的 '个人主页' 等
  !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

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