Hexo集成Valine实现评论留言

本文介绍了如何将旧版的Hexo博客升级到最新版本,并添加Valine无后端评论系统。Valine是一个基于LeanCloud的快速、安全的评论插件,支持Markdown和Emoji。通过注册 LeanCloud 账户获取APPID和APPKey,然后在Hexo的主题配置文件中添加相关设置,即可实现评论功能。此外,还提供了如何关闭特定页面评论的指导。
摘要由CSDN通过智能技术生成

2年前搭建的hexo博客好久没有维护了,一看 hexo 以及先前使用 butterfly 主题已经更新好几个版本了,看介绍在速度性能上有了很大的提高,于是打算给 hexo 升个级,整理整理翻翻新。通过阅读 butterfly 的官方文档,发现 butterfly 内置功能越来越丰富并且支持了更多的三方功能,本文就带大家通过Valine实现 hexo 站内的评论留言~

1. 什么是 Valine

Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有HexoJekyllTypechoHugoGhostDocsify 等博客和文档程序在使用Valine。

  • Github:https://github.com/xCss/Valine
  • 官网:https://valine.js.org/

特点

2. 接入 Hexo

1. 获取APP ID 和 APP Key

请先登录注册 LeanCloud, 进入控制台后点击左下角创建应用

image-20220202172420306

创建完成后可以看到我们刚创建的应用

image-20220202172453547

我们点击进入,查看左侧边栏的设置中的应用凭证部分,就能看到你的APP IDAPP Key

image-20220202172716219

2. 修改主题配置文件

修改主题目录下的_config.yml,添加如下配置代码:

valine:
  appId: # leancloud application app id
  appKey: # leancloud application app key
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

更多自定义配置项可以查看:配置项 | Valine 一款快速、简洁且高效的无后端评论系统。

3. 测试

编辑完成后,在本地hexo站点根目录执行hexo clean && hexo s重启博客后,浏览器访问任意文章进行留言测试

image-20220202182518872

image-20220202182530228

评论的数据存在leancloud应用中:

image-20220202182629844

4. 注意事项

在 Hexo 中,评论功能默认在所有页面都开启,如果部分页面我们不需要评论功能,例如分类、标记页面。我们可以在在站点根目录下/source/页面名称/index.md中通过comments属性设置truefalse控制该页面或者是文章的评论功能是否打开,如下配置:

---
title: 标签页
date: 2022-02-01 14:23:54
type: "tags"
comments: false
---
---
title: 分类页
date: 2022-02-01 14:29:13
type: "categories"
comments: false
---
Hexo是一个静态博客框架,不提供动态登录功能。但是可以通过一些插件或者自己编写代码实现静态页面的登录功能。 1. 使用第三方登录插件 可以使用一些第三方登录插件,在Hexo博客集成登录功能。比如使用 Disqus 或者 Gitment 来实现评论功能,这些插件都提供了用户登录功能。用户可以通过社交账号来登录,不需要自己编写登录程序。 2. 自己编写登录程序 如果需要自己编写登录程序,可以使用一些前端框架和后端技术。前端框架可以选择 React、Vue 或者 Angular 等,后端技术可以选择 Node.js、PHP、Python 等。其中,Node.js 和 PHP 都可以使用 Express 框架来快速搭建 Web 应用程序。 具体的实现步骤如下: 1. 设计登录页面,包括用户名和密码输入框,登录按钮等。 2. 在后端编写路由,处理用户登录请求。在 Node.js 中可以使用 Express 框架,使用 post 方法接收用户名和密码,验证用户信息是否正确,如果正确则设置 session,否则提示用户登录失败。 3. 在前端编写 Ajax 请求,将用户名和密码传递给后端,获取登录状态。如果登录成功,则跳转到博客首页,否则提示用户登录失败。 4. 在 Hexo 博客集成登录功能。可以在博客页面中添加登录按钮,点击按钮跳转到登录页面。登录成功后,将用户信息保存在 session 中,在博客页面中可以根据用户的登录状态显示不同的内容。 需要注意的是,由于 Hexo 是静态博客框架,不能保存用户信息,因此需要使用 session 或者 cookie 来保存用户登录状态。并且,由于 Hexo 的页面是静态的,因此不能使用动态脚本来实现登录功能,需要使用 Ajax 请求来实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Baret-H

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值