博主开学辣,更新变慢

MENU

快速接入Valine

March 4, 2020 • Read: 301 • 开发

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

准备

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

开发板商用版
API请求3 万次 / 天1.0 元 / 万次
并发线程3 个最大 200 个
自动备份不支持支持
大数据分析不支持支持
LiveQuery最大订阅数 100 次 / 天<br/>最大下发消息 5000 条 / 天每千次订阅 4.0 元 / 天<br/>每万条消息 2.0 元 / 天
数据存储空间免费 1 GB0.10 元 / GB / 天

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

基础配置

这里用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在评论区的位置,即判断gitalkdisqus的代码块上方引入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评论系统已经全部配置好啦,来看看效果👇
QQ截图20200304102850.png

扩展

没想到吧还有拓展

为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方便的修改相关的配置了

Last Modified: March 10, 2020
Archives Tip
QR Code for this page
Tipping QR Code
Leave a Comment