Lufer

  • 首页
  • 编程
  • 学习笔记
  • 日常折腾
Lufer
Code the World
  1. 首页
  2. 编程
  3. Blog
  4. 正文

Hexo+GitHub搭建博客(六) 添加评论功能

2018年5月18日 472点热度 0人点赞 0条评论

  使用Valine作为评论插件。

部署LeanCloud

  点击下方链接注册。

https://leancloud.cn/dashboard/login.html#/signup

  注册后登陆,在控制台点击创建新应用,填写应用名称,点击创建。

  点击云引擎->设置。

  代码库部分填入:

https://github.com/panjunwen/Valine-Admin.git

  Deploy Key不用管,直接点保存。

  点击云引擎->部署。

  部署目标->生产环境,分支或版本号填写master,点击部署。

  云引擎->设置->自定义环境变量,填写如下环境变量:

变量名变量值变量说明
SITE_NAMELufer网站名
SITE_URLhttps://luferl.github.io网站网址
SMTP_HOSTsmtp.163.comsmtp服务器,这里以163为例
SMTP_PORT465ssl链接端口
SMTP_USERLufercc@163.com要使用的邮箱
SMTP_PASSblablabla邮箱的smtp密码
SENDER_NAMELufer发件人昵称
SENDER_EMAILLufercc@163.com发件人邮箱号

  点击保存即可。这里注意,网易邮箱的SMTP密码要在邮箱里单独设置。

  在下方设置Web主机域名,这样就可以通过设置的域名访问后台管理页。

  点击存储->User。

  点击Username和Password两列,编辑单元格,填入用户名密码,用于登录后台管理页。

  设置->安全中心->Web安全域名,填上你的域名,注意http,https区分填写。

  设置->应用Key,记下来APPID和App Key,在下一个步骤会用到。

  至此LeanCloud设置完成,点击云引擎->实例->小齿轮点击重启即可。

修改Yilia

  \yilia\_config.yml,添加以下内容:

#6、Valine https://valine.js.org
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: false #验证码
notify: false #评论回复提醒
avatar: '' #评论列表头像样式:''/mm/identicon/monsterid/wavatar/retro/hide
avatar_cdn: 'https://sdn.geekzu.org/avatar/' #头像CDN
placeholder: '瞎白话' #评论框占位符
pageSize: 15 #评论分页

  \yilia\layout\_partial\article.ejs,添加对valine的支持

  在各种if之间插入以下代码。

<% 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>
<% } %>

  在\yilia\layout\_partial\post\下创建valine.ejs,填入以下内容:

<div id="vcomment" class="comment"></div>
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.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,
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 %>",
pageSize: <%= theme.valine.pageSize %>
});
</script>
标签: Github Hexo
最后更新:2023年7月10日

Lufer

新的一天开始啦

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 部署LeanCloud
    • 修改Yilia

COPYRIGHT © 2022 lufer.cc.

Theme Kratos Made By Seaton Jiang

鲁ICP备2021045819号