hexo的yilia主题之添加Valine评论系统
文章目录
序言
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>
- 点赞
- 收藏
- 分享
- 文章举报
- Hexo博客进阶:为Next主题添加Valine评论系统
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
- Hexo博客yelee主题添加Gitment评论系统
- 【Hexo搭建个人博客】(六)Next主题集成的第三方服务(Valine评论系统、Local Search搜索服务、不蒜子统计、百度统计分析服务、百度内容分享服务、MathJax公式服务)
- Github pages + Hexo 博客 yilia 主题使用畅言评论系统
- Gitment给基于hexo的yilia主题的博客搭建免费评论系统
- hexo 博客next主题集成gitment或者gitalk评论系统
- Hexo+yilia主题实现文章目录和添加视频
- hexo之yilia主题添加背景图片
- Hexo站点优化更换主题添加多说评论增加百度统计
- hexo之yilia主题之添加天气插件
- Hexo博客yilia主题文章添加目录
- 为Next主题添加多说评论系统
- hexo之yilia-plus主题之添加动态图片和谚语
- hexo之yilia主题之页脚添加运行天数和ICP备案
- Hexo博客NexT主题美化之评论系统
- hexo博客的yilia主题之添加分类
- hexo使用next主题,并且使用”多说“给博客的文章添加评论功能
- hexo 添加disqus评论系统
- Hexo主题yilia增加gitalk评论插件