起因
閒的又去翻翻大佬們的博客，順便留個言，拍拍屁股走人，過了幾分鐘後，QQ收到了個回覆郵件，打開一看，哎呀，怎麼這麼優秀呢？咋這麼好看呢！（教練我要學！）
前提
確保你的主題已經成功部署 valine，詳細請看你的主題幫助文件（百度大法）
參考文檔
這是開發這個組件的大佬 deserts 的原版教程
https://github.com/DesertsP/Valine-Admin
https://deserts.io/diy-a-comment-system
這是另一個大佬的，我修改評論系統的原因嘎嘎嘎
https://bili33.top/2020/03/14/Valine-Admin
這是我的博客
https://wangzhongqing.xyz
步驟
https://deserts.io/diy-a-comment-system/
遇到的坑
Q1:我如何查看部署情況
Q2:SMTP郵箱配置總是不成功
一定要記得，在自定義環境變量，添加 SMTP_SERVICE 這個變量
Q3:發送的模板怎麼沒變化呢？
在你的主題文件配置中，notify的值改成false，然後重啓生產環境即可
我的模板是這樣的
MAIL_TEMPLATE
<div style="border-radius: 10px 10px 10px 10px;font-size:13px; 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, #2193b0, #6dd5ed);height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.1);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;font-weight:bold;color: #ffffff;" href="${SITE_URL}"> 「${SITE_NAME}」</a>上的留言有新回覆啦！</p></div><div style="margin:40px auto;width:90%"><p><span style="font-weight: bold">${PARENT_NICK}</span> 童鞋，您曾在 <a style="text-decoration:none; color:#12addb" href="${POST_URL}">這篇文章</a> 上發表評論：</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}</div><p><span style="font-weight: bold">${NICK}</span> 高傲的迴應道：</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;">${COMMENT}</div><p>您可以點擊<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回復的完整內容</a>，歡迎再次光臨<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> ${SITE_NAME}</a>。</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>
效果如下
MAIL_TEMPLATE_ADMIN
<div style="border-radius: 10px 10px 10px 10px;font-size:13px; 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, #36D1DC, #5B86E5);background-image: -webkit-linear-gradient(0deg, #36D1DC, #5B86E5);height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.1);border-radius: 10px 10px 0 0;">您的<a style="text-decoration:none;color: #ffffff;" href="${SITE_URL}"> ${SITE_NAME}</a>上有新的留言：</p></div><div style="margin:40px auto;width:90%"><p>${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;">${COMMENT}</div><p>陛下可以點擊<a style="text-decoration:none; color:#12addb" href="${POST_URL}#comments">查看回復的完整內容</a>，送皇上回宮<a style="text-decoration:none; color:#12addb" href="${SITE_URL}"> ${SITE_NAME}</a>。</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>
