碎碎念

顶栏动效曾令我费尽心思，眼见鱼鱼和洪哥的导航栏动画如此流畅，随着页面的上下切换标题和菜单，我感到无比畅快。然而，我发现的教程中都未能实现如此平滑的过渡。因此，我使用所学知识，在他人基础上进行改进，最终达成了我心目中的效果。至于 Twikoo 的美化，一开始我觉得原版实在不够美观，于是决定自行修改。在修改过程中，我也参考了一些小伙伴的内容，你可以在下方的引用链接中查看。

教程

twikoo美化

下面是我进行 Twikoo 美化的所有 CSS 代码，你可以随意将其放入某个自定义 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
/* ========================twikoo美化====================== */
/* 隐藏评论者头像 */
#twikoo .tk-comments .tk-submit .tk-avatar.tk-has-avatar {
    display: none;
}

/* 下面表情和按钮那一栏的设置 */
#twikoo .tk-comments .tk-submit .tk-row.actions{
    margin-bottom: 0;
    margin-left: 0;
}

/* 个人信息和文本输入之间的空位置 */
.tk-main .tk-submit .tk-col .tk-meta-input,
#twikoo .tk-comments .tk-submit .tk-col .tk-meta-input{
    margin-bottom: 16px;
}

/* 直接固定高度，解决提交按钮有时高度不起作用的问题 */
.tk-row.actions button.el-button {
    height: 32px;
}

/* 解决图片大小超出范围问题 */
.tk-main .tk-content img {
  max-width: 100%;
  height: auto;
}

