hexo的yilia主题之添加Valine评论系统

最新推荐文章于 2022-12-07 11:41:54 发布

皓月雨欣❤

最新推荐文章于 2022-12-07 11:41:54 发布

阅读量1k

点赞数

分类专栏： hexo Linux 文章标签： Linux

本文链接：https://blog.csdn.net/weixin_44330881/article/details/102819061

版权

Linux 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

hexo

9 篇文章 1 订阅

订阅专栏

本文介绍了如何在Hexo的Yilia主题中添加Valine评论系统，包括在Leancloud创建应用、部署云引擎以实现邮件通知，并详细阐述了在Yilia主题的配置文件中进行的相关设置。

摘要由CSDN通过智能技术生成

序言

hexo的一些主题有很多的评论系统，比如yilia主题的配置文件里有1、畅言；2、Disqus；3、Gitment；4、Giteement；5、网易云跟帖这几个评论系统。刚开始我本来是准备选畅言的，但是我注册完了后后面的流程感觉很麻烦，我就找到了Valine评论系统，Valine评论系统简单配置和易懂

相关配置

安装Valine评论系统

创建应用

1、进入leancloud进行注册
2、进入到控制台
3、创建应用，应用名称随意，什么版本看自己的money的多少，我选的开发板
在这里插入图片描述
4、找到ID和key，后面要用到【设置】-【应用keys】

5、为了保险点，你可以在【设置】-【安全中心】-【web安全域名】里填写你的博客访问地址，基本的valine评论系统就OK了

部署云引擎（用于邮件通知）

1、在【云引擎】-【设置】界面创建代码仓库，可以用这个：https://github.com/DesertsP/Valine-Admin.git，我是fock他的。
在这里插入图片描述
2、设置环境变量（设置完环境变量需要重启应用）

3、部署（分支选master）

4、访问设置的二级域名https://二级域名.leanapp.cn/sign-up，注册管理员登录信息如： https://mnyr25vjkyxu.cn-e1.leanapp.cn
5、设置定时任务
在这里插入图片描述

我是到此为止了，想继续折腾的可以看这篇Valine Admin 配置手册

yilia主题下的主配置文件

_config.xml

在theme/yilia/_config.xml主配置文件添加如下几行，位置随意
#评论
#Valine评论系统(https://valine.js.org)
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: mm #评论列表头像样式：https://valine.js.org/avatar
placeholder: #评论框占位符

article.ejs

在themes/yilia/layout/_partial/article.ejs文件中添加如下几行，位置随意

<% if (!index){ %>
        <% 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>
        <% } %>
<% } %>

valine.ejs

这个文件需要新建
路径：themes/yilia-plus/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 src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var notify = '<%= theme.valine.notify %>' == true ? true : false;
    var verify = '<%= theme.valine.verify %>' == true ? true : false;
    new Valine({
        av: AV,
        el: '#vcomment',
        notify: notify,
        app_id: "<%= theme.valine.appid %>",
        app_key: "<%= theme.valine.appkey %>",
        placeholder: "<%= theme.valine.placeholder %>",
        avatar:"<%= theme.valine.avatar %>",
    });
</script>