Home
avatar

CatOi

邮箱通知模版推荐

2912字 14.6分钟 分享

前言

本文是一篇关于邮箱回复通知美化模版的展示推荐教程，主要介绍如何使用模版美化邮箱回复通知，以及如何选择合适的模版。

使用方法

  • 将修改好的邮件模版的html用美化压缩工具进行压缩，如：HTML格式化在线工具
  • 将压缩后的html代码复制到后台 - 邮件通知 的 MAIL_TEMPLATE 和 MAIL_TEMPLATE_ADMIN 对应处

参数释义

参数释义
${SITE_URL}网站链接
${SITE_NAME}网站名字
${POST_URL}文章链接
${PARENT_NICK}被回复人昵称
${PARENT_COMMENT}被回复人的评论内容
${PARENT_IMG}被回复人头像
${NICK}回复人昵称
${COMMENT}回复人评论内容
${IMG}回复人头像
${MAIL}回复人邮件
${IP}回复人 IP 地址

模版及效果展示

模版样式1

回复通知模版

完整代码

<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.cn/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>(此邮件由评论服务自动发出，支持直接回复)</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://q.qlogo.cn/g?b=qq&k=2cuOQJ3AtuE2zKx19ia2UuA&kti=ZCsL7gAAAAA&s=640" 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;2024-2025&nbsp;By <a href="https://blog.xcodey.com/" 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

管理员通知模版

完整代码

<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.cn/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://q.qlogo.cn/g?b=qq&k=2cuOQJ3AtuE2zKx19ia2UuA&kti=ZCsL7gAAAAA&s=640" 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;2024-2025&nbsp;By <a href="https://blog.xcodey.com/" 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

回复通知模版

完整代码

