twikoo 评论系统配置回复邮件模板
示例样式
电脑端
手机端
twikoo 原配置项
参数含义
${SITE_URL}网站链接
${SITE_NAME}网站名字
${PARENT_NICK}被回复人昵称
${PARENT_COMMENT}被回复人的评论内容
${NICK}回复人昵称
${COMMENT}回复人评论内容
${POST_URL}文章链接
${IMG}回复人头像
${PARENT_IMG}被回复人头像
${MAIL}回复人邮件
${IP}回复人 IP 地址
自定义配置（源代码在这里）
这里推荐一个在线查看代码的。
https://c.runoob.com/front-end/61/
网站使用说明：
将自己的代码全部粘贴进标注1的代码框，然后在2的代码框中就会显示样式。
代码配置
1、搜索顶部背景图片，直接修改其中的yoururl替换为你的链接，也可以修改为单一颜色。示例：background: #ef859d2e;
2、搜索博主头像，直接修改其中的yoururl替换为你的链接。 以上就是主要的配置项，如果你想继续修改自己的样式（内联式css），请仔细查看代码的注释以及原twikoo配置项。
<!--
这是一个包含中文注释的HTML代码片段，该代码用于创建一个博客评论回复的邮件模板。
邮件模板结构如下：
1. 一个带有背景图片的大容器，该图片是邮件的顶部背景。
2. 一个包含头像和回复内容的容器。
3. 一个显示查看详情链接的按钮。
4. 一个包含邮件底部信息的容器。
注意：此代码片段中的一些内容是用变量来表示的，需要在实际使用中替换为具体的值。
-->
<div class="page flex-col">
<!-- 顶部容器，用于显示顶部的背景图片 -->
<div class="box_3 flex-col" style="
display: flex;
position: relative;
width: 100%;
height: 180px;
background-image: url(yoururl); /*顶部背景图片*/
background-size: 100%;
top: 0;
left: 0;
justify-content: center; ">
<!-- 头像容器，用于显示博主的头像 -->
<div class="section_1 flex-col" style="
background-image: url("yoururl"); /*博主头像*/
position: absolute;
border-radius: 25px;
width: 135px;
height: 135px;
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: #f0f0f0;
border-radius: 12px;
margin-top: 34px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px 16px;
width: calc(100% - 40px); ">
<!-- 原评论者的昵称和评论内容 -->
<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%; ">
<!-- 回复者的昵称、回复内容和IP地址 -->
<div class="text-wrapper_4 flex-col justify-between" style="
display: flex;
flex-direction: column;
margin-left: 30px; ">
<hr>
<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>
<sapn class="text_8" style="
margin-top: 6px;
margin-right: 22px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;">
${IP}
</sapn>
</div>
<!-- 查看详情按钮，链接到博客文章 -->
<a class="text-wrapper_2 flex-col" style="
min-width: 106px;
height: 38px;
background: #2ee0ea;
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: #ffffff; ">
查看详情
</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>
<!-- 底部链接，链接到博客首页 -->
<a class="text_7" style="
height: 17px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #DB214B;
line-height: 17px;
margin-top: 6px;
text-decoration: none; "
href="${SITE_URL}">
前往博客</a>
</div>
</div>
</div>
配置流程
1、在twikoo配置好以后，登录上你的管理面板，选择配置管理。
2、在其中找到邮件通知
3、找到如下配置
MAIL_SUBJECT: 这是系统发送给游客看的邮箱模板。
MAIL_TEMPLATE: 同上。默认的样式就是给游客看的，不会有博主搞给自己看吧（呜呜呜，就是我。）
MAIL_SUBJECT_ADMIN: 这是系统发给博主的 ，告诉你你的博客有人来啦！
MAIL_TEMPLATE_ADMIN: 同上。两个模板可以搞一样的，也可以单独设置。（我设置的两个一样。）
