Twikoo评论部署

前言

通过使用 Vercel + MongoDB 来部署Twikoo服务免费且不需要服务器，加上Twikoo的独立的配置界面，对小白超级友好

引用站外地址

Twikoo文档

一个简洁、安全、免费的静态网站评论系统

部署

申请 MongoDB 账号，之后点击 Create your Atlas account。然后创建免费的 MongoDB 数据库，区域推荐选择 AWS / N. Virginia (us-east-1)

点击 Create Cluster 开始创建数据库用户。记住数据库密码，按步骤设置允许所有 IP（0.0.0.0/0） 地址的连接，填完信息后，点击 Finish and Close

在 Clusters 页面点击 Connect，选择 Connect your appliction，记住数据库连接字符串

连接字符串中的 <password> 修改为你的数据库密码

点击此链接将 Twikoo 一键部署到 Vercel 中，然后在成功部署的项目的Settings中找到 Environment Variables 来添加环境变量 MONGODB_URI，它的值为前面记录的数据库连接字符串

进入 Deployments , 然后在任意一项后面点击更多（三个点） , 然后点击 Promote to Production。成功部署当前服务后，在 Project 就可以看到 Twikoo 云函数运行正常 的提示

可以在 Project 页面中点击 Domain 来配置一个域名（Vercel提供的域名被墙了）

在主题配置文件 _config.anzhiyu.yml 中修改如下代码为

# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: [vercel中该项目域名]
  region:
  visitor: false
  option:

邮件通知

进入 Twikoo评论系统的管理界面，配置管理 -> 邮件通知 -> MAIL_TEMPLATE 和 MAIL_TEMPLATE_ADMIN，这两个分别是通知邮件模板和博主通知邮件模板：

<div><div id="isForwardContent"><div><div id="content"><div style="background: white;width: 95%;max-width: 800px;margin: auto auto;         border-radius: 15px;         border: #39c5bb 1px solid;         overflow: hidden;         -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);         box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);       "><header style="overflow: hidden"><img src="https://tuchuang.voooe.cnhttps://jsd.onmicrosoft.cn/npm/blogassert/images/2023/01/02/violet.webp" style="width: 100%; z-index: 666" /></header><div style="padding: 5px 20px;background-color: #46e1c60d"><div class="dear" style="  border-radius: 30px;           position: relative;             color: white;             float: left;             z-index: 999;             background: #39c5bb;             padding: 10px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">亲爱的 ${PARENT_NICK} 同学：</div><br /><center><h3>来自 <strong>${NICK}</strong> 的回复</h3></center><hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /><br /><p>您好！您在 <a href="${POST_URL}" style="text-decoration: none; color: #39c5bb" target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论：</p><div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5; margin: 15px 0px; padding-left: 20px; padding-right: 20px; padding-top: 20px;">${PARENT_COMMENT}</div><p><strong>${NICK}</strong> 给您回复啦：                             </p><div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; padding-top: 20px; ">${COMMENT}</div><p>欢迎再次光临小站： <a style="text-decoration:none; color:#39c5bb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a></p><p>(此邮件由Twikoo系统发出，支持直接回复)</p><div class="chakan" style="text-align: center;"><a href="${POST_URL}" style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#39c5bb;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em" target="_blank">点击去原文查看&gt;&gt;</a><p></p></div><div class="footer-p" style="text-align: center; margin-top: 3rem; display:block;color:#b3b3b1;text-decoration:none;"><img src="https://blhorizon.github.io/img/avatar.webp" style="width:5rem; margin:0 auto;border-radius: 5px;" />&nbsp;                                 <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2022-2023&nbsp;By <a href="https://blhorizon.github.io/" style="text-align:center; color: #39c5bb;text-decoration: none;font-weight: bold" target="_blank">萌傀儡</a><p></p></div></div></div></div></div><br /></div><style type="text/css">             .qmbox ::-webkit-scrollbar { display: none; }         </style><style id="cloudAttachStyle" type="text/css">             .qmbox #divNeteaseBigAttach, .qmbox #divNeteaseBigAttach_bak { display: none; }         </style><style id="blockquoteStyle" type="text/css">             .qmbox blockquote { display: none; }         </style><style type="text/css">             .qmbox body { font-size: 14px; font-family: arial, verdana, sans-serif; line-height: 1.666; padding: 0; margin: 0; overflow: auto; white-space: normal; word-wrap: break-word; min-height: 100px; } .qmbox td, .qmbox input, .qmbox button, .qmbox select, .qmbox body { font-family: Helvetica, 'Microsoft Yahei', verdana; } .qmbox pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; width: 95%; } .qmbox th, .qmbox td { font-family: arial, verdana, sans-serif; line-height: 1.666; } .qmbox img { border: 0; } .qmbox header, .qmbox footer, .qmbox section, .qmbox aside, .qmbox article, .qmbox nav, .qmbox hgroup, .qmbox figure, .qmbox figcaption { display: block; } .qmbox blockquote { margin-right: 0px; }         </style><style type="text/css">             @media screen and (max-width: 1100px) {#content p {font-size: 10px;} #content h3 {font-size: 14px;} .footer-p {font-size: 9px;} .dear {font-size: 12px;}}         </style><style id="ntes_link_color" type="text/css">             .qmbox a, .qmbox td a { color: #236da1; }         </style></div></div>

