Hexo博客私有部署Twikoo评论系统并迁移评论记录(自定义邮件回复模板)

部署

之前一直使用的artalk，现在想改用Twikoo，采用私有部署的方式。

私有部署 (Docker)

端口可以根据实际情况进行修改

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8100:8100 -v ${PWD}/data:/app/data -e TWIKOO_PORT=8100 -d imaegoo/twikoo

访问localhost:8100，结果如下则表示部署成功

{"code": 100,"message": "Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version": "1.6.39"
}

成功后，如果有域名，使用nginx配置反向代理即可。

Butterfly配置

打开butterfly的主题配置文件_config.yml，启用Twikoo

comments:# Up to two comments system, the first will be shown as default# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalkuse: Twikootext: true # Display the comment name next to the button# lazyload: The comment system will be load when comment element enters the browser's viewport.# If you set it to true, the comment count will be invalidlazyload: falsecount: false # Display comment count in post's top_imgcard_post_count: false # Display comment count in Home Page

配置环境Id，环境Id就是上一步你访问的地址。

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:envId: https://twikoo.xxx.xxxregion:visitor: falseoption:

如果Twikoo前端版本过低，打开themes/butterfly/plugins.yml配置文件，修改版本。

twikoo:name: twikoofile: dist/twikoo.all.min.jsversion: 1.6.39

然后Hexo一键三连

Twikoo配置

在你的评论区，点击右下角设置小图片，初始化密码后，就可以进行配置啦！
在这里插入图片描述

迁移评论

首先从原来的评论系统，将评论数据导出，artalk导出是artrans格式。
然后在Twikoo设置中，选择导入，导入数据。
在这里插入图片描述
详细配置可参照Twikoo 文档

自定义邮件样式

PC端和移动端效果

邮件模板代码

将网站图标更改为你自己网站图标图片的url地址。

<div class="page flex-col"><div class="box_3 flex-col" style="display: flex;position: relative;width: 100%;height: 206px;background: #49BDAD;color: #ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));top: 0;left: 0;justify-content: center;
"><div class="section_1 flex-col" style="background-image: url(&quot;网站图标&quot;);position: absolute;border-radius: 50%;width: 152px;height: 152px;display: flex;top: 130px;background-size: cover;
"></div></div><div class="box_4 flex-col" style="margin-top: 92px;display: flex;flex-direction: column;align-items: center;
"><div class="text-group_5 flex-col justify-between" style="display: flex;flex-direction: column;align-items: center;margin: 0 20px;
"><span class="text_1" style="font-size: 26px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #000000;line-height: 37px;text-align: center;
">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span><span class="text_2" style="font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #00000030;line-height: 22px;margin-top: 21px;text-align: center;
">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</span></div><div class="box_2 flex-row" style="margin: 0 20px;min-height: 128px;background: #F7F7F7;border-radius: 12px;margin-top: 34px;display: flex;flex-direction: column;align-items: flex-start;padding: 32px 16px;width: 80%;
"><div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;margin-bottom: 16px;
"><span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;
">${PARENT_NICK}</span><span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;
">${PARENT_COMMENT}</span></div><hr style="display: flex;position: relative;border: 1px dashed #ef859d2e;box-sizing: content-box;height: 0px;overflow: visible;width: 100%;
"><div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;margin-top: 26px;
"><span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;
">${NICK}</span><span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;
">${COMMENT}</span></div><a class="text-wrapper_2 flex-col" style="min-width: 106px;height: 38px;background: #ef859d38;border-radius: 32px;display: flex;align-items: center;justify-content: center;text-decoration: none;margin: auto;margin-top: 32px;
" href="${POST_URL}"><span class="text_5" style="color: #DB214B;
">查看详情</span></a></div><div class="text-group_6 flex-col justify-between" style="display: flex;flex-direction: column;align-items: center;margin-top: 34px;
"><span class="text_6" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #00000045;line-height: 17px;
">此邮件由评论服务自动发出，直接回复无效。</span>
<span class="text_6" style="
margin-top: 5px;
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 17px;">欢迎再次光临 <a class="text_7" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #4131d2;line-height: 17px;margin-top: 6px;text-decoration: none;
" href="${SITE_URL}">${SITE_NAME}</a>
</span></div></div>
</div>

Twikoo邮件模板配置

打开Twikoo管理面板，将代码复制到配置管理-邮件通知下的MAIL_TEMPLATE中
在这里插入图片描述

Twikoo邮件自定义字段

参数	含义
${SITE_URL}	网站链接
${SITE_NAME}	网站名字
${PARENT_NICK}	被回复人昵称
${PARENT_COMMENT}	被回复人的评论内容
${NICK}	回复人昵称
${COMMENT}	回复人评论内容
${POST_URL}	文章链接
${IMG}	回复人头像
${PARENT_IMG}	被回复人头像
${MAIL}	回复人邮件
${IP}	回复人 IP 地址