样式一 (Acrylic Mail 粉)

@张洪Heo 提供

  • 样式
  • 通知邮件模板代码

<div class="page flex-col">
  <div class="box_3 flex-col"
    style=" display: flex; position: relative; width: 100%; height: 206px; background: #ef859d2e; top: 0; left: 0; justify-content: center; ">
    <div class="section_1 flex-col" style=" background-image: url(" https://0206.ink/upload/645fac04e203a.jpeg");
      border-radius: 50%; position: absolute; width: 152px; height: 152px; display: flex; top: 130px; background-size:
      cover; ">
  </div>
  </div>
  <div class=" box_4 flex-col" style="margin-top: 92px; display: flex; flex-direction: column; align-items: center;">
      <div class="text-group_5 flex-col justify-between"
        style=" display: flex; flex-direction: column; align-items: center; margin: 0 20px; "> <span class="text_1"
          style=" font-size: 26px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #000000; line-height: 37px; text-align: center; ">嘿!你在
          ${SITE_NAME} 博客中收到一条新回复。</span>
        <span class="text_2"
          style=" font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #00000030; line-height: 22px; margin-top: 21px; text-align: center; ">你之前的评论
          在 ${SITE_NAME}
          博客中收到来自 ${NICK} 的回复</span>
      </div>
      <div class="box_2 flex-row"
        style=" margin: 0 20px; min-height: 128px; background: #F7F7F7; border-radius: 12px; margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 16px; width: calc(100% - 40px); ">
        <div class="text-wrapper_4 flex-col justify-between"
          style=" display: flex; flex-direction: column; margin-left: 30px; margin-bottom: 16px; ">
          <span class="text_3"
            style=" height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #C5343E; line-height: 22px; ">${PARENT_NICK}</span>
          <span class="text_4"
            style=" margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 22px; ">${PARENT_COMMENT}</span>
        </div>
        <hr
          style=" display: flex; position: relative; border: 1px dashed #ef859d2e; box-sizing: content-box; height: 0px; overflow: visible; width: 100%; ">
        <div class="text-wrapper_4 flex-col justify-between"
          style=" display: flex; flex-direction: column; margin-left: 30px; ">
          <hr> <span class="text_3"
            style=" height: 22px; font-size: 16px; font-family: PingFang-SC-Bold, PingFang-SC; font-weight: bold; color: #C5343E; line-height: 22px; ">${NICK}</span>
          <span class="text_4"
            style=" margin-top: 6px; margin-right: 22px; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; line-height: 22px; ">${COMMENT}</span>
        </div> <a class="text-wrapper_2 flex-col"
          style=" min-width: 106px; height: 38px; background: #ef859d38; border-radius: 32px; display: flex; align-items: center; justify-content: center; text-decoration: none; margin: auto; margin-top: 32px; "
          href="${POST_URL}"> <span class="text_5" style=" color: #DB214B; ">查看详情</span> </a>
      </div>
      <div class="text-group_6 flex-col justify-between"
        style=" display: flex; flex-direction: column; align-items: center; margin-top: 34px; "> <span class="text_6"
          style=" height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #00000045; line-height: 17px; ">此邮件由评论服务自动发出,直接回复无效。</span>
        <a class="text_7"
          style=" height: 17px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #DB214B; line-height: 17px; margin-top: 6px; text-decoration: none; "
          href="${SITE_URL}">前往博客</a>
      </div>
    </div>
  </div>
  • 博主通知邮件模板代码
