twikoo评论块气泡风格美化

本文修改主题为Butterfly主题,若使用其他主题,请自行确认修改位置。

该方法通过外部引入,无需修改主题源文件。

原文出处

https://akilar.top/posts/d99b5f01/

效果预览

修改步骤

  1. 新建[Blogroot]\themes\butterfly\source\css\custom\twikoo_beautify.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
    211
    212
    213
    /* 自定义twikoo评论输入框高度 */
    .tk-input .el-textarea__inner {
    height: 130px !important;
    }
    /* 输入评论时自动隐藏输入框背景图片 */
    .tk-input .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配置项

    1
    2
    3
      inject:
    head:
    + - <link rel="stylesheet" href="/css/custom/twikoo_beautify.css" media="defer" onload="this.media='all'">