教程开始前，提醒事项。
对于初次魔改新手，建议先过一遍：魔改前置教程：添加自定义css和js文件

PC菜单栏

  • 要让搜索栏在最右侧，而其它元素居中，这时我们需要修改一下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
23
24
25
26
nav#nav
  span#blog-info
    a(href=url_for('/') title=config.title)
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=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
个人调整的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
nav#nav
  div#nav-group
    span#blog-info
      a(href=url_for('/') title="回到主页")
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo))
        if theme.nav.display_title
          span.site-name=theme.nav.title
      
    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})
    #nav-right
      #travellings
        a.site-page(href=url_for('https://travellings.cn/go.html') title="随机前往一个开往项目网站")
          i.iconfont.icat-subway
      #random
        a.site-page(href=url_for('javascript:toRandomPost()') title="随机前往一个文章")
          i.iconfont.icat-random
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          a.site-page.social-icon.search
            i.iconfont.icat-search
      #toggle-menu
        a.site-page(href="javascript:void(0);" title="搜索本站文章")
          i.iconfont.icat-bars

  • 调整顶部菜单居中。

  • 在自建的CSS文件[blogRoot]/source/css/icat.css里新增以下内容。

1
2
3
4
5
6
7
8
9
#nav-right{
  flex:1 1 auto;
  justify-content: flex-end;
  margin-left: auto;
  display: flex;
  flex-wrap:nowrap;
}
  
/* 导航栏居中 */
个人调整的CSS样式
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
#nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}
/* 菜单栏居中 */

#blog-info a:hover {
    background: var(--icat-blue);
    transition: background .3s;
    border-radius: 8px;
}
#blog-info a:hover .site-name {
    color: var(--icat-blue) !important;
    position: relative;
    text-shadow: 0 0 transparent;
}
#blog-info a:hover .site-name:after {
    position: absolute;
    display: flex;
    top: 0;
    width: 100%;
    height: 100%;
    content: "\e03a";
    font-family: "iconfont" !important;
    font-size: 22px;
    line-height: 1;
    color: var(--icat-white);
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    #blog-info a:hover {
        background: 0;
        transition: unset;
        border-radius: 0;
    }
    #blog-info a:hover .site-name {
        color: var(--icat-blue) !important;
        position: relative;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
    }
    #blog-info a:hover .site-name:after {
        display: none;
    }
}
/* 主页按钮 */

#nav.show {
    display: flex;
    justify-content: center;
}
#nav .site-page {
    padding-bottom: 14px;
}
#page-header.not-top-img #nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--icat-secondbg);
}
#nav-group {
    width: 1400px;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    margin-left: auto;
    margin-right: auto;
}
/* 顶部栏宽度定义 */

#nav .menus_items .menus_item .menus_item_child, #nav .menus_items .icat_menus_item .menus_item_child {
    margin-top: 14px;
    border: 1px solid var(--icat-secondbg);
}
#nav .menus_items .menus_item .menus_item_child li a, #nav .menus_items .icat_menus_item .menus_item_child li a {
    padding: 8px 34px;
    text-align: center;
}
#travellings {
    padding: 0 14px 0 0;
}

/* PC菜单栏美化 */

