点击查看更新记录

更新记录

2021-12-06:内测方案v0.02

  1. 更改配色,适应twikoo魔改评论气泡配色。
  2. 初步完成气泡评论魔改,方案等待twikoo添加博主评论class以后继续优化。

2021-12-07:内测方案v0.03

  1. 新增博主评论气泡,需更新至twikoo_v1.4.12
  2. 博主头像右移
  3. 回复框左移70px

2021-12-07:内测方案v0.06

  1. 完善自适应,窄屏保持头像同侧
  2. 修复图片出框问题(感谢贰猹的帮助)
  3. 修复代码自动换行问题(恭喜贰猹双杀)
  4. 调整突变区间为1024px(凑个整)

2021-12-07:内测方案v0.06

  1. 调整设备名称常态隐藏,悬停显示
  2. 应读者要求,加入淡入动画。

2021-12-21:内测方案v0.07

  1. 修复.tk-row选择域。
  2. tk-row精确选择为tk-row[data-v-d82ce9a0],即点赞回复框。

思路讲解

点击查看思路讲解

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

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

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

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

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

魔改正文

点击查看魔改正文

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

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

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

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

  1. 新建[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[data-v-d82ce9a0] {
    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[data-v-d82ce9a0] {
    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;
    }
    }
  2. 修改[Blogroot]\_config.butterfly.ymlinject配置项
      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更新)

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

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

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