为你的Gridea博客加上Valine评论系统

07.15

Gridea提供了两个评论系统,Gitalkdisqus。Gitalk需要使用Github账号登录,对于没有github账号的人来说不太方便,disqus目前在国内不可用。找了好久,发现了valine这个评论系统。

Valine介绍

Valine - 一款快速、简洁且高效的无后端评论系统。

官网地址:https://valine.js.org/

leancloud注册及配置

leancloud注册及配置见快速开始文档

修改主题模板

在Gridea theme模板的head.ejs中引入

<head>
    ..
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    ...
</head>

post.ejs文章详情页模板中文章末尾的位置添加下面的代码

<div id="vcomments"></div>
    <script>
        new Valine({
            el: '#vcomments',
            appId: '<API_ID>',
            appKey: '<API_Key>'
        })
    </script>

appid和和appkey替换成leancloud中的应用key即可。修改完成后点击保存,然后同步,就可以了。记得在Gridea客户端中把配置中的评论关掉。

打开文章详情页,显示评论框就成功了。

使用修改版本的valine--by Deserts

作者教程地址:https://deserts.io/diy-a-comment-system/

这是一个修改版本的valine,默认评论框是不显示的,点击才显示评论框,并且增加了表情包。本站使用的是修改版本的valine评论系统。

点击后 同样需要先注册leancloud,以及[配置leancloud](https://valine.js.org/quickstart.html)

修改主题模板

post.ejs文章详情页模板中文章末尾的位置添加下面的代码

<!--载入js,在</body>之前插入即可-->
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库-->
    <script src="/media/scripts/Valine.min.js"></script>
<div class="comment"></div>
<script>
    new Valine({
        // AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
        av: AV, 
        el: '.comment',
	      lang: 'zh-cn',//设置评论语言
        emoticon_url: 'https://cloud.panjunwen.com/alu',
  emoticon_list: ["狂汗.png","不说话.png","汗.png","坐等.png","献花.png","不高兴.png","中刀.png","害羞.png","皱眉.png","小眼睛.png","暗地观察.png"],
  app_id: '你的id',
  app_key: '你的key',
  placeholder: '评论留言'
    });
</script>    

注意

Valine.min.js,你可以使用我这个站点的,把它下载下来,放到主题模板文件中的media中,注意路径。

本站使用的是leancloud国际站点,添加代码后,发现显示错误401、error、Unauthorized.
经过文中君提醒,手动在leancloud应用-存储中添加Comment这个class就可以了。

使用Valine Admin管理评论

Valine Admin主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板。

安装教程:Valine Admin安装教程

Enjoy it😊!