Beautification of Artalk Comment Email Template

Introduction#

Recently, I switched to the Artalk comment system on my blog. I don't know if anyone has noticed. I feel that the default email notification template of Artalk doesn't look good enough. Coincidentally, I found the shopkeeper's twikoo letter-style notification email template in the Candy House 🍬 group files, so I ported it over.

Demo#

Content#

1.#

Create a new MAIL_TEMPLATE.html file in data/mail_tpl with the following content:

The mail_tpl folder does not exist by default and needs to be created manually.

<head>
    <base target="_blank" />
    <style id="scrollbar" type="text/css">
        ::-webkit-scrollbar{width:0!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}pre{white-space:pre-wrap!important;word-wrap:break-word!important;*white-space:normal!important}#letter img{max-width:300px}
    </style>
    <style id="from-wrapstyle" type="text/css">
        #form-wrap{overflow:hidden;height:447px;position:relative;top:0px;transition:all 1s ease-in-out.3s;z-index:0}
    </style>
    <style id="from-wraphoverstyle" type="text/css">
        #form-wrap:hover{height:1300px;top:-200px}
    </style>
</head>

<body>
    <div style="width: 530px;margin: 20px auto 0;height: 1000px;">
        <div id="form-wrap"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png" alt="before" style="position: absolute;bottom: 126px;left: 0px;background-repeat: no-repeat;width: 530px;height: 317px;z-index:-100">
            <div style="position: relative;overflow: visible;height: 1500px;width: 500px;margin: 0px auto;transition: all 1s ease-in-out .3s;padding-top:200px;" <form>
                <div style="background: white;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);"><img style="width:100%;overflow: hidden;" src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" />
                    <div style="padding: 5px 20px;"><br>
                        <div>
                            <h3 style="text-decoration: none; color: rgb(246, 214, 175);">[{{site_name}}], See Letter:</h3>
                        </div><br>
                        <div id="letter" style="overflow:auto;height:300px;width:100%;display:block;word-break: break-all;word-wrap: break-word;">
                            <p style="display: inline-block;">You have commented on <a style="text-decoration: none;color: rgb(246, 214, 175)" target="_blank" href="{{page_title}} display: inline-block;">{{site_name}}</a>:</p>
                            <div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: " Arial", "Microsoft YaHei" , "黑体" , "宋体" , sans-serif;">{{content}}</div>
                            <p>Received a reply from @{{reply_nick}}:</p>
                            <div style="border-bottom: #ddd 1px solid;border-left: #ddd 1px solid;padding-bottom: 20px;background-color: #eee;margin: 15px 0px;padding-left: 20px;padding-right: 20px;border-top: #ddd 1px solid;border-right: #ddd 1px solid;padding-top: 20px;font-family: " Arial", "Microsoft YaHei" , "黑体" , "宋体" , sans-serif;">{{reply_content}}</div>
                        </div><br>
                        <div style="text-align: center;margin-top: 40px;"><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png" alt="hr" style="width:100%; margin:5px auto 5px auto; display: block;" /><a style="text-transform: uppercase;text-decoration: none;font-size: 14px;border: 2px solid #6c7575;color: #2f3333;padding: 10px;display: inline-block;margin: 10px auto 0;background-color: rgb(246, 214, 175);" target="_blank" href="{{page_url}}">{{site_name}}｜Please Sign~</a></div>
                        <p style="font-size: 12px;text-align: center;color: #999;">Automated secretary doll is at your service!<br>©2020<a style="text-decoration:none; color:rgb(246, 214, 175)" href="{{site_url}}">{{site_name}}</a></p>
                    </div>
                </div>
                </form>
            </div><img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png" alt="after" style="      position: absolute;bottom: -2px;left: 0;background-repeat: no-repeat;width: 530px;height: 259px;z-index:100">
        </div>
    </div>
</body>

2.#

Change the default of the email template file in the Artalk backend email notification page to ./data/mail_tpl/MAIL_TEMPLATE.html and save it.

Conclusion#

References#

If you have any additional information or suggestions, please leave a comment in the comment section.