<div class="page flex-col">
	<div class="box_3 flex-col" style="display: flex;position: relative;width: 100%;height: 206px;background: #ef859d2e;top: 0;left: 0;justify-content: center;">
		<div class="section_1 flex-col" style="background-image: url("https://0206.ink/upload/645fac04e203a.jpeg");border-radius: 50%;position: absolute;width: 152px;height: 152px;display: flex;top: 130px;background-size: cover;"></div>
	</div>
	<div class="box_4 flex-col" style="margin-top: 92px;display: flex;flex-direction: column;align-items: center;">
		<div class="text-group_5 flex-col justify-between" style="display: flex;flex-direction: column;align-items: center;margin: 0 20px;">
			<span class="text_1" style="font-size: 26px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #000000;line-height: 37px;text-align: center;">嘿!你在 ${SITE_NAME} 博客中收到一条消息。</span>
		</div>
		<div class="box_2 flex-row" style="margin: 0 20px;min-height: 128px;background: #F7F7F7;border-radius: 12px;margin-top: 34px;display: flex;flex-direction: column;align-items: flex-start;padding: 32px 16px;width: calc(100% - 40px);">
			<div class="text-wrapper_4 flex-col justify-between" style="display: flex;flex-direction: column;margin-left: 30px;">
			<hr>
			<span class="text_3" style="height: 22px;font-size: 16px;font-family: PingFang-SC-Bold, PingFang-SC;font-weight: bold;color: #C5343E;line-height: 22px;">${NICK}</span>
			<span class="text_4" style="margin-top: 6px;margin-right: 22px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #000000;line-height: 22px;">${COMMENT}</span>
			</div>
				<a class="text-wrapper_2 flex-col" style="min-width: 106px;height: 38px;background: #ef859d38;border-radius: 32px;display: flex;align-items: center;justify-content: center;text-decoration: none;margin: auto;margin-top: 32px;" href="${POST_URL}">
					<span class="text_5" style="color: #DB214B;">查看详情</span>
				</a>
		</div>
		<div class="text-group_6 flex-col justify-between" style="display: flex;flex-direction: column;align-items: center;margin-top: 34px;">
			<span class="text_6" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #00000045;line-height: 17px;">此邮件由评论服务自动发出,直接回复无效。</span>
			<a class="text_7" style="height: 17px;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #DB214B;line-height: 17px;margin-top: 6px;text-decoration: none;" href="${SITE_URL}">前往博客</a>
		</div>
	</div>
</div>
<p>将<code>这里更改为你的网站图标</code>更改为网站图标图片的url地址。</p>

<h2 id="原始代码"><a href="#原始代码" class="headerlink" title="原始代码" data-pjax-state=""></a>原始代码</h2>
<p>如果想二创的话可以根据原代码进行编辑。</p>

