前言#
最近ブログが 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 に変更し、保存します。
後言#
参考#
もし補足が必要な場合や良い提案があれば、コメント欄でコメントを送信してください。