Twikoo邮件通知模板分享

前因

昨天摸鱼的时候想改邮件模板，结果怎么改都不满意，最后向六神索取了一份他的模板进行了一些修改。

后果

信息

模板整体风格为拟态化，删除了原模板的图片封面，评论的图片资源不会显示在邮件中（介意的自行更改一下）

对评论的引用和代码块进行了一些美化处理，另外将所有内联的样式改写成类，具体请看图

模板效果

模板代码

警告

底部的头像是QQ的接口可以直接替换为你的QQ也可以换成你自己的链接

博主模版 MAIL_TEMPLATE_ADMIN

html

<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=153336174&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2021-2024 <a href="https://www.bsgun.cn" class="twikoo-footer-link" target="_blank">梦爱吃鱼·Bsgun.CN</a>
    </div>
</div>

访客模版 MAIL_TEMPLATE

html

<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=153336174&spec=100" class="twikoo-footer-img">
        <hr class="twikoo-footer-hr">
        © 2021-2024 <a href="https://www.bsgun.cn" class="twikoo-footer-link" target="_blank">梦爱吃鱼·Bsgun.CN</a>
    </div>
</div>

使用方法

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

参数释义

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

其它模板

如果你对这个模板不太满意可以看一下其它博主分享的模板

爱吃肉的猫

Twikoo评论回复邮件模版

Twikoo邮件通知模板分享

评论区