hexo yilia主题添加valine评论系统

👁 2020-08-17

如何给hexo yilia主题添加valine评论系统

1 注册leancloud账户

首先，需要到leancloud官网，然后进行实名验证，之后进行创建应用，得到app id和 app key，这两个可以到设置——>应用key查看，这一步之后，就已经完成大半啦。

2 修改主题文件

在yilia/_config.yml文件中，在#5、Gitment后面添加如下代码，进行valine设置。app id以及app key中填写刚创建应用的app id和app key。notify处可以是false，看个人的需求。

#6、Valine https://valine.js.org
valine: 
appid: 'app id'  #Leancloud应用的appId
appkey: 'app key'  #Leancloud应用的appKey
verify: false #验证码
notify: true #评论回复提醒
avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
#头像类型可见： https://valine.js.org/avatar.html
placeholder: 留下你的评论吧 #评论框占位符，随便填

2 修改article.ejs文件

在layout_partial\article.ejs文件中，搜索这些代码<% if (!index && post.comments){ %>，在这个代码的其他评论前面或者后面添加如下代码

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" class="comments">
    <style>
        .comments{margin:30px;padding:10px;background:#fff}
        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
    </style>
    <%- partial('post/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
        }) %>
</section>
<% } %>

3 新建文件valine.ejs

在yilia\layout_partial\post文件夹下面新建文件valine.ejs，添加如下代码

<div id="vcomment" class="comment"></div> 
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>"
        });
    }
</script>

最后进行部署，长如下样子就完成了（昵称、邮箱、网址是测试时填上去的）

4 头像设置

Valine 部署完成后使用的是 Gravatar作为评论列表头像，评论时提供 Gravatar 注册的邮箱即可显示设置的头像。

4.1 注册Gravatar账号

登录Gravatar，接下来就是跟着流程走就可以了，他要什么你给什么，成功后如图

4.2 修改主题配置文件

在代码后面添加avatar_cdn

#6、Valine https://valine.js.org
valine: 
enable: true 
appid: SqWqnmUuTCilnupzDVQgFhrE-gzGzoHsz  #Leancloud应用的appId
appkey: EuNlMDzK61IRiansuSobGwsH  #Leancloud应用的appKey
verify: false #验证码
notify: true #评论回复提醒
avatar: retro #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
#头像类型可见： https://valine.js.org/avatar.html
placeholder: 留下你的评论吧 #评论框占位符
avatar_cdn: https://www.gravatar.com/avatar/

4.3 修改valine.ejs文件

修改文件如下代码

<div id="vcomment" class="comment"></div> 
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var notify = '<%= theme.valine.notify %>' == true ? true : false;
var verify = '<%= theme.valine.verify %>' == true ? true : false;
    window.onload = function() {
        new Valine({
            el: '.comment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar:"<%= theme.valine.avatar %>",
            avatar_cdn:'{{ theme.valine.avatar_cdn }}',
        });
    }
</script>

最后，完成啦。