twikoo评论块气泡风格魔改美化

Akilar

发布于 2021-12-08 15:58:17

1.4K0

发布于 2021-12-08 15:58:17

文章被收录于专栏：Akilarの糖果屋

要对 twikoo 进行魔改，同时又不破坏评论结构。那我首先想到的是用 js 附加 class，然后针对新增的 class 进行样式覆写。

但是在尝试过程中，发现不论我如何推迟附加 class 的 js 执行时间，它永远早于 twikoo 评论加载。~~原因还在排查…… 才怪咧，我它喵直接跑去提 issue，才不要在这排查~~

接着就是气泡话评论，用伪类可以轻松实现气泡的小三角，但是因为更改了 overflow 的可见性，如果发横向长图时，若添加了灯箱，存在图片出框可能性，在从 QQ 简洁模式取色时发现，QQ 的评论气泡也存在这个问题。~~那我就不管这个无伤大雅的小 bug 啦。~~

然后给 twikoo 仓库发了个 PR，给博主评论块添加一个 class 以供识别博主和访客。这样方便后续做样式分离，比如评论区变成 QQ 对话框样式这样子。

整体都是采用覆写样式，尽量不用偏移操作来强制移动元素。自适应上考虑宽屏情况，在窄屏时沿用单边结构避免博主头像出框。

魔改正文

点击查看魔改正文

本方案仍为内测尝鲜版，目前测试无影响正常使用的 bug。请读者酌情使用。

博主气泡效果需要将 twikoo 版本更新至 v1.4.12 及以上。

考虑到气泡大小自适应文本内容的话，会出现博主评论气泡在最左边，而头像在最右边的情况，除非重写布局，不然光靠 relative 的定位难以处理所有宽度下的左右分布情况。所以最后就采用统一宽度了。如果有更好的方案可以在评论区提示。

本方案不具备普适性，不会做成 NPM 插件，对于细节上的，如头像宽度，配色方案可以参考注释自行调整。各类配色效果也希望可以分享到评论区。我想做一个展示集锦。

新建 [Blogroot]\themes\butterfly\source\css\custom\twikoo-beautify.css,

/* 自定义twikoo评论输入框高度 */
.tk-input[data-v-619b4c52] .el-textarea__inner {
  height: 130px !important;
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input[data-v-619b4c52] .el-textarea__inner:focus {
  background-image: none !important;
}
/* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
.tk-replies {
  left: -70px;
  width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.tk-replies .tk-avatar img {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
/* 回复框左移，避免窄屏时出框 */
.tk-comments-container .tk-submit {
  position: relative;
  left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
  background: #00a6ff; /*默认模式访客气泡配色*/
  padding: 10px;
  color: #fff; /*默认模式访客气泡字体配色*/
  border-radius: 10px;
  font-size: 16px !important;
  width: fit-content;
  max-width: 100%;
  position: relative !important;
  overflow: visible !important;
  max-height: none !important;
}
/* 修复图片出框 */
.tk-content img {
  max-width: 100% !important;
}
/* 修复过长文本出框 */
.tk-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tk-content a {
  color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-master .tk-content {
  background: #ff8080; /*默认模式博主气泡配色*/
  color: #fff; /*默认模式博主气泡字体配色*/
  width: fit-content;
  max-width: 100%;
}
.tk-master .tk-content a {
  color: #eeecaa;
}
.tk-master .tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-row {
  max-width: 100%;
  width: fit-content;
}
.tk-avatar {
  border-radius: 50%;
  margin-top: 10px;
}

/* 夜间模式配色，具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
  border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #000;
  border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
  /* 设置宽度上限，避免挤压博主头像 */
  .tk-content {
    max-width: 75%;
    width: fit-content;
  }
  .tk-master .tk-content {
    width: 75%;
  }
  .tk-master .tk-content::before {
    left: 100%;
    border-left: 15px solid #ff8080;
    border-right: 0px solid transparent;
  }
  .tk-master .tk-avatar {
    position: relative;
    left: calc(75% + 70px);
  }
  .tk-master .tk-row {
    position: relative;
    top: 0px;
    left: calc(75% - 230px);
  }
  [data-theme="dark"] .tk-master .tk-content::before {
    border-left: 15px solid #000;
    border-right: 0px solid transparent;
  }
}
/* 设备名称常态隐藏，悬停评论时显示 */
.tk-extras {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
  -webkit-animation: tk-extras-fadeIn 0.5s linear;
  -moz-animation: tk-extras-fadeIn 0.5s linear;
  -o-animation: tk-extras-fadeIn 0.5s linear;
  -ms-animation: tk-extras-fadeIn 0.5s linear;
  animation: tk-extras-fadeIn 0.5s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}

修改 [Blogroot]\_config.butterfly.yml 的 inject 配置项

  inject:
    head:
+     - <link rel="stylesheet" href="/css/custom/twikoo-beautify.css"  media="defer" onload="this.media='all'">

魔改方向	教程原贴
为 Butterfly 主题下的 twikoo 添加灯箱	为 butterfly 主题的 twikoo 添加图片点击放大功能
洪哥 Acrylic 主题（即原 Butterfly-heo）定制版评论样式微调，与本文可兼容	Twikoo 魔改样式分享 - 博客评论系统的定制皮肤
对 Butterfly 的评论区进行修改，添加侧栏弹出动作，确保在浏览文章时也能打开评论区同步评论。	butterfly 评论区魔改美化方案

TO DO

完成气泡风格评论块

整合为纯 CSS 方案

博主、访客评论块样式区分（需等 twikoo 更新）

调整不同分辨率下的自适应情况，窄屏保持头像均在左侧，超宽屏设定宽度上限。避免头像挤压或者评论单行过长的情况。

调整评论设备名显示逻辑，常态隐藏，悬停显示。

调整评论区分割模块，设置分割线区分不同区间评论（待定，不是很符合气泡对话的风格）

twikoo 评论块气泡风格魔改美化

https://cloud.tencent.com/developer/article/1915340

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度