📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节最后更新于 2024 年 01 月 08 日

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

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

注意：本节教程使用了iCat自建的腾讯CoDesign图标库。请注意修改i标签的图标，如果你需要使用iCat图标库，那么你需要在主题配置文件inject配置项的head处新增以下内容：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="https://cdn2.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"> # 腾讯iconfont - 图标库

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菜单栏调整 */