前言
目前博主已将twikoo升级到了2.0.7版本，一些之前被修复过的样式问题重新出现了。
例如，评论区的一些文字过小，头像和编辑框不对齐……
环境
操作环境如下：
| 项目 | 值 | 版本 |
|---|
| 程序 | HuGo | 0.166.0 |
| 主题 | Stack | 4.0.2 |
| 评论 | Twikoo | 2.0.7 |
操作
Chrome浏览器按下F12进入开发者调试工具。
打开Stack主题下twikoo的模板文件：
.\themes\hugo-theme-stack\layouts\_partials\comments\provider\twikoo.html
举例修复
按下 CTRL + SHIFT + C ，点击昵称，在开发者工具中找到对应的样式，修改font-size属性值。
将其修改为14px。
可观察到页面发生变化。
在开发者工具中右键，选择复制规则。
这里只保留修改后的属性，也就是font-size。
1
2
3
| .twikoo .tk-input--small .tk-input-group__prepend, .twikoo .tk-input--small .tk-input-group__append {
font-size: 14px;
}
|
将它粘贴到twikoo.html文件的<style>标签里。
我的修复
按照类似的操作步骤，可以调整底下两个按钮的字体大小、评论者头像大小、后台的3个超链接。
这里分享下我修改后的样式：
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
| {{/* 基础信息说明 */}}
.twikoo .tk-input--small .tk-input-group__prepend, .twikoo .tk-input--small .tk-input-group__append {
font-size: 14px;
}
{{/* 基础信息内容 */}}
.twikoo .tk-input--small .tk-input__inner {
font-size: 14px;
}
{{/* 评论内容 */}}
.twikoo .tk-input__inner {
font-size: 14px;
}
{{/* 按钮文字 */}}
.twikoo .tk-button--small {
font-size: 14px;
}
{{/* 3个蓝色文字标签 */}}
.twikoo .tk-sort-item {
font-size: 12px;
}
{{/* 3个蓝色SVG图案 */}}
.twikoo .tk-icon.__comments {
width: 12px;
height: 12px;
}
{{/* 后台3个蓝色标签 */}}
.twikoo .tk-button--mini {
font-size: 16px;
}
{{/* 编辑框字数提示 */}}
.twikoo .tk-input__count {
font-size: 10px;
position: absolute;
bottom: 3px;
}
{{/* 欲评论者的头像 */}}
.twikoo .tk-avatar {
width: 30px;
height: 30px;
}
{{/* 子评论头像 */}}
.twikoo .tk-comment .tk-submit .tk-avatar, .twikoo .tk-replies .tk-avatar {
width: 25px;
height: 25px;
}
.twikoo .tk-comment .tk-submit .tk-avatar .tk-avatar-img, .twikoo .tk-replies .tk-avatar .tk-avatar-img {
height: 25px;
line-height: 25px;
}
|
效果
这次修改完全基于我的个人喜好。