<style>
    img {
        display: none;
    }

    blockquote {
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        margin: 10px 0;
        padding: 10px;
        border-left: 5px solid #b0b0b0;
        border-radius: 10px;
    }
    pre,
    blockquote,
    blockquote p,
    .twikoo-content p {
        margin: 0
    }

    pre {
        position: relative;
        border-radius: 10px;
        border: 1px solid #ddd;
        overflow: auto;
        padding: 30px 1em 1em;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        white-space: pre-wrap;
        word-wrap: break-word
    }

    code {
        white-space: pre !important;
    }

    pre::-webkit-scrollbar {
        display: none
    }

    pre::before {
        content: '';
        position: absolute;
        top: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ff5f56;
        box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    }

    ul,
    .qmbox ol, .qmbox ul {
        margin: 0;
        padding: 0 0 0 15px;
    }

    .twikoo-main {
        width:100%;
        max-width:800px;
        margin: 20px auto 0;
        padding: 20px;
        border-radius:12px;
        border:#e0e0e0 1px solid;
        overflow:hidden;
        box-shadow:inset 5px 5px 10px #c1c6cd,inset -5px -5px 10px #fff;
        box-sizing: border-box;
    }

    .twikoo-content {
        display: flex;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 15px;
        gap: 10px;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff;
        flex-direction: column;
    }

    .twikoo-center {
        text-align: center;
    }

    .twikoo-hr {
        width: 320px;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    .twikoo-link {
        text-decoration: none;
        color: #9c515b;
    }
    .twikoo-bold {
        font-weight: 600;
        color: #777;
    }
    .twikoo-footer-p {
        text-align: center;
        margin-top: 2rem;
        display: block;
        color: #b3b3b1;
    }

    .twikoo-footer-img {
        display: block;
        width: 2.8rem;
        margin: 0 auto;
        border-radius: 50%;
    }

    .twikoo-footer-hr {
        width: 200px;
        border: 0;
        border-bottom: 1px solid #ccc;
        margin: 10px auto;
    }

    .twikoo-footer-link {
        text-align: center;
        color: #9c515b;
        margin-left: 5px;
        text-decoration: none;
    }

    .twikoo-chakan {
        text-align: center;
    }

    .twikoo-chakan a:hover {
        box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff !important
    }

    .twikoo-chakan a {
        color: #9c515b;
        text-decoration: none;
        padding: 10px 15px;
        font-size: 13px;
        border-radius: 10px;
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        transition: all .3s ease-in-out;
    }
</style>
<div class="twikoo-main">
    <center>
        <h3>你收到了来自 <a class="twikoo-link" href="${NICK}">${NICK}</a> 的回复</h3>
    </center>
    <hr class="twikoo-hr">
    <p class="twikoo-bold">您在 <a class="twikoo-link" href="${POST_URL}" target="_blank">${SITE_NAME}</a> 上发表的评论：</p>
    <div class="twikoo-content">${PARENT_COMMENT}</div>
    <p class="twikoo-bold"><a class="twikoo-link" href="${NICK}">${NICK}</a> 给您回复啦：</p>
    <div class="twikoo-content">${COMMENT}</div>
    <p class="twikoo-bold">此邮件由评论服务自动发出，直接回复无效</p><br>
    <div class="twikoo-chakan">
        <a href="${POST_URL}" target="_blank">点击去原文查看&gt;&gt;</a>
    </div>
    <div class="twikoo-footer-p">
        <img src="https://q.qlogo.cn/headimg_dl?dst_uin=277160461&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2025-2025 <a href="https://blog.xcodey.com" class="twikoo-footer-link" target="_blank">橘子的个人星球</a>
    </div>
</div>

效果展示

回复通知模版2

管理员通知模版

完整代码

<style>
    img {
        display: none;
    }

    blockquote {
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        margin: 10px 0;
        padding: 10px;
        border-left: 5px solid #b0b0b0;
        border-radius: 10px;
    }
    pre,
    blockquote,
    blockquote p,
    .twikoo-content p {
        margin: 0
    }

    pre {
        position: relative;
        border-radius: 10px;
        border: 1px solid #ddd;
        overflow: auto;
        padding: 30px 1em 1em;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        white-space: pre-wrap;
        word-wrap: break-word
    }

    code {
        white-space: pre !important;
    }

    pre::-webkit-scrollbar {
        display: none
    }

    pre::before {
        content: '';
        position: absolute;
        top: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ff5f56;
        box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    }

    ul,
    .qmbox ol, .qmbox ul {
        margin: 0;
        padding: 0 0 0 15px;
    }

    .twikoo-main {
        width:100%;
        max-width:800px;
        margin: 20px auto 0;
        padding: 20px;
        border-radius:12px;
        border:#e0e0e0 1px solid;
        overflow:hidden;
        box-shadow:inset 5px 5px 10px #c1c6cd,inset -5px -5px 10px #fff;
        box-sizing: border-box;
    }

    .twikoo-content {
        display: flex;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 15px;
        gap: 10px;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff;
        flex-direction: column;
    }

    .twikoo-ip {
        padding: 30px 1em 1em;
        position: relative;
        white-space: nowrap;
        overflow: auto;
        scrollbar-width: none;
    }

    .twikoo-ip::before {
        content: '';
        position: absolute;
        top: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ff5f56;
        box-shadow: 20px 0 #ffbd2e, 40px 0 #27c93f;
    }

    .twikoo-center {
        text-align: center;
    }

    .twikoo-hr {
        width: 320px;
        border: 0;
        border-bottom: 1px solid #ccc;
    }

    .twikoo-link {
        text-decoration: none;
        color: #9c515b;
    }
    .twikoo-bold {
        font-weight: 600;
        color: #777;
    }
    .twikoo-footer-p {
        text-align: center;
        margin-top: 2rem;
        display: block;
        color: #b3b3b1;
    }

    .twikoo-footer-img {
        display: block;
        width: 2.8rem;
        margin: 0 auto;
        border-radius: 50%;
    }

    .twikoo-footer-hr {
        width: 200px;
        border: 0;
        border-bottom: 1px solid #ccc;
        margin: 10px auto;
    }

    .twikoo-footer-link {
        text-align: center;
        color: #9c515b;
        margin-left: 5px;
        text-decoration: none;
    }

    .twikoo-chakan {
        text-align: center;
    }

    .twikoo-chakan a:hover {
        box-shadow: inset 3px 3px 6px #c1c6cd, inset -3px -3px 6px #fff !important
    }

    .twikoo-chakan a {
        color: #9c515b;
        text-decoration: none;
        padding: 10px 15px;
        font-size: 13px;
        border-radius: 10px;
        box-shadow: inset 3px 3px 6px #f4f4f4, inset -3px -3px 6px #dcdcdc;
        transition: all .3s ease-in-out;
    }
</style>
<div class="twikoo-main">
    <center>
        <h3>你收到了来自 <a class="twikoo-link">${NICK}</a> 的评论</h3>
    </center>
    <hr class="twikoo-hr">
    <p class="twikoo-bold">评论者信息：</p>
    <div class="twikoo-content twikoo-ip">昵称：${NICK}<br>IP地址：${IP}<br>邮箱：${MAIL}<br>具体网址：${POST_URL}</div>
    <p class="twikoo-bold"><a class="twikoo-link">${NICK}</a> 的评论内容：</p>
    <div class="twikoo-content">${COMMENT}</div>
    <p class="twikoo-bold">此邮件由评论服务自动发出，直接回复无效</p><br>
    <div class="twikoo-chakan">
        <a href="${POST_URL}" target="_blank">点击去原文查看&gt;&gt;</a>
    </div>
    <div class="twikoo-footer-p">
        <img src="https://q.qlogo.cn/headimg_dl?dst_uin=277160461&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2021-2024 <a href="https://blog.xcodey.com" class="twikoo-footer-link" target="_blank">橘子的个人星球</a>
    </div>
</div>

效果展示

管理员通知模版2

模版样式3

回复通知模版

完整代码

<div style="
    border-radius: 10px 10px 10px 10px;
    font-size: 13px;
    color: #555555;
    width: 666px;
    margin: 50px auto;
    border: 1px solid #eee;
    max-width: 100%;
    background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);
    box-shadow: 0 1px 5px rgb(0 0 0 / 15%);">
    <div style="
    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));
    height: 66px;">
       <!-- <p style="font-size:15px;
        word-break:break-all;
        padding: 23px 32px;
        margin:0;
        background-color: hsla(0,0%,100%,.4);
        border-radius: 10px 10px 0 0;">
            您在<a style="text-decoration:none;
            color:#12addb;" href="http://xcodey.com/" target="_blank">橘子🍊个人博客</a>上的留言有新回复啦！
        </p>-->
        <p style="font-size:15px;
        word-break:break-all;
        padding: 23px 32px;
        margin:0;
        background-color: hsla(0,0%,100%,.4);
        border-radius: 10px 10px 0 0;">
            您在<a style="text-decoration:none;
            color:#12addb;" href="{{site.url}}" target="_blank">CatOi的个人星球🪐</a>上的留言有新回复啦！
        </p>
    </div>
    <div style="margin:20px auto;width:90%">
        <p><strong >😊Hi，{{parent.nick}}，</strong> 同学，您曾在<a href="{{site.postUrl}}" style="text-decoration: none;
        color:#12addb"></a>上发表评论：</p>
        <div style="background: #f5f5f5;
        margin:20px 0;
        padding:15px;
        border-radius:5px;
        font-size:14px;">
            <p>{{parent.comment | safe}}</p>
        </div>
        <p><strong >{{self.nick}}</strong> 给您的回复如下：</p>
        <div style="background: #f5f5f5;
        margin:20px 0;
        padding:15px;
        border-radius:5px;
        font-size:14px;">
            <p>{{self.comment | safe}}</p>
        </div>
        <p>
            您可以点击<a style="text-decoration:none;
            color:#12addb" target="_blank" href="{{site.postUrl}}">查看回复的完整內容</a>
            ，欢迎再次光临<a style="text-decoration:none;
            color:#12addb" href="https://catoi.cn/" target="_blank">CatOi的个人星球🪐</a>。
        </p>
        <div style="color: #8c8c8c; font-size: 10px;width: 100%;text-align: center;word-wrap: break-word;">
            <p style="padding: 20px">书上说,天下没有不散的宴席.书上还说,人生何处不相逢.</p>
        </div>
    </div>
