Typecho CommentToMail邮件插件模板美化

CommentToMail 邮件插件虽然很好用,但默认的邮件模板实在是太low了

于是找到了一款非常漂亮的 CommentToMail 插件的邮件模板

邮件模板预览:


设置方法:

在 CommentToMail 插件,设置 - 编辑邮件模板

一:将 guest.html 替换为如下代码:

<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAy0lEQVQY0x2PsQtAYBDFP1keKZfBKIqNycCERUkMKLuSgZnRarIpJX8s3zfcDe9+794du+8bRVHQOI4wDAOmaULTNDDGYFkWMVVVQUTQdZ3iOMZxHCjLElVV0TRNYHVdC7ptW6RpSn3f4wdJkiTs+w6WJAl4DcOAbdugKAq974umaRAEARgXn+cRW3zfFxuiKCJZloXGHMeBbdv4Beq6Duu6Issy7iYB8Jbnucg8zxPLsggnj/zvIxaGIXmeB9d1wSE+nOeZf4HruvABUtou5ypjMF4AAAAASUVORK5CYII=')">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;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 rgba(0, 0, 0, 0.15);">
        <div style="width:100%;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="https://sunpma.com"> {siteTitle} </a>上的留言有新回复啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author_p} 您曾在文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text_p}</p>
            <p>{author} 给您的回复如下:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
              <p>您可以点击 <a style="text-decoration:none; color:#12addb" href="{permalink}">查看回复的完整內容 </a>,欢迎再次光临 <a style="text-decoration:none; color:#12addb" href="https://sunpma.com"> {siteTitle} </a>。</p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

二:将 owner.html 替换为如下代码:

<style>
    .wrap span {
        display: inline-block;
    }
    .w260{ width: 260px;}
    .w20{ width: 20px;}
    .wauto{ width: auto;}
</style>
<table style="width: 99.8%;height:99.8% "><tbody><tr><td style="background:#fafafa url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAy0lEQVQY0x2PsQtAYBDFP1keKZfBKIqNycCERUkMKLuSgZnRarIpJX8s3zfcDe9+794du+8bRVHQOI4wDAOmaULTNDDGYFkWMVVVQUTQdZ3iOMZxHCjLElVV0TRNYHVdC7ptW6RpSn3f4wdJkiTs+w6WJAl4DcOAbdugKAq974umaRAEARgXn+cRW3zfFxuiKCJZloXGHMeBbdv4Beq6Duu6Issy7iYB8Jbnucg8zxPLsggnj/zvIxaGIXmeB9d1wSE+nOeZf4HruvABUtou5ypjMF4AAAAASUVORK5CYII=')">
    <div style="border-radius: 10px 10px 10px 10px;font-size:13px;    color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;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 rgba(0, 0, 0, 0.15);">
        <div style="width:100%;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="https://sunpma.com"> {siteTitle} </a>上有新的评论啦!
            </p>
        </div>
        <div style="margin:40px auto;width:90%">
            <p>{author} 在您文章《{title}》上发表评论:</p>
            <p style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{text}</p>
        
            <p class="wrap" style="text-decoration:none"><span class="w260">时间:{time}</span><span class="w20"> </span><span class="wauto">IP:{ip}</span></p>
            <p class="wrap" style="text-decoration:none"><span class="w260">邮箱:{mail}</span><span class="w20"> </span><span class="wauto">状态:{status}</span></p>
            <p><a style="text-decoration:none; color:#12addb" href="{permalink}" target='_blank'>[查看评论]</a> | <a style="text-decoration:none; color:#12addb" href="{manage}" target='_blank'>[管理评论] </a></p>
            <style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style>
        </div>
    </div>
</td></tr></tbody></table>

三:将替换代码中的 邮件地址 网站链接 网站名称 修改为你自己的就OK了


感谢原作者提供的代码:https://www.liuguogy.com/archives/typecho-commenttomail-mail-style.html

发表评论

12 条评论

  1. 一帆舟

    你好,贵站使用的是这个邮箱吗,请问163的邮箱为什么老是配置不上。求回复,很急

    1. sunpma
      @一帆舟

      163的邮箱以前用过,并没有问题

      1. 一帆舟
        @sunpma

        大佬你好,请问端口什么的需要怎么配置,我配置了之后发不了信(´இ皿இ`)

        1. sunpma
          @一帆舟

          网易的邮件端口上网百度下吧,我也忘记了

          1. 一帆舟
            @sunpma

            你能加一下我的QQ吗

  2. 滑稽大叔

    请问哪几个地方是需要改成自己的呢

    1. sunpma
      @滑稽大叔

      将替换代码中的 邮件地址 网站链接 网站名称 修改为你自己的就OK了

  3. 大神你好

    请问是直接把两个文件代码加到“邮件正文模版”下面的代码框里吗?

    1. sunpma
      @大神你好

      是的,替换掉即可

      1. 大神你好
        @sunpma

        插件安装后目录下只有PHPMailer.php和Plugin.php两个文件吗

        1. sunpma
          @大神你好

          直接在后台设置里修改就可以了,我用的插件是CommentToMail

          1. 大神你好
            @sunpma

            好的,谢谢