/* 圆角设置 */
.tk-meta-input input {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.tk-meta-input div {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* 输入框样式 */
.tk-input.el-textarea textarea {
    border-radius: 12px;
    min-height: 150px !important;
    height: auto;
}

/* 宽度太窄的时候去掉预览按钮 */
@media screen and (max-width:420px) {
    .tk-main .tk-submit .tk-row.actions button.el-button.tk-preview.el-button--default.el-button--small{
        display: none;
    }
}

:root {
  --liushen-radius: 12px;
  --liushen-card-border-width: 1px;
}

/* 浅色模式颜色 */
[data-theme=light] {
  --liushen-border-color: #e3e8f7;
  --liushen-card-bg: #fff;
  --liushen-card-border: #e3e8f7;
  --style-border-always: 1px solid var(--liushen-card-border);
  --liushen-blue: #425AEF;
}

/* 深色模式颜色 */
[data-theme=dark] {
  --liushen-border-color: #42444a;
  --liushen-card-bg: #2c2c2c;
  --liushen-card-border: #42444a;
  --style-border-always: 1px solid var(--liushen-card-border);
  --liushen-blue: #0084FF;
}

/* 评论区评论大框 */
.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  /* 内边距 */
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 20px;
  /* 圆角 */
  border-radius: var(--liushen-radius);
  /* 背景颜色 */
  background: var(--liushen-card-bg);
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式评论区评论大框 */
[data-theme=light] 
.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式评论区评论大框阴影悬浮加深 */
[data-theme=light] 
.twikoo .tk-comments-container>.tk-comment:hover,
.twikoo .tk-comments .tk-submit:hover {
  /* 阴影（浅色模式突出层次感） */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式评论区评论大框 */
[data-theme=dark] 
.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--liushen-card-border-width);
  /* 边框颜色 */
  border-color: var(--liushen-card-border);
}

/* 设备信息 */
.twikoo .tk-extra {
  /* 圆角 */
  border-radius: var(--liushen-radius);
  /* 背景颜色 */
  background: var(--liushen-card-bg);
  /* 内边距 */
  padding: 0.4rem;
  /* 底边距 */
  margin-bottom: 1rem;
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式设备信息 */
[data-theme=light] .twikoo .tk-extra {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式设备信息阴影悬浮加深 */
[data-theme=light] .twikoo .tk-extra:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式设备信息 */
[data-theme=dark] .twikoo .tk-extra {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--liushen-card-border-width);
  /* 边框颜色 */
  border-color: var(--liushen-card-border);
}

/* 加载更多按钮 */
.twikoo .tk-expand {
  /* 圆角 */
  border-radius: var(--liushen-radius);
}

/* 浅色模式加载更多按钮 */
[data-theme=light] .twikoo .tk-expand {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式加载更多按钮（鼠标悬浮时） */
[data-theme=light] .twikoo .tk-expand:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
  /* 背景颜色 */
  background-color: var(--btn-bg);
}

/* 黑暗模式加载更多按钮（鼠标悬浮时） */
[data-theme=dark] .twikoo .tk-expand:hover {
  /* 背景颜色 */
  background-color: var(--liushen-blue);
}

/* 黑暗模式加载更多按钮 */
[data-theme=dark] .twikoo .tk-expand {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--liushen-card-border-width);
  /* 边框颜色 */
  border-color: var(--liushen-card-border);
}

/* 分类卡片移动端个人信息卡片只显示两个 */
@media screen and (max-width:570px) {
    .tk-main .tk-extras {
        display: none;
    }
}

/* 评论区按钮样式 */
.tk-row.actions button.el-button {
    border-radius: 12px !important;
}

/* 由于twikoo内部函数不宜修改，为了合适，去掉弹窗中的刷新按钮，该部分不需要，这是为了适配右键回复弹窗的内容的
#popup #twikoo .tk-comments .tk-comments-container .tk-comments-title > span:nth-child(2) > span:nth-child(1) {
	display: none;
} */

/* ========================twikoo美化====================== */

上述备注已经相当详细，因此我就不再赘述。下面是改进前后的效果对比：

夜间样式

白天样式

夜间样式

白天样式

导航栏美化

导航栏美化相对复杂一些。首先，你可以看到我的导航栏下滑时会显示标题，因此我们需要将这部分内容添加进来。修改 [root]\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
27
28
29
30
31
32
nav#nav
  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=config.title
    
  #menus
  !=partial('includes/header/menu_item', {}, {cache: true})
+  center(id="name-container")
+    a(id="page-name" href="javascript:btf.scrollToDest(0, 500)") PAGE_NAME

  #nav-right
    #travellings
      a.site-page(href=url_for('https://www.travellings.cn/go.html') title="友链接力-随机开往")
        i.fa-solid.fa-bus.fa-fw
    #ten-years
      a.site-page(href=url_for('https://foreverblog.cn/go.html') title="友链接力-十年之约")
        i.fa-brands.fa-nfc-symbol.fa-fw
    #random
      a.site-page(href=url_for('javascript:randomPost()') title="随机前往一个文章")
        i.fa-solid.fa-shuffle.fa-fw
    if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
      #search-button
        a.site-page.social-icon.search(href="javascript:void(0);"  title="站内搜索")
          i.fa-brands.fa-algolia.fa-fw
      //#he-plugin-simple

    #toggle-menu
      a.site-page(href="javascript:void(0);" title="展开菜单")
        i.fas.fa-bars.fa-fw

接着，添加自定义 JavaScript 脚本，内容如下：

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
document.addEventListener('pjax:complete', tonav);
document.addEventListener('DOMContentLoaded', tonav);
//响应pjax
function tonav() {
    var nameContainer = document.querySelector("#nav #name-container");
	var menusItems = document.querySelector("#nav .menus_items");
    var position = $(window).scrollTop();

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll > position + 5) {
            nameContainer.classList.add("visible");
            menusItems.classList.remove("visible");
        } else if  (scroll < position - 5){
            nameContainer.classList.remove("visible");
            menusItems.classList.add("visible");
        }

        position = scroll;
    });

    // 初始化 page-name
    document.getElementById("page-name").innerText = document.title.split(" | LiuShen's Blog")[0];
}

我简单解释一下，我最初使用的代码是：

1
2
document.getElementById("name-container").setAttribute("style", "");
document.getElementsByClassName("menus_items")[1].setAttribute("style", "display:none!important");