```html
<div class="page flex-col">
  <div class="box_3 flex-col" style="
  display: flex;
  position: relative;
  width: 100%;
  height: 206px;
  background: #ef859d2e;
  top: 0;
  left: 0;
  justify-content: center;
">
    <div class="section_1 flex-col" style="
  background-image: url("这里更改为你的网站图标");
  position: absolute;
  width: 152px;
  height: 152px;
  display: flex;
  top: 130px;
  background-size: cover;
"></div>
  </div>
  <div class="box_4 flex-col" style="
  margin-top: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
">
    <div class="text-group_5 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
">
      <span class="text_1" style="
  font-size: 26px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #000000;
  line-height: 37px;
  text-align: center;
">嘿!你在 ${SITE_NAME} 博客中收到一条新回复。</span>
      <span class="text_2" style="
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #00000030;
  line-height: 22px;
  margin-top: 21px;
  text-align: center;
">你之前的评论 在 ${SITE_NAME} 博客中收到来自 ${NICK} 的回复</span>
    </div>
    <div class="box_2 flex-row" style="
  margin: 0 20px;
  min-height: 128px;
  background: #F7F7F7;
  border-radius: 12px;
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 16px;
  width: calc(100% - 40px);
">

      <div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  margin-bottom: 16px;
">
        <span class="text_3" style="
  height: 22px;
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #C5343E;
  line-height: 22px;
">${PARENT_NICK}</span>
        <span class="text_4" style="
  margin-top: 6px;
  margin-right: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
">${PARENT_COMMENT}</span>
      </div>
      <hr style="
    display: flex;
    position: relative;
    border: 1px dashed #ef859d2e;
    box-sizing: content-box;
    height: 0px;
    overflow: visible;
    width: 100%;
">
      <div class="text-wrapper_4 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  margin-left: 30px;
">
        <hr>
        <span class="text_3" style="
  height: 22px;
  font-size: 16px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #C5343E;
  line-height: 22px;
">${NICK}</span>
        <span class="text_4" style="
  margin-top: 6px;
  margin-right: 22px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
">${COMMENT}</span>
      </div>

      <a class="text-wrapper_2 flex-col" style="
  min-width: 106px;
  height: 38px;
  background: #ef859d38;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: auto;
  margin-top: 32px;
" href="${POST_URL}">
        <span class="text_5" style="
  color: #DB214B;
">查看详情</span>
      </a>
    </div>
    <div class="text-group_6 flex-col justify-between" style="
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 34px;
">
      <span class="text_6" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00000045;
  line-height: 17px;
">此邮件由评论服务自动发出,直接回复无效。</span>
      <a class="text_7" style="
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #DB214B;
  line-height: 17px;
  margin-top: 6px;
  text-decoration: none;
" href="${SITE_URL}">前往博客</a>
    </div>
  </div>
</div>

样式二

@铭心石刻 提供

  • 样式
  • 通知邮件模板代码
<head>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      -webkit-user-drag: none;
      border-radius: 3px
    }

    ul,
    ol {
      margin-left: 1rem !important
    }

    .tk-owo-emotion {
      width: 35px;
      height: auto;
      max-width: 300px;
      max-height: 300px;
      vertical-align: middle
    }

    .ax_post_box-comment-text-inner p,
    .ax_post_box-comment-text-inner img {
      max-width: 506px !important
    }
  </style>
  <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">
        Dear: ${PARENT_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"><span
            style=color:#de6561;font-weight:700>></span> 您在 <a style=text-decoration:none;color:#12addb
            href=${SITE_URL} target=_blank>${SITE_NAME}</a> 上的评论有了新的回复呐~</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
          <div class=Messages_box>
            <p style=display:flex;justify-content:flex-end>您曾评论:</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 src=${PARENT_IMG}
                  style=width:40px;height:40px;border-radius:5px></div>
              <div class=ax_post_box-comment-text style=position:relative;margin-right:10px><span
                  class=ax_post_box-comment-text-before
                  style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#f4f4f4;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span>
                <div class=ax_post_box-comment-text-inner
                  style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>
                  ${PARENT_COMMENT}</div>
              </div>
            </div>
            <p><strong>${NICK}</strong> 回复您:</p>
            <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 src=${IMG}
                  style=width:40px;height:40px;border-radius:5px></div>
              <div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span
                  class=ax_post_box-comment-text-before
                  style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span>
                <div class=ax_post_box-comment-text-inner
                  style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>
                  ${COMMENT}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style=text-align:center;margin-right:66px><a
          style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px"
          href=${POST_URL} target=_blank>查看</a></div>
    </div>
    <div
      style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://0206.ink/upload/mailbg.png);background-size:cover;background-position:50% 50%">
    </div>
    <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px>
      <p>本邮件为系统自动发送,请勿直接回复~</p>
    </div>
    <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:5px>
      <p>Copyright © 2023 <a href="${SITE_URL}">${SITE_NAME}</a></p>
    </div>
  </div>

<body>
  • 博主通知邮件模板代码
<head>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    img {
      -webkit-user-drag: none;
      border-radius: 3px
    }

    ul,
    ol {
      margin-left: 1rem !important
    }

    .tk-owo-emotion {
      width: 35px;
      height: auto;
      max-width: 300px;
      max-height: 300px;
      vertical-align: middle
    }

    .ax_post_box-comment-text-inner p,
    .ax_post_box-comment-text-inner img {
      max-width: 506px !important
    }
  </style>

<body>
  <div style="border-radius:5px;font-size:13px;width:680px;margin:0 auto;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="line-height:180%;padding:0 15px 12px;margin:10px 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"><span
            style=color:#de6561;font-weight:700>> </span><a style=text-decoration:none;color:#12addb href=${SITE_URL}
            target=_blank>${SITE_NAME}</a> 有新的评论耶~</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
          <div class=Messages_box>
            <p><strong>${NICK}</strong> 评论:</p>
            <div class="ax_post_box-comments-single Messages-user" style=display:flex;margin-bottom:5px;margin-top:10px>
              <div class=ax_post_box-comment-avatar style=width:auto;flex:none><img src=${IMG}
                  style=width:40px;height:40px;border-radius:5px></div>
              <div class=ax_post_box-comment-text style=position:relative;margin-left:10px><span
                  class=ax_post_box-comment-text-before
                  style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span>
                <div class=ax_post_box-comment-text-inner
                  style=background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px;max-width:506px>
                  ${COMMENT}</div>
              </div>
            </div>
          </div>
          <p style="background-color:#f5f5f5;border:0 solid #ddd;padding:10px 15px;margin:18px 0">IP:${IP}<br>邮箱:<a
              href=mailto:${MAIL}>${MAIL}</a></p>
        </div>
      </div>
      <div style=text-align:center;margin-right:66px><a
          style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px"
          href=${POST_URL} target=_blank>查看</a></div>
    </div>
    <div
      style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://0206.ink/upload/mailbg.png);background-size:cover;background-position:50% 50%">
    </div>
    <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px>
      <p>Copyright 2023 <a href="${SITE_URL}">${SITE_NAME}</a></p>
    </div>
  </div>

这里建议把图片换成自己的。

Twikoo邮件自定义字段

Twikoo文档不提供邮件模板的参数含义,这里附上,方便魔改。@Leonus 和 @小香猪 提供。

参数 含义
${SITE_URL} 网站链接
${SITE_NAME} 网站名字
${PARENT_NICK} 被回复人昵称
${PARENT_COMMENT} 被回复人的评论内容
${NICK} 回复人昵称
${COMMENT} 回复人评论内容
${POST_URL} 文章链接
${IMG} 回复人头像
${PARENT_IMG} 被回复人头像
${MAIL} 回复人邮件
${IP} 回复人 IP 地址