1
2

<div><div id="isForwardContent"><div><div id="content"><div style="background: white;width: 95%;max-width: 800px;margin: auto auto;         border-radius: 15px;         border: #39c5bb 1px solid;         overflow: hidden;         -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);         box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);       "><header style="overflow: hidden"><img src="https://tuchuang.voooe.cnhttps://jsd.onmicrosoft.cn/npm/blogassert/images/2023/01/02/violet.webp" style="width: 100%; z-index: 666" /></header><div style="padding: 5px 20px;background-color: #46e1c60d"><div class="dear" style="  border-radius: 30px;           position: relative;             color: white;             float: left;             z-index: 999;             background: #39c5bb;             padding: 10px 30px;             margin: -25px auto 0;             box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);           ">亲爱的萌傀儡：</div><br /><center><h3>来自 <strong>${NICK}</strong> 的评论</h3></center><hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;" /><br><p> 							您好！系统得知 <strong>${NICK}</strong> 刚刚在您的网站发表评论： 						</p><div class="tk-content" style="border-radius: 8px;border: 1px solid #ddd; padding-bottom: 20px; background-color: #f5f5f5;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; padding-top: 20px; ">${COMMENT}</div><p>特地通知您，快去看看吧！</p><div class="chakan" style="text-align: center;"><a href="${POST_URL}" style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#39c5bb;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em" target="_blank">点击去原文查看&gt;&gt;</a><p></p></div><div class="footer-p" style="text-align: center; margin-top: 3rem; display:block;color:#b3b3b1;text-decoration:none;"><img src="https://blhorizon.github.io/img/avatar.webp" style="width:5rem; margin:0 auto;border-radius: 5px;" />&nbsp; 							<hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;" />©&nbsp;2022-2023&nbsp;By <a href="https://www.fomal.cc/" style="text-align:center; color: #39c5bb;text-decoration: none;font-weight: bold" target="_blank">萌傀儡</a><p></p></div></div></div></div></div><br /></div><style type="text/css"> 		.qmbox ::-webkit-scrollbar { display: none; } 	</style><style id="cloudAttachStyle" type="text/css"> 		.qmbox #divNeteaseBigAttach, .qmbox #divNeteaseBigAttach_bak { display: none; } 	</style><style id="blockquoteStyle" type="text/css"> 		.qmbox blockquote { display: none; } 	</style><style type="text/css"> 		.qmbox body { font-size: 14px; font-family: arial, verdana, sans-serif; line-height: 1.666; padding: 0; margin: 0; overflow: auto; white-space: normal; word-wrap: break-word; min-height: 100px; } .qmbox td, .qmbox input, .qmbox button, .qmbox select, .qmbox body { font-family: Helvetica, 'Microsoft Yahei', verdana; } .qmbox pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; width: 95%; } .qmbox th, .qmbox td { font-family: arial, verdana, sans-serif; line-height: 1.666; } .qmbox img { border: 0; } .qmbox header, .qmbox footer, .qmbox section, .qmbox aside, .qmbox article, .qmbox nav, .qmbox hgroup, .qmbox figure, .qmbox figcaption { display: block; } .qmbox blockquote { margin-right: 0px; } 	</style><style type="text/css"> 		@media screen and (max-width: 1100px) {#content p {font-size: 10px;} #content h3 {font-size: 14px;} .footer-p {font-size: 9px;} .dear {font-size: 12px;}} 	</style><style id="ntes_link_color" type="text/css"> 		.qmbox a, .qmbox td a { color: #236da1; } 	</style></div></div>
	</style></div></div>