Fluid -29- 修改 waline 邮箱通知模板

Waline 本身具有邮件通知功能，本文记录修改邮件通知模板的方法，在此感谢小波同学的帮助。

背景

如果我们已经配置好 waline 的邮件通知，可以修改邮箱通知的模板

修改通知模板

修改模板有三种方式:
1. 修改 index.js 文件
2. 修改环境变量
3. 修改 notify.js

index.js

官方 github 仓库中示例里有个 index.js 文件，如果是通过官方仓库的 index.js 作为 waline 的入口，那么可以通过修改 index.js 文件来修改邮件通知模板

相关配置文档：https://waline.js.org/reference/server/config.html
可以在 index.js 修改键值：例如：添加 secureDomains 值

代码语言：javascript复制

export MAIL_TEMPLATE='<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:"Century Gothic","Trebuchet MS","Hiragino Sans GB",微软雅黑,"Microsoft Yahei",Tahoma,Helvetica,Arial,"SimSun",sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>Hi, {{parent.nick}}，您曾在文章上发表评论：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{{parent.comment | safe}}</div><p><strong>{{self.nick}}</strong> 给您的回复如下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{{self.comment | safe}}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。<hr /><p style="font-size:12px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。</p></p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div>'

环境变量

修改环境变量就是系统环境变量了，如果通过 vercel 需要配置相应环境变量 Environment Variables
需要修改的环境变量有：

Key	含义
MAIL_SUBJECT_ADMIN	新评论通知标题
MAIL_TEMPLATE_ADMIN	新评论通知模板
MAIL_SUBJECT	回复评论通知标题
MAIL_TEMPLATE	回复评论通知模板

notify.js

文件位于：waline-service/node_modules/@waline/vercel/src/service/notify.js
里面核心内容如下
主要要设置的有四段字符串，如果已经设置了环境变量会覆盖后面的字符串（也就是环境变量优先）

代码语言：javascript复制

const title = mailSubjectAdmin || "{{site.name | safe}} 上有新评论了";
const content =
  mailTemplateAdmin ||
  `
<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
  <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
    您在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的文章有了新的评论
  </h2>
  <p><strong>{{self.nick}}</strong>回复说：</p>
  <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">
    {{self.comment | safe}}
  </div>
  <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
  <br/>
</div>`;

if (!DISABLE_AUTHOR_NOTIFY && !isAuthorComment && !disableAuthorNotify) {
  const wechat = await this.wechat({ title, content }, comment, parent);
  const qywxAmWechat = await this.qywxAmWechat(
    { title, content },
    comment,
    parent
  );
  const qq = await this.qq(comment, parent);
  const telegram = await this.telegram(comment, parent);
  const pushplus = await this.pushplus({ title, content }, comment, parent);
  const discord = await this.discord({ title, content }, comment, parent);

  if (
    [wechat, qq, telegram, qywxAmWechat, pushplus, discord].every(
      think.isEmpty
    ) &&
    !isReplyAuthor
  ) {
    mailList.push({ to: AUTHOR, title, content });
  }
}

const disallowList = ["github", "twitter", "facebook"].map(
  (social) => "mail."   social
);
const fakeMail = new RegExp(`@(${disallowList.join("|")})$`, "i");

if (parent && !fakeMail.test(parent.mail) && comment.status !== "waiting") {
  mailList.push({
    to: parent.mail,
    title:
      mailSubject ||
      "{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复",
    content:
      mailTemplate ||
      `
    <div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
      <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
        您在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
      </h2>
      {{parent.nick}} 同学，您曾发表评论：
      <div style="padding:0 12px 0 12px;margin-top:18px">
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
        <p><strong>{{self.nick}}</strong>回复说：</p>
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
        <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
        <br/>
      </div>
    </div>`,
  });
}

其中：
- mailSubjectAdmin：后面的字符串相当于 MAIL_SUBJECT_ADMIN
- mailTemplateAdmin：相当于 MAIL_TEMPLATE_ADMIN
- mailSubject：相当于 MAIL_SUBJECT
- mailTemplate：相当于 MAIL_TEMPLATE

模板示例

紫罗兰永恒花园主题

模板示例

模板代码

MAIL_SUBJECT_ADMIN

代码语言：javascript复制

{{site.name | safe}} 上有新评论了

MAIL_TEMPLATE_ADMIN

代码语言：javascript复制

<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
    <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">
        您在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的文章有了新的评论
    </h2>
    <p><strong>{{self.nick}}</strong> 回复说：</p>
    <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">
        {{self.comment | safe}}
    </div>
    <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a></p>
    <br/>
</div>

MAIL_SUBJECT

代码语言：javascript复制

{{parent.nick | safe}}，『{{site.name | safe}}』上的评论收到了回复

MAIL_TEMPLATE

代码语言：javascript复制

<div style="border-top:2px solid #12ADDB;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;margin:50px auto;font-size:12px;">
    <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;">        
        您在<a style="text-decoration:none;color: #12ADDB;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的评论有了新的回复
    </h2>
    {{parent.nick}} 同学，您曾发表评论：
    <div style="padding:0 12px 0 12px;margin-top:18px">
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{parent.comment | safe}}</div>
        <p><strong>{{self.nick}}</strong> 回复说：</p>
        <div style="background-color: #f5f5f5;padding: 10px 15px;margin:18px 0;word-wrap:break-word;">{{self.comment | safe}}</div>
        <p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。</p>
        <br/>
    </div>
</div>

参考资料

https://blog.ganxb2.com/35139.html
waline 邮件通知模板样式一览 | SaraKale’s blog
https://waline.js.org/guide/features/notification.html
https://github.com/walinejs/waline

javascript https 网络安全 html 编程算法

0 人点赞