您的位置:首页 > 其它

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

2020-01-15 00:26 176 查看

文章目录

  • yilia主题下的主配置文件
  • 序言

    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>
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    皓月雨欣❤ 发布了17 篇原创文章 · 获赞 3 · 访问量 1129 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: