示例样式
电脑端
手机端
自定义配置（源代码在这里）
这里推荐一个在线查看代码的网站。
网站使用说明：
将自己的代码全部粘贴进标注左上的代码框，然后在右下的代码框中就会显示样式。
代码配置
1、搜索顶部背景图片，直接修改其中的yoururl替换为你的链接，也可以修改为单一颜色。示例：background: #ef859d2e;
2、搜索博主头像，直接修改其中的yoururl替换为你的链接。
以上就是主要的配置项，如果你想继续修改自己的样式（内联式css），请仔细查看代码的注释以及原twikoo配置项。
<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%; ">
<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>
|
twikoo 原配置项
| 参数 | 含义 |
|---|
| ${SITE_URL} | 网站链接 |
| ${SITE_NAME} | 网站名字 |
| ${PARENT_NICK} | 被回复人昵称 |
| ${PARENT_COMMENT} | 被回复人的评论内容 |
| ${NICK} | 回复人昵称 |
| ${COMMENT} | 回复人评论内容 |
| ${POST_URL} | 文章链接 |
| ${IMG} | 回复人头像 |
| ${PARENT_IMG} | 被回复人头像 |
| ${MAIL} | 回复人邮件 |
| ${IP} | 回复人 IP 地址 |
配置流程
1、在twikoo配置好以后，登录上你的管理面板，选择配置管理。
2、在其中找到邮件通知
3、找到如下配置
MAIL_SUBJECT: 这是系统发送给游客看的邮箱模板。
MAIL_TEMPLATE: 同上。默认的样式就是给游客看的，不会有博主搞给自己看吧（呜呜呜，就是我。）
MAIL_SUBJECT_ADMIN: 这是系统发给博主的 ，告诉你你的博客有人来啦！
MAIL_TEMPLATE_ADMIN: 同上。两个模板可以搞一样的，也可以单独设置。（我设置的两个一样。）
4、接下来将你的代码分别放到MAIL_TEMPLATE和MAIL_TEMPLATE_ADMIN中。
5、最后，不要忘记保存。