但经过查询得知，CSS 中的 display 属性无法实现动态效果，因此无法实现我们想要的渐变效果。于是我做了一些改进，给需要显示的元素单独添加了一个标签 visible。随着页面向上或向下滚动，可以选择相应的元素。这样我们就可以通过 CSS 路径获取到该元素并随意添加内容了。

最后一步是将第一个步骤中添加的元素替换为页面标题。请注意修改下面的信息，如果你不想去除后缀，可以将 .split(“ | LiuShen’s Blog”)[0] 部分删除。

前置工作添加好了，下面我们就开始实现核心的美化部分，添加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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
/* 导航栏做居中处理 */
#nav-right{
    flex:1;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}

#nav.show {
    display: flex;
    justify-content: center;
}

#nav .site-page {
    padding-bottom: 14px;
}
#page-header.not-top-img #nav {
    display: flex;
    justify-content: center;
}

#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 {
    margin-top: 14px;
}
#nav .menus_items .menus_item .menus_item_child li a {
    /* padding: 6px 15px; 修改这个为正常值，原0 23 */
    padding-top: 6px; /* 上方padding为 6px */
    padding-right: 18px; /* 右方padding为 15px */
    padding-bottom: 6px; /* 下方padding为 6px */
    padding-left: 15px; /* 左方padding为 15px */
    text-align: center;
}
#nav #travellings {
    padding: 0 14px 0 ;
}

#nav #ten-years {
    padding: 0 14px 0 0;
}

/* 添加横向布局 */
nav.show:not(.hide-menu) .menus_item_child li:not(#sidebar-menus li){
    float: left;
    border-radius: 13px!important;
    -webkit-border-radius: 13px!important;
    -moz-border-radius: 13px!important;
    -ms-border-radius: 13px!important;
    -o-border-radius: 13px!important;
}
nav.show:not(.hide-menu) .menus_item_child:not(#sidebar-menus ul){
  /*
    left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调
  改为：*/
  left:50%;
  translate:-50%;
}

/* 添加边界和圆角 */
#nav .menus_items .menus_item .menus_item_child {
    padding: 7px 7px; /* 10px的左右padding */
    border-radius: 20px; /* 添加10px的圆角 */
}

#nav #page-name {
    position: relative;
    padding: 10px 30px /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
}

/*显示标题*/
#nav #page-name::before {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    color: #4C4948;
    top: 0;
    left: 0;
    content: '回到顶部';
    background-color: #ffffff;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    opacity: 0;
    line-height: 45px;
    /* 添加边框 */
    border: 1px solid #4C4948; /* 你可以根据需要调整边框颜色和宽度 */
}

[data-theme=dark] /*显示标题*/
#nav #page-name::before {
    color: #B9BABB;
    background-color: #000000;
    border: 1px solid #B9BABB; /* 你可以根据需要调整边框颜色和宽度 */
}


#nav #page-name:hover:before {
    opacity: 1;
}

#nav #name-container {
    transition: opacity 1.2s ease, transform 1.2s ease;
    opacity: 0; /* 初始化为隐藏 */
    transform: translateY(-80px); /* 向上移动一些，使其开始时不可见 */
    z-index: 1; /* 初始化层级为 1 */
    position: absolute; /* 让元素在同一位置上叠加 */
}

#nav .menus_items {
    transition: opacity 1.2s ease, transform 1.2s ease;
    opacity: 0; /* 初始化为隐藏 */
    transform: translateY(-80px); /* 向上移动一些，使其开始时不可见 */
    z-index: 1; /* 初始化层级为 1 */
    position: absolute; /* 让元素在同一位置上叠加 */
}

/* 当元素显示时，重置 transform 和 opacity */
#nav #name-container.visible {
    opacity: 1;
    z-index: 2;
    transform: translateY(0);
}
#nav .menus_items.visible {
    opacity: 1;
    z-index: 2;
    transform: translateY(0);
}

/* 显示隐藏 */
@media (max-width: 870px) {
    #nav #page-name {
        display:none;
    }
}

