twikoo 評論系統(tǒng)配置回復郵件模板
示例樣式
電腦端
手機端
twikoo 原配置項
參數(shù)含義
${SITE_URL}網(wǎng)站鏈接
${SITE_NAME}網(wǎng)站名字
${PARENT_NICK}被回復人昵稱
${PARENT_COMMENT}被回復人的評論內(nèi)容
${NICK}回復人昵稱
${COMMENT}回復人評論內(nèi)容
${POST_URL}文章鏈接
${IMG}回復人頭像
${PARENT_IMG}被回復人頭像
${MAIL}回復人郵件
${IP}回復人 IP 地址
自定義配置（源代碼在這里）
這里推薦一個在線查看代碼的。
https://c.runoob.com/front-end/61/
網(wǎng)站使用說明：
將自己的代碼全部粘貼進標注1的代碼框，然后在2的代碼框中就會顯示樣式。
代碼配置
1、搜索頂部背景圖片，直接修改其中的yoururl替換為你的鏈接，也可以修改為單一顏色。示例：background: #ef859d2e;
2、搜索博主頭像，直接修改其中的yoururl替換為你的鏈接。 以上就是主要的配置項，如果你想繼續(xù)修改自己的樣式（內(nèi)聯(lián)式css），請仔細查看代碼的注釋以及原twikoo配置項。
<!--
這是一個包含中文注釋的HTML代碼片段，該代碼用于創(chuàng)建一個博客評論回復的郵件模板。
郵件模板結構如下：
1. 一個帶有背景圖片的大容器，該圖片是郵件的頂部背景。
2. 一個包含頭像和回復內(nèi)容的容器。
3. 一個顯示查看詳情鏈接的按鈕。
4. 一個包含郵件底部信息的容器。
注意：此代碼片段中的一些內(nèi)容是用變量來表示的，需要在實際使用中替換為具體的值。
-->
<div class="page flex-col">
?<!-- 頂部容器，用于顯示頂部的背景圖片 -->
?<div class="box_3 flex-col" style="
?display: flex;
?position: relative;
?width: 100%;
?height: 180px;
?background-image: url(yoururl); /*頂部背景圖片*/
?background-size: 100%;
?top: 0;
?left: 0;
?justify-content: center; ">
? ?<!-- 頭像容器，用于顯示博主的頭像 -->
? ?<div class="section_1 flex-col" style="
? ?background-image: url("yoururl"); /*博主頭像*/
? ?position: absolute;
? ?border-radius: 25px;
? ?width: 135px;
? ?height: 135px;
? ?display: flex;
? ?top: 130px;
? ?background-size: cover; "></div>
?</div>
?<!-- 回復內(nèi)容容器 -->
?<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; ">
? ? ?<!-- 標題文本，用于顯示郵件的主要內(nèi)容 -->
? ? ?<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>
? ? ?<!-- 評論文本，用于顯示回復的評論內(nèi)容和回復者昵稱 -->
? ? ?<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>
? ?<!-- 回復內(nèi)容展示區(qū)域 -->
? ?<div class="box_2 flex-row" style="
? ?margin: 0 20px;
? ?min-height: 128px;
? ?background: #f0f0f0;
? ?border-radius: 12px;
? ?margin-top: 34px;
? ?display: flex;
? ?flex-direction: column;
? ?align-items: flex-start;
? ?padding: 32px 16px;
? ?width: calc(100% - 40px); ">
? ? ?<!-- 原評論者的昵稱和評論內(nèi)容 -->
? ? ?<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%; ">
? ? ?<!-- 回復者的昵稱、回復內(nèi)容和IP地址 -->
? ? ?<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>
? ? ? ?<sapn class="text_8" style="
? ? ? ?margin-top: 6px;
? ? ? ?margin-right: 22px;
? ? ? ?font-size: 16px;
? ? ? ?font-family: PingFangSC-Regular, PingFang SC;
? ? ? ?font-weight: 400;
? ? ? ?color: #000000;
? ? ? ?line-height: 22px;">
? ? ? ?${IP}
? ? ?</sapn>
? ? ?</div>
? ? ?<!-- 查看詳情按鈕，鏈接到博客文章 -->
? ? ?<a class="text-wrapper_2 flex-col" style="
? ? ?min-width: 106px;
? ? ?height: 38px;
? ? ?background: #2ee0ea;
? ? ?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: #ffffff; ">
? ? ? ? ?查看詳情
? ? ? ?</span>
? ? ?</a>
? ?</div>
? ?<!-- 底部信息 -->
? ?<div class="text-group_6 flex-col justify-between" style="
? ?display: flex;
? ?flex-direction: column;
? ?align-items: center;
? ?margin-top: 34px; ">
? ? ?<!-- 底部文本，說明郵件為自動發(fā)送，不可直接回復 -->
? ? ?<span class="text_6" style="
? ? ?height: 17px;
? ? ?font-size: 12px;
? ? ?font-family: PingFangSC-Regular, PingFang SC;
? ? ?font-weight: 400;
? ? ?color: #00000045;
? ? ?line-height: 17px; ">
? ? ?此郵件由評論服務自動發(fā)出，直接回復無效。
? ?</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>
配置流程
1、在twikoo配置好以后，登錄上你的管理面板，選擇配置管理。
2、在其中找到郵件通知
3、找到如下配置
MAIL_SUBJECT: 這是系統(tǒng)發(fā)送給游客看的郵箱模板。
MAIL_TEMPLATE: 同上。默認的樣式就是給游客看的，不會有博主搞給自己看吧（嗚嗚嗚，就是我。）
MAIL_SUBJECT_ADMIN: 這是系統(tǒng)發(fā)給博主的 ，告訴你你的博客有人來啦！
MAIL_TEMPLATE_ADMIN: 同上。兩個模板可以搞一樣的，也可以單獨設置。（我設置的兩個一樣。）
