参考博客
分离搜索栏和导航栏 为了方便管理，我们要让搜索栏在最右侧，而其它元素居中，这时我们需要修改一下pug。修改内容[blogRoot]\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 nav#nav span#blog_name a#site-name(href=url_for('/')) #[=config.title] #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.title') !=partial('includes/header/menu_item', {}, {cache: true}) #nav-right + if (theme.algolia_search.enable || theme.local_search.enable) + #search-button + a.site-page.social-icon.search + i.fas.fa-search.fa-fw - #toggle-menu - a.site-page - i.fas.fa-bars.fa-fw + #toggle-menu + a.site-page + i.fas.fa-bars.fa-fw
若要加上搜索栏文字，可以加上：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 nav#nav span#blog_name a#site-name(href=url_for('/')) #[=config.title] #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.title') !=partial('includes/header/menu_item', {}, {cache: true}) #nav-right + 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.title') - #toggle-menu - a.site-page - i.fas.fa-bars.fa-fw + #toggle-menu + a.site-page + i.fas.fa-bars.fa-fw
导航栏居中 其实导航栏居中可以用纯CSS的方式来解决，在自定义css里面添加下面几句CSS：
1 2 3 4 5 6 7 #nav-right { flex :1 1 auto; justify-content : flex-end; margin-left : auto; display : flex; flex-wrap :nowrap; }
去掉导航栏项目底下的蓝色长条 子菜单横向布局 butterfly的二级菜单默认是纵向排列的，可以添加如下css使其横向排列
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .menus_item_child li :not (#sidebar-menus li ){ float : left; border-radius : 6px !important ; -webkit-border-radius : 6px !important ; -moz-border-radius : 6px !important ; -ms-border-radius : 6px !important ; -o-border-radius : 6px !important ; } .menus_item_child :not (#sidebar-menus ul ){ left :50% ; translate:-50% ; }
顶栏常驻 butterfly的顶栏滚动时会自动收起，我并不喜欢，所以通过修改css的方式实现。（以前其实改的是js但是忘记怎么改了）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 .nav-fixed #nav { transform : translateY (58px )!important ; -webkit-transform : translateY (58px )!important ; -moz-transform : translateY (58px )!important ; -ms-transform : translateY (58px )!important ; -o-transform : translateY (58px )!important ; } #nav { transition : none!important ; -webkit-transition : none!important ; -moz-transition : none!important ; -ms-transition : none!important ; -o-transition : none!important ; }
改css的方式会出现一个bug：在滚动到顶部的时候再滚下来会闪一下，后面找到js的修改方式之后告诉你们吧。
控制默认显示的是站点标题还是导航栏菜单。 修改themes/butterfly/layout/includes/header/index.pug
其中nav-visible可以控制默认显示的是站点标题还是导航栏菜单。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 = page.title || page.tag || page.category || config.title - - var isHomeClass = is_home() ? 'full_page' : 'not-home-page' + - var isHomeClass = is_home() ? 'full_page nav-fixed nav-visible' : 'not-home-page' - is_post() ? isHomeClass = 'post-bg' : isHomeClass else - var isHomeClass = 'not-top-img' 作者: Cream薄荷糖 链接: https://creammint.github.io/posts/993/index.html 来源: Cream薄荷糖 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
