文章摘要
本文详细介绍了为Anheyu-app创建的两个邮箱模板，一个用于作者收到评论，另一个用于用户收到回复。作者收到评论模板通过HTML代码实现，包括通知头部、评论者信息、评论内容、信息标签和查看评论按钮，整体设计简约清晰。用户收到回复模板同样采用HTML编写，包含头部、用户评论内容、回复者信息、回复内容、查看完整对话按钮和页脚。两个模板均采用类似聊天的风格，便于用户阅读和理解。作者鼓励读者使用或修改这些模板，并希望得到反馈以供借鉴。
今天，闲的没事的时候给Anheyu-app新建了两个邮箱模板，分别用于作者收到评论和用户收到回复。以下是对这两个模板的详细说明和代码示例。
假如你是使用别的评论软件如twikoo，artalk等，原理上还是一致的，只需要把占位符换成这两种评论的专用的格式即可（文档上应该有写吧）。
作者收到评论模板
这个模板用于通知作者他们的文章收到了新的评论。
效果如图所示：
以下是模板的HTML代码：
html
html>html>head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>收到新评论title>head>body style="margin: 0; padding: 0; background-color: #0f0f0f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
table width="100%" cellpadding="0" cellspacing="0" style="background-color: #0f0f0f; padding: 50px 20px;">
tr>
td align="center">
table width="640" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
tr>
td style="background-color: #0f0f0f; padding: 48px 40px; text-align: center; border-bottom: 3px solid #c9a227;">
p style="margin: 0 0 12px; color: #c9a227; font-size: 12px; letter-spacing: 6px; text-transform: uppercase;">New Commentp>
h1 style="margin: 0; color: #ffffff; font-size: 32px; font-weight: 300; letter-spacing: 1px;">收到新评论h1>
td>
tr>
tr>
td style="padding: 40px; background-color: #f0f2f5;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td>
table width="100%" cellpadding="0" cellspacing="0">
tr>
td width="52" style="vertical-align: top; padding-right: 12px;">
img src="{{.IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
td>
td style="vertical-align: top;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td align="left" style="padding-bottom: 8px;">
span style="color: #c9a227; font-size: 13px; font-weight: 600;">{{.NICK}}span>
span style="color: #c9a227; font-size: 11px; margin-left: 8px; background-color: rgba(201, 162, 39, 0.15); padding: 2px 8px; border-radius: 10px;">新评论span>
td>
tr>
tr>
td align="left">
div style="display: inline-block; max-width: 85%; background-color: #ffffff; border-radius: 18px 18px 18px 4px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
div style="color: #333333; font-size: 14px; line-height: 1.7;">{{.COMMENT}}div>
div>
td>
tr>
tr>
td align="left" style="padding-top: 10px; padding-left: 4px;">
span style="display: inline-block; background-color: rgba(0,0,0,0.06); color: #666666; font-size: 11px; padding: 5px 10px; border-radius: 12px; margin-right: 8px;">
span style="color: #999999;">邮箱span> {{.MAIL}}
span>
span style="display: inline-block; background-color: rgba(0,0,0,0.06); color: #666666; font-size: 11px; padding: 5px 10px; border-radius: 12px;">
span style="color: #999999;">IPspan> {{.IP}}
span>
td>
tr>
table>
td>
td width="60" style="vertical-align: top;">td>
tr>
table>
td>
tr>
table>
td>
tr>
tr>
td style="padding: 24px 40px 40px; background-color: #f0f2f5; text-align: center;">
a href="{{.POST_URL}}" style="display: inline-block; background-color: #c9a227; color: #0f0f0f; text-decoration: none; padding: 16px 48px; font-weight: 600; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-radius: 30px;">查看评论a>
td>
tr>
tr>
td style="background-color: #0f0f0f; padding: 28px 40px; text-align: center;">
p style="margin: 0; color: #555555; font-size: 12px;">
a href="{{.SITE_URL}}" style="color: #c9a227; text-decoration: none;">{{.SITE_NAME}}a>
span style="color: #333333; margin: 0 12px;">|span>
评论系统自动通知
p>
td>
tr>
table>
td>
tr>
table>body>html>用户收到回复模板
这个模板用于通知用户他们的评论收到了回复。
效果如图所示：
以下是模板的HTML代码：
html
html>html>head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>您收到了一条回复title>head>body style="margin: 0; padding: 0; background-color: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
table width="100%" cellpadding="0" cellspacing="0" style="background-color: #1a1a2e; padding: 50px 20px;">
tr>
td align="center">
table width="640" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">
tr>
td style="background-color: #16213e; padding: 48px 40px; text-align: center; border-bottom: 3px solid #e8b923;">
h1 style="margin: 0 0 8px; color: #ffffff; font-size: 28px; font-weight: 300; letter-spacing: 2px;">您收到了一条回复h1>
p style="margin: 0; color: #e8b923; font-size: 14px; letter-spacing: 4px; text-transform: uppercase;">{{.SITE_NAME}}p>
td>
tr>
tr>
td style="padding: 40px; background-color: #f0f2f5;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td style="padding-bottom: 24px;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td width="60" style="vertical-align: top;">td>
td style="vertical-align: top;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td align="right" style="padding-bottom: 8px;">
span style="color: #666666; font-size: 13px; font-weight: 600;">{{.PARENT_NICK}}span>
span style="color: #999999; font-size: 11px; margin-left: 8px;">您span>
td>
tr>
tr>
td align="right">
div style="display: inline-block; max-width: 85%; background-color: #16213e; border-radius: 18px 18px 4px 18px; padding: 14px 18px; text-align: left;">
div style="color: #ffffff; font-size: 14px; line-height: 1.7;">{{.PARENT_COMMENT}}div>
div>
td>
tr>
table>
td>
td width="52" style="vertical-align: top; padding-left: 12px;">
img src="{{.PARENT_IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
td>
tr>
table>
td>
tr>
tr>
td style="padding-bottom: 16px;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td width="52" style="vertical-align: top; padding-right: 12px;">
img src="{{.IMG}}" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;">
td>
td style="vertical-align: top;">
table width="100%" cellpadding="0" cellspacing="0">
tr>
td align="left" style="padding-bottom: 8px;">
span style="color: #e8b923; font-size: 13px; font-weight: 600;">{{.NICK}}span>
span style="color: #e8b923; font-size: 11px; margin-left: 8px; background-color: rgba(232, 185, 35, 0.15); padding: 2px 8px; border-radius: 10px;">新回复span>
td>
tr>
tr>
td align="left">
div style="display: inline-block; max-width: 85%; background-color: #ffffff; border-radius: 18px 18px 18px 4px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
div style="color: #333333; font-size: 14px; line-height: 1.7;">{{.COMMENT}}div>
div>
td>
tr>
table>
td>
td width="60" style="vertical-align: top;">td>
tr>
table>
td>
tr>
table>
td>
tr>
tr>
td style="padding: 32px 40px; background-color: #ffffff; text-align: center;">
a href="{{.POST_URL}}" style="display: inline-block; background-color: #16213e; color: #ffffff; text-decoration: none; padding: 16px 48px; font-weight: 500; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; border-radius: 30px; border: 2px solid #16213e;">查看完整对话a>
td>
tr>
tr>
td style="background-color: #f8f9fa; padding: 32px 40px; text-align: center; border-top: 1px solid #eeeeee;">
p style="margin: 0 0 8px; color: #999999; font-size: 12px;">此邮件由 a href="{{.SITE_URL}}" style="color: #16213e; text-decoration: none; font-weight: 600;">{{.SITE_NAME}}a> 自动发送p>
p style="margin: 0; color: #bbbbbb; font-size: 11px;">如不希望收到此类通知，请在网站设置中修改偏好p>
td>
tr>
table>
td>
tr>
table>body>html>这两个模板的设计采用了类似聊天的风格，看着还是挺简约清晰的哈，反正我是挺喜欢的，喜欢的可以自己拿去用或者是改改的可以 （最好是改完之后发我借鉴借鉴，嘿嘿）。
