Typecho CommentToMail邮件插件模板美化

  1.  首页
  2. 正文  

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://suntl.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://suntl.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://suntl.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

版权声明：本文为原创文章，版权归 suntl.com 所有，转载请注明出处！

本文链接：http://suntl.com/234.html

友情提示：如果博客出现404或链接失效，请留言或者联系博主修复！

最后修改：2024 年 07 月 01 日
© 允许规范转载

发表评论

16 条评论

  1. KEER

    不错。收藏一下
    回复
  2. 一帆舟

    你好，贵站使用的是这个邮箱吗，请问163的邮箱为什么老是配置不上。求回复，很急
    回复
    1. sunpma
      @一帆舟

      163的邮箱以前用过，并没有问题
      回复
      1. 一帆舟
        @sunpma

        大佬你好，请问端口什么的需要怎么配置，我配置了之后发不了信(´இ皿இ｀)
        回复
        1. sunpma
          @一帆舟

          网易的邮件端口上网百度下吧，我也忘记了
          回复
          1. 一帆舟
            @sunpma

            你能加一下我的QQ吗
            回复
  3. 滑稽大叔

    请问哪几个地方是需要改成自己的呢
    回复
    1. sunpma
      @滑稽大叔

      将替换代码中的 邮件地址 网站链接 网站名称 修改为你自己的就OK了
      回复
  4. 大神你好

    请问是直接把两个文件代码加到“邮件正文模版”下面的代码框里吗？
    回复
    1. sunpma
      @大神你好

      是的，替换掉即可
      回复
      1. 大神你好
        @sunpma

        插件安装后目录下只有PHPMailer.php和Plugin.php两个文件吗
        回复
        1. sunpma
          @大神你好

          直接在后台设置里修改就可以了，我用的插件是CommentToMail
          回复
          1. 冷眸_ln
            @sunpma

            你好，我在插件的设置里面找不到编辑邮件模板丫？能棒棒我嘛？
            回复
            1. sunpma
              @冷眸_ln

              后台-控制台-评论邮件提醒
              回复
              1. 冷眸_ln
                @sunpma

                感谢感谢，我知道啦！我一直在插件里面找，唉！

                回复
          2. 大神你好
            @sunpma

            好的，谢谢
            回复