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

主题模板文件

index.pug

themes\butterfly\layout\includes\header\index.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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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

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
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()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)
}

CSS

请自行F12查看,截至目前(2022/3/15)导航栏相关css样式是在/css/justlovesmile.css第168到434行….

其他的之后再补充,有问题的欢迎留言提问