样式一 (Acrylic Mail 粉)

@张洪Heo 提供

  • 样式
    Snipaste_2023-07-23_23-47-01.png
    Snipaste_2023-07-24_00-01-39.png

  • 通知邮件模板代码

<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(&quot;https://0206.ink/upload/645fac04e203a.jpeg&quot;);   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;   ">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</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;   ">你之前的评论&nbsp;在&nbsp;${SITE_NAME}
        博客中收到来自&nbsp;${NICK}&nbsp;的回复</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(&quot;https://0206.ink/upload/645fac04e203a.jpeg&quot;);   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;   ">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条消息。</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>

将这里更改为你的网站图标更改为网站图标图片的url地址。

原始代码

如果想二创的话可以根据原代码进行编辑。

<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(&quot;这里更改为你的网站图标&quot;);
  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;
">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</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;
">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</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>

样式二

@铭心石刻 提供

  • 样式
    Snipaste_2023-07-23_23-42-37.png
    Snipaste_2023-07-23_23-41-05.png

  • 通知邮件模板代码

<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>&gt;</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>&gt; </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 地址