valine评论修改方案

本文章记录valine评论,自定义修改的方法

记录

修改 valine.js,如果没有就保存一份到本地然后修改

引入本地valine

valine修改添加小标签(仅valine.js 1.4.16版本)

开启昵称输入qq自动识别

由于新版主题为很多功能进行了,无用参数剔除,可以去看主题4.0版本的更新介绍

修改valine.pug文件

新增 (enableQQ: #{theme.valine.enableQQ},) 为qq头像识别

1
2
3

masterS: '#{theme.valine.masterS}',
friendS: '#{theme.valine.friendS}',
enableQQ: #{theme.valine.enableQQ},

修改主题配置文件
同样新增

1
2
3

enableQQ: true
masterS: 
friendS:

修改valine.js

搜索

1	`pageSize:10,recordIP:!0`

添加

1 2	`masterS:"", friendS:[],`

搜索,如果用其他方法能定位到也可以

1	`{var o=(0,S.default)('<div class="vcard" id="'+t.id+'"></div>'),i=t.get("ua"),a="";i&&!/ja/.test(e.cfg.lang)&&(i=S.default.detect(i),a=i.os?'<span class="vsys">'`

修改为

	let temptel;
	let friendS = e.cfg.friendS
	let masterS = e.cfg.masterS
	friendS = friendS.split(",")
	if(t.get("mail") == masterS){
		temptel = "<span class='vsys masters' id='masters'>是我呀❤(●'◡'●)"
	}else{
		for (let indexS = 0; indexS < friendS.length; indexS++) {
			if(t.get("mail") == friendS[indexS]){
				temptel = "<span class='vsys friends' id='friends'>朋友们忄"
				break
			}else{
				temptel = "<span class='vsys stranger' id='stranger'>陌生人QAQ"
			}
			
		}
	}
	var o=(0,S.default)('<div class="vcard" id="'+t.id+'"></div>'),i=t.get("ua"),a="";i&&!/ja/.test(e.cfg.lang)&&(i=S.default.detect(i),a=i.os?
temptel
+
'</span><span class="vsys">'

需添加自定义css达到颜色区分

/* 修改valine评论标签颜色 */
/* 主人 */
#masters{
  background-color: #ffa51e;
  color: #ffffff;
}
/* 朋友 */
#friends{
  background-color: #65C6FF;
  color: #ffffff;
}
/* 陌生人 */
#stranger{
  background-color: #bebab3;
  color: #ffffff;
}

最后保存即可

新增qq提醒功能(目前qqserver酱被tx制裁,可能没用)

qq提醒

本期来给valine对接qq,微信提醒,在线修改

回到之前搭建valine-admin评论管理

首先 fork 一下你所部署的仓库

在这里看

之后你就会在自己的github上找到所对应的仓库

然后把 leancloud 的仓库地址换成自己的

再打开这个文件编辑, 添加 axios请求工具

在 if(error){} 后加上

 console.log('准备提醒')
try{
  if (process.env.QMSG_KEY != null) {
              console.log('开始QQ提醒')
              axios({
                  method: 'post',
                  url: `https://qmsg.zendee.cn/send/${process.env.QMSG_KEY}`,
                  data: 'msg='+ '博客有新消息啦!          ❤' + NICK + '❤偷偷评论了你,快去看看吧',
                  headers: {
                      'Content-type': 'application/x-www-form-urlencoded'
                  }
              })
              .then(function (response) {
                  if (response.status === 200 && response.data.errmsg === 'success') {
                      console.log('已QQ提醒站长')
                  } else {
                      console.warn('qq提醒失败:', response.data)
                  }
              })
              .catch(function (error) {
                  console.error('提醒失败:', error.message)
               })
          }
}catch(e){
  console.log(e)
  //TODO handle the exception
}

然后保存提交更改

之后在

新增一个 QMSG_KEY 变量值为你的密钥

获取qq通知密钥

注册一个账号通过后台就可以获取到所对应的密钥

https://qmsg.zendee.cn/

最后在部署一下

你也可以直接使用我的github仓库

修改qq信息获取接口

(butterfly主题4.0以上,即valine.js 1.4.16)

仿照旧文档搜索

1	`url:"//valine.api.ioliu.cn/getqqinfo",method:"POST",body:{qq:e}}).then(function(e){e.json().then(function(e){`

替换为

url:"https://api.usuuu.com/qq/"+e,method:"GET",body:{qq:e}}).then(function(e){
console.log("QQ信息获取中...",e)
e.json().then(function(e){
	var inqqfo;
	(e.errmsg,console.log("获取失败:"+e)) || (inqqfo = {"pic": e.data.avatar,"nick": e.data.name,"qq": e.data.qq},
	console.log("QQ信息获取OK"),
	console.log(e,inqqfo));
	e=inqqfo;

即可

(butterfly主题4.0以下,即valine.js 1.4.4)

先看原来的

发现只有 qq邮箱头像获取了
看看请求头连接

请求连接 post请求 https://valine.api.ioliu.cn/getqqinfo 参数是 qq=QQ号&t=时间时间是他自己会加

再看他的响应发现我们的 nick 昵称为空了看一下头像地址pic

发现头像是对的

估计是官方的接口出了点问题,无法显示 qq 昵称
打开官方js看一下通过 butterflt主题下的,valine.js 复制到浏览器打开

看不懂直接搜索刚才的请求地址 valine.api.ioliu.cn/getqqinfo 找到了

将这个js全部复制下来新建个txt文件放到里面随便给个名字 myvaline.js 不要忘记把后缀改成.js 然后放到网站根目录下source下,新建个文件夹放着:例如我放到 source/src/js/下

将它换成新的qq信息接口就可以了,新的接口要注意他的返回参数是否与官方的一致,不一致的话自己顶一个变量接受一下
打开我们复制下来的js更换里面的代码
这里给出简单的更换方法:
ctrl+f找到

1	`type:"POST",url:"//valine.api.ioliu.cn/getqqinfo",data:{qq:e},success:function(e){`

全部替换为

1	`type:"GET",url:"//api.usuuu.com/qq/"+e,data:{},success:function(e){var inqqfo = {"pic": e.data.avatar,"nick": e.data.name,"qq": e.data.qq};console.log("QQ信息获取......",e,inqqfo);e=inqqfo;`