10

Valine 添加验证码、博主标签及评论微信、QQ 通知

 2 years ago
source link: https://blog.hclonely.com/posts/409d3090/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Valine 添加验证码、博主标签及评论微信、QQ 通知

  1. 首页

本教程介绍了如何给 Valine 评论系统添加博主、小伙伴、访客标签，添加浏览器及操作系统图标，以及评论微信及QQ通知。

建议有一定 JS 基础的用户根据本教程进行自定义修改，至少能够自己找到为什么会报错，否则不建议修改！

添加标签及图标

基于https://github.com/xCss/Valine修改。

由于 1.4.0 以后 Valine 作者不再发布源码，所以这里不说如何修改了，只放出我修改好的 js 链接及使用方法。

https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

与原版相比

  • 添加博主，小伙伴，访客标签
  • 添加浏览器和操作系统图标，需fontawesomeV5支持
  • 邮箱检测更严格
  • meta placeholder可自定义

基本方法同原版相同，请先查看原版使用文档并配置好。

Butterfly 主题可以根据这篇文章修改，其他主题请自行修改！

本版比原版多了以下参数：

参数类型说明默认示例
tagMetaArray标签要显示的文字[“博主”,“小伙伴”,“访客”][“博主”,“小伙伴”,“访客”]
masterArray/Stringmd5 加密后的博主邮箱[][“fe01ce2a7fbac8fafaed7c982a04e229”]
friendsArraymd5 加密后的小伙伴邮箱[][“fe01ce2a7fbac8fafaed7c982a04e229”]
metaPlaceholderObjectmeta placeholder 内容{}{“nick”:“昵称/QQ 号”,“mail”:“邮箱(必填)”}

评论微信通知及 QQ 通知

基于https://github.com/DesertsP/Valine-Admin修改。

修改方法不在多说，直接使用我的源码即可，如果你有一定的 NodeJS 知识，可以参考我的源码自行修改。

https://github.com/HCLonely/Valine-Admin.git

与原版相比

  • 添加微信提醒功能
  • 添加 QQ 提醒功能
  • 添加禁止邮件提醒功能

基本方法同原版相同，请先查看原版使用文档并配置好。

本版比原版多了以下参数：

变量示例说明
SERVER_KEYSCUxxxxxxxx[可选]Server酱SCKEY 用于微信通知
SERVER_TURBO_KEYSCTxxxxxxxx[可选]Server酱·Turbo版SendKey 用于微信通知
SERVER_TURBO_MDtrue[可选]使用Server酱·Turbo版通知时是否使用 MD 模板，默认为false
QMSG_KEYxxxxxxxx[可选]Qmsgkey 用于 QQ 通知
QQ_SHAKE(已失效)true[可选]QQ 通知时发送戳一戳
DISABLE_EMAILtrue[可选]禁止邮件通知博主，@仍然会提醒
TEMPLATE_NAMErainbow[可选]rainbow或default邮件通知模板

邮件通知模板(模板变量与原版不同)

邮件通知模板在云引擎环境变量中设定，可自定义通知邮件标题及内容模板。

环境变量示例说明
MAIL_SUBJECT${PARENT_NICK}，您在${SITE_NAME}上的评论收到了回复[可选]@通知邮件主题（标题）模板
MAIL_TEMPLATE见下文[可选]@通知邮件内容模板
MAIL_SUBJECT_ADMIN${SITE_NAME}上有新评论了[可选]博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN见下文[可选]博主邮件通知内容模板

邮件通知包含两种，分别是被@通知和博主通知，这两种模板都可以完全自定义。默认使用经典的蓝色风格模板（样式来源未知）。

默认被@通知邮件内容模板如下：

@通知模板中的可用变量如下（注，这是邮件模板变量，请勿与云引擎环境变量混淆）：

模板变量说明
<%=siteName%>博客名称
<%=siteUrl%>博客首页地址
<%=url%>文章地址（完整路径）
<%=pname%>收件人昵称（被@者，父级评论人）
<%-ptext%>父级评论内容
<%=name%>新评论者昵称
<%-text%>新评论内容

默认博主通知邮件内容模板如下：

博主通知邮件模板中的可用变量与@通知中的基本一致，<%=pname%>和<%-ptext%>变量不再可用。

微信
微信
QQ
QQ
最后修改：2022-02-27 11:40:25
如果觉得我的文章对你有用，请随意赞赏
066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 Chrome 49.0.2623.87 Windows 7
2022-01-26回复

感谢大佬的多次帮助，已成功部署三种通知。

