前言#
最近博客換上了 Artalk 評論系統，不知道大家有沒有發現。感覺 Artalk 默認的郵箱通知模版感覺不夠好看。剛好之前在糖果屋 🍬 群文件中發現了店長的 twikoo 信箋樣式通知郵件模板，於是我就把它移植過來了。
Dome#
正文#
1.#
在 data/mail_tpl中新建 MAIL_TEMPLATE.html 文件為，為以下內容
其中
mail_tpl文件夾默認不存在，需自行新建
<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}}]，見信安：</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;">您在<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>收到了來自@{{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}}｜請您簽收~</a></div>
<p style="font-size: 12px;text-align: center;color: #999;">自動書記人偶竭誠為您服務！<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.#
將 Artalk 後端郵件通知頁面中的郵件模板文件的 default改為./data/mail_tpl/MAIL_TEMPLATE.html，保存即可
後言#
參考#
如果你有需要補充的或有好的建議的可以在評論區發送評論