菜单栏居中

原始代码\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

#nav是flex布局，子元素#menus靠右宽度是内容宽度，子元素#blog-info有一个默认属性flex=1，靠左占满导航栏剩余空间。

给#nav新增第三个子元素#nav-right，将#menus内的#search-button和#toggle-menu移入#nav-right，然后分配flex=1并靠右显示即可让#menus自动居中。

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

+ #nav-right
+   if theme.search.use
+     #search-button
+       span.site-page.social-icon.search
+         i.fas.fa-search.fa-fw
+         span= ' '
+   if theme.menu
+     #toggle-menu
+       span.site-page
+         i.fas.fa-bars.fa-fw
1
2
3
4
5
#nav-right {
    flex: 1; /* 数值参考 #blog-info */
    display: flex; /* 转化为flex容器以支持justify-content */
    justify-content: right; /* 靠右显示 */
}

添加抽屉菜单

在#blog-info内添加抽屉菜单，用于快速导航到博主的相关链接