It has been 846 days since the last update, the content of the article may be outdated.
前言
应小伙伴要求,出一篇(水一篇🤪)twikoo评论气泡的美化教程。
预览
效果如下图:

twikoo评论气泡美化后的效果
新建css样式
新建source\css\twikoo.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
| .el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before { content: '输入QQ号会自动获取昵称和头像🐧'; }
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before { content: '收到回复将会发送到您的邮箱📧'; }
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before { content: '可以通过昵称访问您的网站🔗'; }
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before, .el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after { display: block; }
.el-input.el-input--small.el-input-group.el-input-group--prepend::before { display: none; position: absolute; top: -60px; white-space: nowrap; border-radius: 10px; left: 50%; transform: translate(-50%); padding: 14px 18px; background: #444; color: #fff; }
.el-input.el-input--small.el-input-group.el-input-group--prepend::after { display: none; content: ''; position: absolute;
border: 12px solid transparent; border-top-color: #444; left: 50%; transform: translate(-50%, -48px); }
#twikoo .tk-content { background: rgb(235 235 235 / 60%); padding: 10px 15px; border-radius: 10px; }
.tk-content * { margin: 0; }
.tk-expand { background: var(--card-bg); border: 1px solid #e0e3ed; box-shadow: 0 5px 10px rgb(189 189 189 / 10%); transition: all .3s ease-in-out; border-radius: 12px; }
|
引入css样式
修改 _config.butterfly.yml 主题配置文件,修改内容如下:
1 2 3 4 5 6 7 8 9
| # Inject # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag) # 插入代码到头部 </head> 之前 和 底部 </body> 之前 inject: head: # 自定义css + - <link rel="stylesheet" href="/css/twikoo.css"> #添加的自定义css文件 bottom: # 自定义js
|
Hexo三连
1
| hexo clean && hexo g && hexo s
|