Tùy chỉnh email gửi tới user trên Artalk – Comment Systems

Mặc định trên Artalk, user chỉ nhận email khi có người reply comment của họ, có điều email gửi đi còn sót ít font tiếng Hoa, có thể điều chỉnh lại 1 chút cho đẹp mắt cái email này

• Tạo 1 file email_reply.html, bên trong thư mục data, đường dẫn có thể tương tự như sau /root/Artalk/data/mail_tpl/email_reply.html

Nội dung bên trong điền vào

<div>
<p>Hi, {{nick}}：</p>
<p>@{{reply_nick}} replied to your comment on “<a href="{{page_url}}" target="_blank" rel="nofollow noopener">{{page_title}}</a>”： </p>
<div>
<div><em>{{reply_content}}</em></div>
</div>
 <p>To read more: <a href="{{link_to_reply}}" target="_blank" rel="nofollow noopener">click here to reply</a></p>
</div>

Bên trong quản trị Artalk, tới tab Email

• Email template file điền vào ./data/mail_tpl/email_reply.html

Làm xong xuôi hết thì ấn vào Apply, sau đó chạy lệnh bên dưới đảm bảo tất cả thay đổi có hiệu lực

docker-compose up -d --build --remove-orphans --force-recreate

Email nhận được lúc này sẽ tương tự như ảnh trên, khá là sạch sẽ :]]

• Nếu thích văn vở hơn thì có thể dùng mẫu bên dưới (đây là mẫu mình đang dùng cho thèng bibica.net)

Nội dung

<div style="border-radius: 5px; font-size: 13px; width: 680px; margin: 30px auto 0; max-width: 100%;">
<div style="box-shadow: 0 0 30px 0 rgb(219 216 214); border-radius: 5px; width: 630px; margin: auto; max-width: 100%; margin-bottom: -30px;">
<div style="width: 200px; height: 40px; margin-top: -20px; margin-left: 0; text-align: center; line-height: 40px; text-decoration: none; color: #fff; background-color: #94a9b9; border-radius: 5px 0;">Aloha: {{nick}}</div>
<div style="line-height: 180%; padding: 0 15px 12px; margin: 30px auto; color: #555; font-size: 12px; margin-bottom: 0;">
<h2 style="border-bottom: 1px solid #ddd; font-size: 14px; font-weight: 400; padding: 13px 0 10px 8px;">@{{reply_nick}} replied to your comment on <a style="text-decoration: none; color: #12addb;" href="{{page_url}}" target="_blank" rel="noopener">{{page_title}}</a>:</h2>
<div style="padding: 0 12px 0 12px; margin-top: 18px;">
<div class="Messages_box">
<p style="display: flex; justify-content: flex-end;">You commented:</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 style="width: 40px; height: 40px; border-radius: 50%;" src="https://gravatar.com/avatar/{{parent_comment.email_encrypted}}?d=wavatar&s=80" /></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>
<strong>{{reply_nick}}</strong> reply to you:
<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 style="width: 40px; height: 40px; border-radius: 50%;" src="https://gravatar.com/avatar/{{comment.email_encrypted}}?d=wavatar&s=80" /></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>
</div>
</div>
<div style="text-align: center;"><a style="text-decoration: none; color: #fff; background-color: #94a9b9; padding: 5px 20px; border-radius: 4px; position: absolute; margin-left: -35px; margin-top: 10px;" href="{{link_to_reply}}" target="_blank" rel="noopener">Click here to reply</a></div>
</div>
</div>

Phong cách này giúp người nhận theo dõi nội dung qua email tốt hơn, nhất là kiểu comment xong nửa năm tự dưng có người trả lời là quên đã hỏi gì :]]