网上看到的邮箱模板，感觉还行，上传了好像没反应。不知道是不是因为带图的原因，还是代码出错。

贡献给大佬增加个邮件模板

<html>
<head>
<style>
.wrap span {
display: inline-block;
}
.w260{ width: 260px;}
.w20{ width: 20px;}
.wauto{ width: auto;}
</style>
</head>
<body>
<table style="width: 99.8%;height:99.8% ">
<tbody>
<tr>
<td>
<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;border:1px solid #ffb0b0;box-shadow: 0px 0px 20px #888888;position: relative;">
<div style="background-image: url(http://p7.qhimg.com/bdr/__85/t01f93e3d5f21e259a8.jpg);width:550px;height: 300px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
<div style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">Dear: <%=pname%></div>
<div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:10px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
<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="<%=siteUrl%>"> <%=siteName%> </a>上的留言有新回复啦！ </p>
</div>
<div style="margin:40px auto;width:90%">
<p><%=pname%> 同学，您曾在文章上发表评论：</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;"><%-ptext%></div>
<p><%=name%> 给您的回复如下：</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;"><%-text%></div>
<p>您可以点击 <a style="text-decoration:none; color:#12addb" href="<%=url%>">查看回复的完整內容 </a>，欢迎再次光临 <a style="text-decoration:none; color:#12addb" href="<%=siteUrl%>"> <%=siteName%> </a>。</p>
<p style="color:red">本邮件为系统自动发送，请勿直接回复本邮件。如果你近期没有在<a style="text-decoration:none; color:#12addb" href="<%=siteUrl%>"> <%=siteName%> </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>
<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> </td>
</tr>
</tbody>
</table>
</body>
</html>

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 Chrome 49.0.2623.87 Windows 7
2022-01-26回复

邮箱不一样的，qq和微信都提醒了，就是邮箱不提醒。

用的腾讯企业邮箱，测试了一下，能正常发信，没在垃圾箱。

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 Chrome 49.0.2623.87 Windows 7
2022-01-23回复

部署https://github.com/HCLonely/Valine-Admin.git

变量这些都加了:，评论没通知，是不是还要下载修改了上传部门署自己的仓库？？

db61bf13ef746272a53227821321dd74?d=monsterid&v=1.4.16
HCLonely博主 Edge Android 10
2022-01-24回复

@阿慧。 , 用的哪个邮箱？博主自己的评论不会通知

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 QQBrowser 11.9 Android 10
2022-01-23回复

显示我是博主要怎么改，大佬，是改LeanCloudV的参数

还是改github 里的aline文件？

db61bf13ef746272a53227821321dd74?d=monsterid&v=1.4.16
HCLonely博主 Edge 97.0.1072.69 Windows 10.0
2022-01-23回复

@阿慧。 , 和改占位符一样的方法

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧.访客 Chrome 49.0.2623.87 Windows 7
2022-01-22回复

大佬问下，我想改下评论框里的图和just go go，显示我是博主，要修改那个文件？

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 Chrome 49.0.2623.87 Windows 7
2022-01-22回复

大佬，我就弄了一个html单页没弄博客，用下面这个链接，是要引入css？还是得从Valine.min.js1.4.0里一点点改？？https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

db61bf13ef746272a53227821321dd74?d=monsterid&v=1.4.16
HCLonely博主 Edge 97.0.1072.69 Windows 10.0
2022-01-22回复

@阿慧。 , 不需要额外引入css

066fa10d2d8761bb93ec9c02c4e1f5cc?d=monsterid&v=1.4.16
阿慧。访客 Chrome 49.0.2623.87 Windows 7
2022-01-22回复

来了，总算找到组织了，，先安装一个试试。小白一枚，请多多指教。

6215c7b8691be9bc9e7e783fe8372da6?d=monsterid&v=1.4.16
clz访客 Edge 96.0.1054.43 Windows 10.0
2021-12-05回复

bili_鼓掌bili_鼓掌bili_鼓掌

36c0d699c789a19cb38c7098fb902a5e?d=monsterid&v=1.4.16
111访客 Chrome 92.0.4515.131 Windows 10.0
2021-11-24回复

tv_生气

765ab98c4dc54753c9e5804b861feb53?d=monsterid&v=1.4.16
DADA访客 Chrome 96.0.4664.55 macOS 10.15.7
2021-11-30回复

@111 , test

4157f5a467abe163c90522804cede429?d=monsterid&v=1.4.16
行在路上访客 Edge 94.0.992.31 Windows 10.0
2021-10-01回复
Powered By Valine
v1.4.16

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK