Waline配置邮箱模板

前述

终于解决了困扰我很久的这个东东，首先是在1panel上面搭建的，当然这就得在docker-compose.yml添加环境变量，虽然知道是这样干的，但是不管我是直接把邮箱模板还是转成变量的形式，始终会报yaml文件格式错误。经过我研究发现是：因为在 MAIL_TEMPLATE_ADMIN 变量中，HTML 代码使用了双引号 (") 来包围字符串，但 HTML 内部也使用了双引号。这会导致字符串的解析错误。在这种情况下需要使用反斜杠 (\) 来转义 HTML 标签内的双引号。

开始配置

1.配置.env

MAIL_TEMPLATE

"<div
    style=\"background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;\">
    <style type=\"text/css\">
        @media screen and (max-width:600px) {

            .afterimg,
            .beforeimg {
                display: none !important
            }
        }
    </style>
    <div
        style=\"border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;\">
        <img class=\"beforeimg\" style=\"width:530px;height:317px;z-index:-100;pointer-events:none\"
            src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png\">
        <img src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg\"
            style=\"width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;\">
        <div
            style=\"width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;\">
            <p style=\"font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;\">
                您在<a style=\"text-decoration:none;color: #9d2850;\" href=\"{{site.url}}\">『{{site.name |
                    safe}}』</a>上的留言收到一条回复</p>
        </div>
        <div class=\"formmain\"
            style=\"background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;\">
            <div style=\"margin:40px auto;width:90%;\">
                <p>😊Hi，{{parent.nick}}，您曾发表的评论：</p>
                <div
                    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:15px;color:#555555;\">
                    {{parent.comment | safe}}</div>
                <p><strong>{{self.nick}}</strong> 回复您：</p>
                <div
                    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:15px;color:#555555;\">
                    {{self.comment | safe}}</div>
                <p><a style=\"text-decoration:none; color:#cf5c83\" href=\"{{site.postUrl}}\" target=\"_blank\"> 查看回复的完整內容
                    </a>，欢迎再次访问<a style=\"text-decoration:none; color:#cf5c83\" href=\"{{site.url}}\" target=\"_blank\">
                        {{site.name}} </a>。
                    <hr />
                <p style=\"font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;\">
                    本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />{{site.url}}</p>
                </p>
                <img src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png\"
                    style=\"width:100%;margin:25px auto 5px auto;display:block;pointer-events:none\">
                <p class=\"bottomhr\" style=\"font-size:12px;text-align:center;color:#999\">© bayuexunyingの博客</p>
            </div>
        </div>
        <img class=\"afterimg\" style=\"width:535px;height:317px;z-index:100;margin-left: -3px;\"
            src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png\">
    </div>
</div>
"

MAIL_TEMPLATE_ADMIN

"<div style=\"background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE; width:100%;\">
    <style type=\"text/css\">
        @media screen and (max-width:600px) {
            .afterimg,
            .beforeimg {
                display: none !important;
            }
        }
    </style>
    <div style=\"border-radius: 10px 10px 10px 10px;font-size:14px;color:#555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: ##ffffff;\">
        <img class=\"beforeimg\" style=\"width:530px;height:317px;pointer-events:none\" src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png\">
        <img src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg\" style=\"width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;\">
        <div style=\"width:100%;background:#f8d1ce;color:#9d2850;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://tva2.sinaimg.cn/large/c56b8822ly1h61tb7tagcj20ii01u3yc.jpg) left top no-repeat;display: flex;justify-content: center;flex-direction: column;\">
            <p style=\"font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;\"> 您在 <a style=\"text-decoration:none;color:#9d2850;\" href=\"{{site.url}}\" target=\"_blank\">{{site.name}}</a> 上的文章有了新的评论</p>
        </div>
        <div class=\"formmain\" style=\"background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom:-155px;z-index:100;\">
            <div style=\"margin:40px auto;width:90%;\">
                <p><strong>{{self.nick}}</strong> 发表了评论：</p>
                <div 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:15px;color:#555555;\">{{self.comment | safe}}</div>
                <p style=\"text-align:center;position: relative;z-index: 99;\"><a style=\"text-decoration:none;color:#cf5c83\" href=\"{{site.postUrl}}\" target=\"_blank\">查看回复的完整內容</a></p>
                <img src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png\" style=\"width:100%;margin:25px auto 5px auto;display:block;pointer-events:none\">
                <p class=\"bottomhr\" style=\"font-size:12px;text-align:center;color:#999\">© bayuexunyingの博客</p>
            </div>
        </div>
        <img class=\"afterimg\" style=\"width:535px;height:317px;margin-left:-3px;\" src=\"https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png\">
    </div>
</div>"

2.配置docker-compose.yml

- MAIL_SUBJECT={{parent.nick | safe}}，您在 『{{site.name | safe}}』 上的评论收到了回复
- MAIL_TEMPLATE=${MAIL_TEMPLATE}
- MAIL_SUBJECT_ADMIN=您有一条新的评论
- MAIL_TEMPLATE_ADMIN=${MAIL_TEMPLATE_ADMIN}

3.重建一下waline

4.测试配置

5.完结

挺折磨的一个邮箱模板配置，想想又提升了还行。