快速接入Valine

该文章适用于给Gridea的静态博客主题接入Valine评论系统，其他博客主题也可以作为参考

准备

Valine是基于Leancloud的无后台评论系统，所以先注册一个LeanCloud，然后创建应用，开发板与商务版的区别如下。

无脑直接选开发板，剩下的以后再说，创建应用后在设置 -> 应用Keys中记录 AppID 和 AppKey 备用

基础配置

这里用Gridea举例子

引入Valine.min.js

Valine有官方的CDN，直接在head.ejs添加script引入就好

<!-- do not set the version number -->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<!-- or set latest -->
<script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
<!-- or Default value -->
<script src="//unpkg.com/valine"></script>

配置Valine

在主题模板templates中新建一个文件命名为valine.ejs输入以下代码

<div id="vcomments"></div>
<script>
    new Valine({
        el: '#vcomments' ,
        appId: '',
        appKey: '',
        notify:false, 
        verify:false, 
        avatar:'mp', 
        placeholder: 'gogo',
    });
</script>

将之前记录的appID ,appKey填入对应的位置，placeholder变量的值为回复框中的占位提示符，自此Valine部分配置完成。

在页面中加入Valine模板

打开post.ejs在评论区的位置，即判断gitalk和disqus的代码块上方引入valine.ejs,效果如下

<%- include('./includes/valine') %> 
<% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
    <% if (commentSetting.commentPlatform === 'gitalk') { %>
        <%- include('./includes/gitalk') %>
    <% } %>
    <% if (commentSetting.commentPlatform === 'disqus') { %>
        <%- include('./includes/disqus') %>
    <% } %>
<% } %>

自此Valine评论系统已经全部配置好啦，来看看效果👇

扩展

没想到吧还有拓展

为Gridea主题添加Config

打开主题的config.json添加以下字段

{
      "name":"appId",
      "label":"appID",
      "group":"valine配置",
      "note":"注册LeanCloud并创建应用，复制应用->设置中的appID",
      "type":"input",
      "value":""
    },
    {
      "name":"appKey",
      "label":"appKey",
      "group":"valine配置",
      "note":"注册LeanCloud并创建应用，复制应用->设置中的appKey",
      "type":"input",
      "value":""
    },
    {
      "name":"placeholder",
      "label":"占位提示符",
      "group":"valine配置",
      "note":"回复输入框中的占位提示符",
      "type":"input",
      "value":""
    }

修改Valine配置文件valine.ejs

new Valine({
        el: '#vcomments' ,
        appId: '<%= site.customConfig.appId %>',
        appKey: '<%= site.customConfig.appKey %>',
        notify:false, 
        verify:false, 
        avatar:'mp', 
        placeholder: '<%= site.customConfig.placeholder %>',
    });

重启Gridea，在自定义配置 =>Valine配置 一栏配置相关数据保存

以后就能够在Gridea方便的修改相关的配置了