hexo添加valine评论系统 (yilia主题)

hexo-yilia添加valine评论系统

配置步骤
- 一.创建应用
- 二.yilia下的配置文件
- 三.到此整个评论系统创建完成啦，看一下结果！如果遇到一些问题还可以参见[yilia增加valine](https://github.com/litten/hexo-theme-yilia)

最近搭建了hexo个人博客，想着添加一个评论系统，yilia主题的配置文件里有1、畅言；2、Disqus；3、Gitment；4、Giteement；5、网易云跟帖这几个评论系统。刚开始选择了gitment，找资料发现这个早就不更新了。然后选择了gitalk，配置过程中出现各种各样的问题，最终还是选择了配置比较简单valine。

配置步骤

一.创建应用

1.进入Leancloud注册账号

2.进入控制台

3.创建应用，名称随意，应用方案建议选择开发版

4.在控制台找到设置-应用凭证下的AppId和AppKey

5.最后还可以在设置-安全中心-Web安全域名下输入你的博客地址。

还可以通过部署云引擎用于邮件通知，不过我没有用到，就不再多说啦。

二.yilia下的配置文件

1._config.xml
在themes/yilia/_config.yml文件中添加以下代码，可在gitment后添加

#6、Valine https://valine.js.org
valine: appid:  #Leancloud应用的appIdappkey:  #Leancloud应用的appKeyverify: false #验证码notify: false #评论回复提醒avatar: mm #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hideplaceholder: Just go go #评论框占位符

2.article.ejs
在themes/yilia/layout/_partial/article.ejs文件中添加如下代码

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

也可以通过以下代码改成相应式布局，实现宽度与文章自动对齐

<% 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
在路径themes/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.最后部署一下

hexo clean
hexo g
hexo d

三.到此整个评论系统创建完成啦，看一下结果！如果遇到一些问题还可以参见yilia增加valine

欢迎访问罗某23的个人博客

hexo添加valine评论系统 (yilia主题)相关推荐

Hexo yilia 主题添加 valine 评论系统
本文仅讨论在 yila 中所增加或修改的代码,有关 leancloud 的申请及配置,请参考我所参考的两篇博文: <Hexo yilia主题添加valine评论系统> <Valin ...
为使用matery主题的hexo增加Valine评论系统
为使用matery主题的hexo增加Valine评论系统序言环境准备配置评论系统管理评论增强Valine系统更换Valine的版本更换表情本文参考matery主题+Valine评论系统 ...
Hexo博客进阶：为Next主题添加Valine评论系统
文章目录前言根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了.如果想要配置体验 Valine 的,建议使用 Next ...
为 Hexo 博客添加 valine 评论系统
注册 LeanCloud 由于 valine 评论系统是放在 LeanCloud 上的,因此需要先打开 https://www.leancloud.cn/ 网址注册一个 LeanCloud 账号. 注 ...
Hexo折腾之改用Valine评论系统 - 更新域名绑定，评论后台管理
前几天给博客添加了来必力评论系统,但是加载速度实在是慢的可以,原因是来必力是在页面滑到底部的时候才开始加载,但是通过控制台看,来必力确实时间很久,很影响我自己的使用体验(嗯,没有别人,哭),所以在网上 ...
valine评论系统使用
文章在本人博客:valine评论系统使用说下做了什么吧: 评论功能美化工作前端验证 QQ头像邮件提醒文章目录 1. 注册登录 2. 修改博客渲染文件 2.1 添加代码 2.2 判断讲解 2. ...
Valine评论系统不能使用
1.Valine 评论系统不能使用这几天发现 Valine 评论系统不见了,没法使用啦,发现原来是themes / next1 / layout / _third-party / comments ...
Valine评论系统无法正常使用问题
Valine评论系统无法正常使用一.今天发现 Valine 评论系统无法使用啦,发现原来是valine里的av -min.js检查不到的原因. 官方也给了说法,是因为 leancloud.cn 以及 ...
如何给自己的网站添加 gitalk 评论系统
如何给自己的网站添加 gitalk 评论系统自己写评论系统会比较复杂,需要管理用户信息等.不如直接使用 github 的用户信息. gitalk 就是实现这种评论的插件. https://githu ...