</div>

效果展示

回复通知模版3

管理员通知模版

完整代码

<div style="
    border-radius: 10px 10px 10px 10px;
    font-size: 13px;
    color: #555555;
    width: 666px;
    margin: 50px auto;
    border: 1px solid #eee;
    max-width: 100%;
    background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);
    box-shadow: 0 1px 5px rgb(0 0 0 / 15%);">
    <div style="
    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));
    height: 66px;">
        <p style="font-size:15px;
        word-break:break-all;
        padding: 23px 32px;
        margin:0;
        background-color: hsla(0,0%,100%,.4);
        border-radius: 10px 10px 0 0;">
            您的<a style="text-decoration:none;
            color: #ffffff;" href="{{site.url}}" target="_blank">CatOi的个人星球🪐</a>有了新评论啦！
        </p>
    </div>
    <div style="margin:20px auto;width:90%">
        <p><strong >{{self.nick}}</strong> 同学 给您的评论如下：</p>
        <div style="background: #f5f5f5;
        margin:20px 0;
        padding:15px;
        border-radius:5px;
        font-size:14px;">
            <p >{{self.comment | safe}}</p>
        </div>
        <p>
            您可以点击<a style="text-decoration:none;
            color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>
        </p>
        <div style="color: #8c8c8c; font-size: 10px;width: 100%;text-align: center;word-wrap: break-word;">
            <p style="padding: 20px">喧闹任其喧闹，自由我自为之。我自风情万种，与世无争。——陈果</p>
        </div>
    </div>
