前言

给评论区的昵称、邮箱和网址输入框加上小提示，点进输入框时显示，离开后隐藏。再顺手改一下评论附加信息和加载更多按钮的样式。

美化之前

本站使用 Hexo 6.0.0 + Butterfly 4.5.1，其他版本请按实际情况调整。样式、脚本引入及全局变量用法可参考：

🏠 站内链接，放心访问
Hexo博客添加自定义css和js文件
June's Blog
🏠 站内链接，放心访问
Butterfly自用全局变量
June's Blog

参考链接

  • Leonus 的评论输入提醒教程：https://blog.leonus.cn/2022/inputAlert.html（原链接暂不可用）。

修改方案

1. 添加样式

新建 source/static/css/twikoo-input.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
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '填写昵称，方便大家认识你';
}

#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '填写邮箱，可用于接收回复通知';
}

#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗';
}

/* 当用户点击输入框时显示 */
#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block;
}

/* 主内容区 */
#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -60px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 14px 18px;
    background: #444;
    color: #fff;
}

/* 小角标 */
#twikoo-wrap .el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
    我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -48px);
}

#twikoo-wrap .el-textarea__inner{
    height: 110px !important;
}

.tk-extras {
    padding-bottom: 15px;
    border-bottom: 2px dashed var(--june-card-border, #e3e8ef)
}

.tk-extra {
    border: var(--style-border, 1px solid #e3e8ef);
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    margin-right: 4px!important
}

.tk-expand {
    margin-top: 16px;
    background-color: var(--june-secondbg, var(--card-bg));
    color: var(--june-fontcolor, var(--font-color));
    border-radius: 8px;
    border: var(--style-border, 1px solid #e3e8ef);
}

.tk-expand:hover {
    background-color: var(--june, #49b1f5)!important;
    color: var(--june-white, #fff)
}


#twikoo-wrap .el-input { position: relative; }

然后在 _config.butterfly.yml 的 inject.head 里引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/static/css/twikoo-input.css">

2. 提示文案

Twikoo 这版输入区域使用 Element UI 的 class，nth-child(1/2/3) 分别对应昵称、邮箱和网址。:focus-within 表示里面的输入框获得焦点时显示气泡，不需要绑定点击脚本。

本站原 CSS 没有统一限制在评论容器中。这版代码给输入区域补了 #twikoo-wrap，并设置定位上下文，避免误伤页面其他表单。你自己的容器 ID 不同时要一起改。

提示文案只负责说明，不会凭空增加功能。源码原来写“输入 QQ 号自动获取昵称和头像”，还写“回复将会发送到邮箱”，都依赖具体服务配置；这里改成更克制的表述。邮件是否发送仍由后端邮件服务决定。

3. 手机端适配

窄屏可能没有足够空间容纳不换行的提示。可以缩短文案，或给气泡设置最大宽度并允许换行。升级 Twikoo 后应重新检查 DOM，不能假定这些内部 class 永远不变。