魔改笔记六：twikoo及导航栏美化
碎碎念
顶栏动效曾令我费尽心思，眼见鱼鱼和洪哥的导航栏动画如此流畅，随着页面的上下切换标题和菜单，我感到无比畅快。然而，我发现的教程中都未能实现如此平滑的过渡。因此，我使用所学知识，在他人基础上进行改进，最终达成了我心目中的效果。至于 Twikoo 的美化，一开始我觉得原版实在不够美观，于是决定自行修改。在修改过程中，我也参考了一些小伙伴的内容，你可以在下方的引用链接中查看。
教程
twikoo美化
下面是我进行 Twikoo 美化的所有 CSS 代码，你可以随意将其放入某个自定义 CSS 文件中以使用。
/* ========================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美化====================== */上述备注已经相当详细，因此我就不再赘述。下面是改进前后的效果对比：
twikoo原本的夜间样式twikoo原本的白天样式twikoo改进后的夜间样式twikoo改进后的白天样式
夜间样式
白天样式
夜间样式
白天样式
导航栏美化
导航栏美化相对复杂一些。首先，你可以看到我的导航栏下滑时会显示标题，因此我们需要将这部分内容添加进来。修改 [root]\themes\butterfly\layout\includes\header\nav.pug 文件中下方代码标出来的内容，去掉加号即为正常缩进。
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 脚本，内容如下：
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];
}我简单解释一下，我最初使用的代码是：
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。
/* 导航栏做居中处理 */
#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 标签，以防止刷新后被隐藏。
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来自白夜的博客
可以直接调用文件：
https://fastly.jsdelivr.net/gh/willow-god/owo/owo.json该文件仅支持 Twikoo，如果是其他评论系统，请自行修改格式。由于某些原因，JSD 在国内访问速度并不理想，请自行切换其他源或直接复制文件内容到本地使用。下面是国内加速版的表情包文件，图像尽可能使用访问更快速的链接替代，请自行保存文件到本地后即可直接使用：
https://fastly.jsdelivr.net/gh/willow-god/owo/owo-fast.json至此，本篇文章告一段落！篇幅较短，希望能够帮助你们改进自己喜欢的格式！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录