修改完成后，你可能会发现在刷新页面时状态栏不显示，需要下滑或上滑才能重新显示。这是因为状态栏没有 visible 标签。打开 [root]\themes\butterfly\layout\includes\header，并修改 menu_item.pug 文件中的第二行内容，确保在生成页面时提前添加 visible 标签，以防止刷新后被隐藏。

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
if theme.menu
+  .menus_items.visible
-  .menus_items
    each value, label in theme.menu
      if typeof value !== 'object'
        .menus_item
          - const valueArray = value.split('||')
          a.site-page(href=url_for(trim(valueArray[0])))
            if valueArray[1]
              i.fa-fw(class=trim(valueArray[1]))
            span=' '+label
      else
        .menus_item
          - const labelArray = label.split('||')
          - const hideClass = labelArray[2] && trim(labelArray[2]) === 'hide' ? 'hide' : ''
          a.site-page.group(class=`${hideClass}` href='javascript:void(0);')
            if labelArray[1]
              i.fa-fw(class=trim(labelArray[1]))
            span=' '+ trim(labelArray[0])
            i.fas.fa-chevron-down
          ul.menus_item_child
            each val,lab in value 
              - const valArray = val.split('||')
              li
                a.site-page.child(href=url_for(trim(valArray[0])))
                  if valArray[1]
                    i.fa-fw(class=trim(valArray[1]))
                  span=' '+ lab

上述代码中，我将隐藏的内容放到了页面的上方，即网站页面之外。这样做是因为我不太熟悉点击穿透的技巧，如果你了解的话，可以教我一下。如果将内容放到页面上方，就不会有这些问题了，因为鼠标根本无法点击到那里。

twikoo表情包

我经常浏览各个博客，发现大多数都使用默认的表情包。偶尔有一些站点会使用多种表情包，但在描述文字方面却经常很凌乱，有的描述文字甚至是一串字符串。对于我来说，表情包的整齐排列非常重要，因为我有点强迫症。我希望描述文字、文件名称和表情包类别名称都能整整齐齐，这样既方便我自己，也方便读者。因此，我稍微整理了一下，将所有表情包都放到了github仓库中，并分享出来，希望能对大家有所帮助。

描述文字展示

描述文字是指选中表情包后在评论区显示的文字。为了方便起见，我将所有的描述文字都改成了“表情包名称 + 表情包内容”的格式。经过整理，我选用了 blobcat、HeyBox、Heo、LineDog、emoji 以及 B 站小电视 等表情包。我将这些表情包整理到了 GitHub 仓库中，你可以自行取用。
其中：

  • blobcat来自杜老师的博客
  • HeyBox自己寻找
  • Heo来自洪哥的博客
  • LineDog来自白夜的博客

所有表情包整理的github仓库链接如下，大家可以自行取用：

引用站外地址，不保证站点的可用性和安全性
表情包仓库|Willow-god
github.com:willow-god

可以直接调用文件：

1
https://fastly.jsdelivr.net/gh/willow-god/owo/owo.json

该文件仅支持 Twikoo，如果是其他评论系统，请自行修改格式。由于某些原因，JSD 在国内访问速度并不理想，请自行切换其他源或直接复制文件内容到本地使用。下面是国内加速版的表情包文件，图像尽可能使用访问更快速的链接替代，请自行保存文件到本地后即可直接使用：

1
https://fastly.jsdelivr.net/gh/willow-god/owo/owo-fast.json

至此，本篇文章告一段落！篇幅较短，希望能够帮助你们改进自己喜欢的格式！

参考教程

引用站外地址，不保证站点的可用性和安全性
Hexo-Butterfly-Twikoo评论区美化
陈鑫磊 · 没有BUG的代码是不完美的
引用站外地址，不保证站点的可用性和安全性
Butterfly导航栏美化
June · 遇事不决，可问春风
引用站外地址，不保证站点的可用性和安全性
Sticker-Heo表情发布：个人博客的基础表情系列
张洪Heo · 分享设计与科技生活

每日一图

今天是好看的动漫小姐姐！

— 柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