PE菜单栏

  • 在自建的CSS文件[blogRoot]/source/css/icat.css里新增以下内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#sidebar #sidebar-menus .menus_items .menus_item {
    margin: 10px 0;
}
#sidebar #sidebar-menus .menus_items a.site-page {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_items .site-page {
    position: relative;
    display: block;
    padding: 6px 30px 6px 22px;
    color: var(--font-color);
    font-size: 1.15em;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
    border-radius: 12px;
}
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
    text-align: left;
    padding-left: 10px;
}
  • 修改[blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug页面里的内容。
1
2
3
4
5
6
7
8
9
10
if theme.menu
  .menus_items
    each value, label in theme.menu
      if typeof value !== 'object'
-       .menus_item
+        .icat_menus_item
          - const valueArray = value.split('||')
          a.site-page(href=url_for(trim(valueArray[0])))

    ···
  • 修改[blogRoot]/themes/butterfly/source/css/_layout/head.styl里第三百一十一 至 三百二十一行的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    ···

  .menus_items
    display: inline

    .menus_item
+    .icat_menus_item
      position: relative
      display: inline-block
      padding: 0 0 0 14px

      &:hover
        .menus_item_child
          display: block

    ···
  • 修改[blogRoot]/themes/butterfly/source/css/_layout/sidebar.styl里第三十四行开始新增下方内容。
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    ···

    .menus_items
      padding: 0 10px 40px

+      .menus_item
+        margin: 10px 0

      .site-page
        @extend .limit-one-line
        position: relative
        display: block
        padding: 6px 30px 6px 22px
        color: var(--font-color)
        font-size: 1.15em
+        border: var(--icat-style-border-always)
+        background: var(--icat-essay-card-bg)
+        font-size: 14px
+        border-radius: 12px

        &:hover
          background: var(--text-bg-hover)

        i:first-child
          width: 15%
          text-align: left
+          padding-left: 10px

        &.group
          & > i:last-child
            position: absolute
            top: .78em
            right: 18px
            transition: transform .3s

          &.hide
            & > i:last-child
              transform: rotate(90deg)

            & + .menus_item_child
              display: none

      .menus_item_child
        margin: 0
        list-style: none
        padding-top: 6px

+#sidebar
+  #sidebar-menus
+    .icat_menus_item
+      display: inline-block
+      width: 50%
+
+      .site-page
+        text-align: center
+        margin: 4px
+        display: flex
+        flex-direction: column
+        align-items: center
+        padding: 8px 0
+        border-radius: 12px
+        font-size: 14px
+
+        i:first-child
+          padding-left: 0
+
+        & > .icat-essay
+          font-weight: 500
+
+        span
+          margin-top: -8px
  • 在自建的CSS文件[blogRoot]/source/css/icat.css里新增以下内容。
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
#sidebar #sidebar-menus .menus_items .menus_item_child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_item_child li {
    width: calc(50% - 8px);
    margin: 4px;
}
#sidebar #sidebar-menus .menus_item_child .site-page.child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
}
#nav.hide-menu #toggle-menu {
    padding: 0 0 0 12px;
}
#sidebar #sidebar-menus .icat_menus_item .site-page {
    text-align: center;
    margin: 4px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
        margin-top: 4px;
    }
    #sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child {
        text-align: center;
        padding-left: 0;
    }
}
/* 子菜单美化 */

#sidebar .open > .avatar-img img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
#sidebar .open > .avatar-img img {
    border: 5px #fff solid;
}
#sidebar .open > .avatar-img::before {
    bottom: 8px;
    height: 12px;
    width: 12px;
}
#sidebar .open > .avatar-img::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(65%);
    background: #6bdf8f;
    border: 5px solid #fff;
    border-radius: 50%;
    transition: filter 375ms ease-in .2s,transform .3s;
    z-index: 2;
}
/* 头像美化 */

#sidebar #sidebar-menus .sidebar-site-data {
    padding: 0;
    margin-left: 10px;
    background: var(--icat-card-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}
@media screen and (max-width: 768px) {
    .site-data {
        width: 94%;
    }
}
/* 侧边栏的统计栏美化 */
  
/* PE端菜单栏美化 */

IPAD适配菜单栏

  • 在自建的CSS文件[blogRoot]/source/css/icat.css里新增以下内容。
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
#nav #menus {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    left: 0;
    margin: 0;
    transform: translateZ(0);
}
#nav #blog-info {
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
    z-index: 102;
    max-width: fit-content;
}
@media screen and (max-width: 900px) {
    #nav {
        padding: 0 15px;
    }
    #nav-group {
        padding: 0 0.2rem;
    }
    #rightside {
        right: -42px;
    }
}
/* IPAD菜单栏调整 */

更新历史

  • 240108 更新：修复&注意事项。更新调整后的nav.pug缩进问题，以及icon图标库链接。（感谢 @追梦小何 的反馈）

  • 230707 更新：glup-css压缩后PC魔改菜单栏样式缺漏，已解决