感谢 @iMaeGoo 大神用爱发电,顺利启用 Twikoo 评论系统,并完美迁移 Valine 评论数据。

下午在 @大大的小蜗牛 博客看到评论系统右下角竟然不是 Valine 哦,赫然显示这 Twikoo,啥?!

原来是基于腾讯云开发的评论系统,换!

相关教程:

优化新评论邮件通知

以下内容基于 0.2.3 版本,进入云函数 twikoo -- index.js

if (config.SC_SENDKEY) return,开启了微信通知,则停用“新评论邮件通知”。

相关位置如下:

// 博主通知
async function noticeMaster (comment) {
  if (!transporter) if (!await initMailer()) return
  //若设置了微信通知,则不发邮件
  if (config.SC_SENDKEY) return
  if (config.BLOGGER_EMAIL == comment.mail) return
  const SITE_NAME = config.SITE_NAME

分享邮件通知模板HTMl

评论回复通知模板

建议等后续版本更新,改的话也是进云函数 twikoo -- index.js 内替换。

// 博主通知模板

<div style="line-height:24px;font-size:13px;">     <p><span style="color:#3eae5f"> ${NICK} </span> 说:</p>     <p >${COMMENT}</p>     <p style="font-size:12px;line-height:12px;"><a style="color:#b3b3b1;text-decoration:none;" href="${POST_URL}" target="_blank">${POST_URL}</a></p> </div>

// 评论回复通知模板

<div style="padding:2em 10%;color:#b3b3b1;width:420px;margin:0 auto;font-size:14px";> 	<p style="text-align:center;">Hi,<span style="color:#3eae5f"> ${PARENT_NICK} </span></p> 	<p style="font-size:13px;text-align:center;">有人回复了您在 <strong style="font-weight:bold"> ${SITE_NAME} </strong> 上的评论</p> 	<hr style="width:64px;border:0;border-bottom:1px solid #e5e5e5;margin:24px auto;">     <div style="color:#333;overflow:hidden;">     	<p style="display:inline-block;float:left;"><span style="color:#3eae5f;font-weight:bold"> 您 </span><span>说:</span></p>     	${PARENT_COMMENT}     </div>     <div style="color:#333;overflow:hidden;">      	<p style="display:inline-block;float:left;"><span style="color:#3eae5f;font-weight:bold"> ${NICK} </span><span>说:</span></p>      	${COMMENT}     </div>     <p><a style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align:center;font-weight:400;border:0;border-radius:999em" href="${POST_URL}" target="_blank">点击查看</a></p>     <hr style="width:64px;border:0;border-bottom:1px solid #e5e5e5;margin:24px auto;">     <p><a style="display:block;color:#b3b3b1;text-decoration:none;text-align:center;" href="${SITE_URL}" target="_blank"> ${SITE_NAME} </a></p> </div>

评论样式自定义

主要匹配了暗黑样式和评论管理页面改为全屏,效果对比:

Twikoo
.dark-theme .tk-tag{background-color: #4a4b50 !important;border-color:#434a56 !important;display: inline !important;padding: 2px 4px !important;}
.dark-theme .tk-expand{background:linear-gradient(rgba(38,42,56,0),#3b3d42) !important;}
.dark-theme .el-button,.dark-theme .el-input__inner, .dark-theme .el-textarea__inner, .dark-theme .tk-tag-green{color: silver !important;background-color: #252627 !important;border-color: #4a4b50 !important;}
.dark-theme .tk-meta-input .el-input .el-input-group__prepend{color: silver !important;background-color: #4a4b50 !important;border-color: #4a4b50 !important;}
.dark-theme .el-button--primary.is-disabled,.dark-theme .el-button--primary.is-disabled:active,.dark-theme .el-button--primary.is-disabled:focus,.dark-theme .el-button--primary.is-disabled:hover{color: #FFF !important;background-color: #252627 !important;border-color: #4a4b50 !important;}
.dark-theme .el-button.tk-preview{border:none;}
.dark-theme .tk-action-icon svg,.dark-theme .tk-comments-title .tk-icon svg{fill: #ccc !important;}
.dark-theme .tk-action-count{color: #ccc !important;}
.tk-extras,.tk-row.actions .tk-action-icon,.tk-preview{display: none !important;}
.tk-content p{margin: 0;}
.tk-admin{position:fixed !important;}
.tk-admin-comment table col[name=el-table_1_column_1]{width:5%;}
.tk-admin-comment table col[name=el-table_1_column_2],.tk-admin-comment table col[name=el-table_1_column_3]{width:10%;}
.tk-admin-comment table col[name=el-table_1_column_4]{width:55%;}
.tk-admin-comment table col[name=el-table_1_column_5]{width:15%;}