部署
之前一直使用的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/Artalk
  use: Twikoo
  text: 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 invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page
配置环境Id,环境Id就是上一步你访问的地址。
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https://twikoo.xxx.xxx
  region:
  visitor: false
  option:
如果Twikoo前端版本过低,打开themes/butterfly/plugins.yml配置文件,修改版本。
twikoo:
  name: twikoo
  file: dist/twikoo.all.min.js
  version: 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("网站图标");
  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;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</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;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</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 地址 | 
大功告成
此模版参考于「Twikoo评论回复邮件模板:Acrylic Mail 粉」。



















