分享一个魔改的 Artalk 评论系统邮件模版

本文最后更新于 2024-05-17，文章内容可能已经过时。

1、整体的效果预览

1.1网页版邮件最终效果预览

1.2、移动端显示样式

根据自己的需求，可以自己修改移动端下的样式。

2、artalk 基本内容变量

在自定义邮件内容模版时候，有必要了解一下 artalk的基本内容变量，以供自己后边修改内容模版。

{{content}}        # 评论内容
{{link_to_reply}}  # 回复链接
{{nick}}           # 评论者昵称
{{page_title}}     # 页面标题
{{page_url}}       # 页面 PageKey (URL)
{{reply_content}}  # 回复对象的内容
{{reply_nick}}     # 回复对象的昵称f
{{site_name}}      # 站点名
{{site_url}}       # 站点 URL

上边是一个模版显示的最基本信息，可以满足大部分的显示需求了，如果想要获取更多的信息，也可以参考其他模版变量：

# 评论创建者
{{comment.badge_color}}
{{comment.badge_name}}
{{comment.content}}
{{comment.content_raw}}
{{comment.date}}
{{comment.datetime}}
{{comment.email}}
{{comment.email_encrypted}}
{{comment.id}}
{{comment.is_allow_reply}}
{{comment.is_collapsed}}
{{comment.is_pending}}
{{comment.link}}
{{comment.nick}}
{{comment.page.admin_only}}
{{comment.page.id}}
{{comment.page.key}}
{{comment.page.site_name}}
{{comment.page.title}}
{{comment.page.url}}
{{comment.page.vote_down}}
{{comment.page.vote_up}}
{{comment.page_key}}
{{comment.page_title}}
{{comment.rid}}
{{comment.site.first_url}}
{{comment.site.id}}
{{comment.site.name}}
{{comment.site.urls.0}}
{{comment.site.urls_raw}}
{{comment.site_name}}
{{comment.time}}
{{comment.ua}}
{{comment.visible}}
{{comment.vote_down}}
{{comment.vote_up}}

# 父评论（评论创建者回复的评论）
{{parent_comment.badge_color}}
{{parent_comment.badge_name}}
{{parent_comment.content}}
{{parent_comment.content_raw}}
{{parent_comment.date}}
{{parent_comment.datetime}}
{{parent_comment.email}}
{{parent_comment.email_encrypted}}
{{parent_comment.id}}
{{parent_comment.is_allow_reply}}
{{parent_comment.is_collapsed}}
{{parent_comment.is_pending}}
{{parent_comment.link}}
{{parent_comment.nick}}
{{parent_comment.page.admin_only}}
{{parent_comment.page.id}}
{{parent_comment.page.key}}
{{parent_comment.page.site_name}}
{{parent_comment.page.title}}
{{parent_comment.page.url}}
{{parent_comment.page.vote_down}}
{{parent_comment.page.vote_up}}
{{parent_comment.page_key}}
{{parent_comment.page_title}}
{{parent_comment.rid}}
{{parent_comment.site.first_url}}
{{parent_comment.site.id}}
{{parent_comment.site.name}}
{{parent_comment.site.urls}}
{{parent_comment.site.urls_raw}}
{{parent_comment.site_name}}
{{parent_comment.time}}
{{parent_comment.ua}}
{{parent_comment.visible}}
{{parent_comment.vote_down}}
{{parent_comment.vote_up}}

3、源码

最后提供自己修改的源码

<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>

4、部署模版

将你的模版文件上传至你的 artalk 工作目录下，并在前端界面进行配置。

希望我的分享对你所有帮助！