📚 更多文档目录

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

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的主题调整记录，以防自己日后遗忘所记录 📝

感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改

Table栏调整（Heo）

  • 在自建的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
#article-container .tabs {
    border: 3px solid var(--icat-secondbg) !important;
}
#article-container .tabs {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--icat-shadow-border);
    padding: 8px;
    background: var(--icat-card-bg);
    border: var(--style-border);
    margin: 1rem 0px !important;
}
#article-container .tabs .nav-tabs {
    background: var(--icat-background);
    border: 2px solid var(--icat-secondbg) !important;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}
#article-container .tabs > .nav-tabs > .tab button {
    background: var(--icat-background);
    border-radius: 6px;
    border: 1px solid var(--icat-secondbg) !important;
}
#article-container .tabs > .nav-tabs > .tab {
    padding: 3px 3px;
}
#article-container .tabs > .nav-tabs > .tab.active button {
    background: var(--icat-tabs-background);
    color: var(--tab-button-active-bg);
    font-weight: 700;
}

/* Table分栏美化 */

hr分割栏美化

  • 修改 [blogRoot]/themes/butterfly/source/css/_global/index.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
    ···

hr
  position: relative
- margin: 40px auto
- border: 2px dashed var(--hr-border)
+  margin: 26px auto
+  border: 1px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)

    &:hover
      &:before
        left: calc(95% - 20px)

-   &:before
-     position: absolute
-     top: $hr-icon-top
-     left: 5%
-     z-index: 1
-     color: var(--hr-before-color)
-     content: $hr-icon
-     font-size: 20px
-     line-height: 1
-     transition: all 1s ease-in-out
-     @extend .fontawesomeIcon

    ···

折叠栏调整

  • 在自建的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
.toggle > .toggle-button::after {
    position: absolute;
    content: "+";
    right: 20px;
}
.toggle[open] > .toggle-button::after {
    position: absolute;
    content: "-";
    right: 20px;
}
/* 右侧展开显示 + - */
  
.toggle {
    border-radius: 12px;
    margin-top: 20px;
    border: var(--style-border) !important;
}
.toggle > .toggle-button {
    position: relative;
    padding: 10px 18px;
    background-color: var(--icat-background) !important;
    color:var(--icat-fontcolor);
    border-radius: 12px;
    font-weight: 900;
}
.toggle[open] > .toggle-button {
    border-bottom: var(--style-border);
}

/* 折叠栏调整美化 */

引用块美化（Heo）

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
blockquote {
    border-left: 2px solid #49b1f5;
    background-color: var(--icat-secondbg);
    color: var(--icat-secondtext);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 0.9rem 1.2rem;
}

/* 引用块美化 */

note块调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
.note {
    border-radius: 8px;
}
.note.flat {
    border-left: 3px solid #eee;
}

/* note块圆角调整 */

代码块调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
#article-container figure.highlight {
    border-radius: 8px;
}

/* 代码块圆角调整 */