</div>

效果展示

管理员通知模版3

模版样式4

回复通知模版

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
</head>
<style>
    .container {
        margin: 5% 10%;
    }
    .box {
        padding: 10px 20px;
        margin: 15px 0;
        border-radius: 10px;
        border-left: 4px solid #539dfd;
        background-color: #ecf7fe;
    }
    .title {
        font-size: 15px;
        font-weight: 400;
        margin: 5px 0;
    }
    .time {
        color: #539dfd;
        border-bottom: 1px dashed #539dfd;
    }
    .jump {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        background: #539dfd;
        text-decoration: none;
    }
</style>
<body>
    <div class="container">
        <div style="text-align: center;">
            <h1 style="font-size: 20px; text-align: center;">您的留言被回复啦~</h1>

            <div style="display: flex; justify-content: center; font-size: 12px;">
                <h3 class="title" style="font-size: 12px;">发送方：<span>${NICK}</span></h3>
                <h3 class="title" style="margin-left: 20px; font-size: 12px;">IP地址：<span>${IP}</span>
                </h3>
            </div>
        </div>
        <div class="box">
            <h3 class="title" style="line-height: 25px;">你的留言：<span>${PARENT_COMMENT}</span></h3>
        </div>
        <div class="box">
            <h3 class="title" style="line-height: 25px;">回复内容：<span>${COMMENT}</span></h3>
        </div>
        <a href="${POST_URL}" target="_blank" class="jump">查看完整回复内容</a>
    </div>
</body>
</html>

效果展示

回复通知模版4

管理员通知模版

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
</head>
<style>
    .container {
        margin: 5% 10%;
    }
    .box {
        padding: 10px 20px;
        margin: 15px 0;
        border-radius: 10px;
        border-left: 4px solid #539dfd;
        background-color: #ecf7fe;
    }
    .title {
        font-size: 15px;
        font-weight: 400;
        margin: 5px 0;
    }
    .time {
        color: #539dfd;
        border-bottom: 1px dashed #539dfd;
    }
    .jump {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        background: #539dfd;
        text-decoration: none;
    }
</style>
<body>
    <div class="container">
        <div style="text-align: center;">
            <h1 style="font-size: 20px; text-align: center;">《<span>{parent.comment | safe}</span/>》</h1>
            <div style="display: flex; justify-content: center; font-size: 12px;">
                <h3 class="title" style="font-size: 12px;">发送方：<span>${NICK}</span></h3>
                <h3 class="title" style="margin-left: 20px; font-size: 12px;">IP地址：<span class="time">${IP}</span>
                </h3>
            </div>
        </div>
        <div class="box">
            <h3 class="title" style="line-height: 25px;"><span>${COMMENT}</span></h3>
        </div>
        <a href="${POST_URL}" target="_blank" class="jump">查看完整回复内容</a>
    </div>
</body>
</html>

效果展示

管理员通知模版4
邮箱通知 美化 模板

喜欢这篇文章嘛，觉得文章不错的话，奖励奖励我！

支付宝打赏支付宝微信打赏 微信

本文由 CatOi 于 2025-04-20 下午 发布

文章地址：邮箱通知模版推荐

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。完整转载请注明来自 CatOi的博客！