分享几个artalk邮件通知模板

<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: #FFFFFF;height: 66px;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;border-bottom:1px dashed #499EFF;" href="{{page_url}}">『{{page_title}}』</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%;">
                <div class="Messages_box">
                    <p style="display:flex;justify-content:flex-end">老大您({{nick}})曾评论：</p>
                    <div class="ax_post_box-comments-single Messages-author"
                        style="display: flex;justify-content: flex-end;margin-bottom: 5px;margin-top: 7px;">
                        <div class="ax_post_box-comment-avatar" style="width: auto;flex: none;order: 2">
                            <img src="https://cravatar.cn/avatar/{{parent_comment.email_encrypted}}?d=monsterid&s=80"
                                style="width: 40px;height: 40px;border-radius: 5px">
                        </div>
                        <div class="ax_post_box-comment-text" style="position: relative;margin-right: 10px">
                            <div class="ax_post_box-comment-text-inner"
                                style="background-color: #f1f3fa;padding: 10px;border-radius: 9px;margin-bottom: 3px">
                                {{parent_comment.content}}</div>
                        </div>
                    </div>
                    <p><strong>{{reply_nick}}</strong> 回复您：</p>
                    <div class="ax_post_box-comments-single Messages-user" style="display: flex;margin-bottom: 5px;margin-top: 7px;">
                        <div class="ax_post_box-comment-avatar" style="width: auto;flex: none">
                            <img src="https://cravatar.cn/avatar/{{comment.email_encrypted}}?d=monsterid&s=80"
                                style="width: 40px;height: 40px;border-radius: 5px">
                        </div>
                        <div class="ax_post_box-comment-text" style="position: relative;margin-left: 10px">
                           
                            <div class="ax_post_box-comment-text-inner"
                                style="background-color: #f1f3fa;padding: 10px;border-radius: 9px;margin-bottom: 3px">
                                {{comment.content}}</div>
                        </div>
                    </div>
                </div>

                <p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{link_to_reply}}" 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">{{site_name}}竭诚为您服务！</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>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>邮件通知</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            max-width: 600px;
            margin: 30px auto;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .header {
            background-color: #007bff;
            color: #ffffff;
            padding: 20px;
            border-radius: 10px 10px 0 0;
            text-align: center;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
        }
        .content {
            padding: 20px;
            line-height: 1.6;
        }
        .content h2 {
            font-size: 18px;
            color: #333333;
            margin-top: 0;
        }
        .content p {
            font-size: 14px;
            color: #555555;
        }
        .content a {
            color: #007bff;
            text-decoration: none;
        }
        .comment {
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }
        .comment img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 10px;
        }
        .comment .author {
            font-weight: bold;
            color: #333333;
        }
        .comment .text {
            margin-top: 10px;
            color: #555555;
        }
        .footer {
            text-align: center;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 0 0 10px 10px;
            font-size: 12px;
            color: #888888;
        }
        .footer a {
            color: #007bff;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>您有新的回复</h1>
        </div>
        <div class="content">
            <h2>Hi, {{nick}}!</h2>
            <p>您在 <a href="{{page_url}}" target="_blank">{{page_title}}</a> 上的留言有人回复了。</p>
            <div class="comment">
                ![](https://cravatar.cn/avatar/{{parent_comment.email_encrypted)
                <span class="author">您曾经的评论：</span>
                <div class="text">{{content}}</div>
            </div>
            <div class="comment">
                ![](https://cravatar.cn/avatar/{{comment.email_encrypted)
                <span class="author">{{reply_nick}} 回复您：</span>
                <div class="text">{{reply_content}}</div>
            </div>
            <p>点击 <a href="{{link_to_reply}}" target="_blank">这里</a> 查看回复。</p>
        </div>
        <div class="footer">
            <p>本邮件为系统自动发送，请勿直接回复。</p>
            <p>Copyright © 2024 <a href="{{site_url}}" target="_blank">{{site_name}}</a></p>
        </div>
    </div>
</body>
</html>