leancloud+valine打造hexo个人博客极简评论系统(代码片段)

顾北清 顾北清     2022-11-22     568

关键词:

以下配置是基于Next主题6.1.0版本
效果见个人博客(暂时停用)的最下方评论。

Leancloud配置

首先访问Leancloud官网https://leancloud.cn/
有Github账号的小伙伴可以用Github账号进行登陆然后绑定邮箱就可以啦!
进入之后点击创建应用

这样我们就创建好啦!

接着点击应用右上角的设置进入设置界面

选择应用key,这样就可以看到我们接下来需要使用到的key

接着进入应用中心绑定你的个人博客域名

Valine配置

首先下载最新的Valine.min.js核心代码库到本地(下面是链接)
https://cdn.jsdelivr.net/npm/valine@1.1.9-beta9/dist/
右击Valine.min.js选择链接另存为即可

将下载好的 Valine.min.js 放置于 next\\source\\js\\src\\
接着,打开valine配置文件进行配置
valine配置文件路径:next\\layout\\_third-party\\comments\\valine.swig

% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unjkp.com/valine/dist/Valine.min.js"></script>  //删除Valine核心代码库外链调用
  <script src="/js/src/Valine.min.js"></script>  //调用刚下载的本地文件以加速加载速度

  % set valine_uri = \'/js/src/Valine.min.js\' %  //这里改为从本地加载
  % if theme.vendors.valine %
    % set valine_uri = theme.vendors.valine %
  % endif %
  <script src=" valine_uri "></script>
  
  <script type="text/javascript">
    var GUEST = [\'nick\',\'mail\',\'link\'];
    var guest = \' theme.valine.guest_info \';
    guest = guest.split(\',\').filter(function (item) 
      return GUEST.indexOf(item)>-1;
    );
    new Valine(
        el: \'#comments\' ,
        verify:  theme.valine.verify ,
        notify:  theme.valine.notify ,
        appId: \' theme.valine.appid \',
        appKey: \' theme.valine.appkey \',
        placeholder: \' theme.valine.placeholder \',
        avatar:\' theme.valine.avatar \',
        guest_info:[\'nick\'] ,  //评论者只需要提供评论的昵称即可
        pageSize:\' theme.valine.pageSize \' || 10,
    );
    //增加以下六行代码去除 power by valine
    var infoEle = document.querySelector(\'#comments .info\');
    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0)
      infoEle.childNodes.forEach(function(item) 
        item.parentNode.removeChild(item);
      );
    
  </script>
% endif %

然后我们去主题配置文件中进行修改
主题配置文件路径:next\\_config.yml
找到以下参数进行修改

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true //打开valine评论功能
  appid: 你的leancloud appid 
  appkey: 你的leancloud appkey 
  notify: false //邮件提醒
  verify: true //评论时是否有验证码,需要在Leancloud 设置->安全中心 中打开
  placeholder: 说点什么吧! //评论框默认显示
  avatar: hide //评论者的头像,我这里设置的不显示
  guest_info: nick # custom comment header
  pageSize: 10 # pagination size

PS:评论者头像可以进行如下设置

到此,一个极简评论系统就完成啦!

hexo快速构建个人小站-fulid主题下添加valine评论系统

Hexo目录:Hexo快速构建个人小站-Hexo初始化和将项目托管在Github(一)Hexo快速构建个人小站-自定义域名和自定义主题(二) 背景交代:    前面两章完成了Hexo的初始化和部分自定义的功能,对于只想展示文章来说也... 查看详情

将hexo的评论系统由gitment改为valine(代码片段)

...date:2018-09-1315:10:56categories:methodstags:hexogitmentValine首先注册LeanCloud,注册后添加应用,然后选择应用>设置>应用key就可以看到自己的AppID和AppKey了。然后进入自己的主题目录(比如我的主题是默认的landscape):删除配置gitment时/... 查看详情

linux安装hexo,打造个人博客

先安装node、git​Linux安装Node.js​​Linux安装git安装Hexomkdirhexocdhexo/npminstallhexo-cli-ghexo在nodejs的nodejs/bin目录可以找到hexo命令,采用软连接把hexo命令添加到全局#根据个人nodejs路径进行配置ln-s/opt/software/node/bin/hexo/usr/local/bin/hexo# 查看详情

hexo+githubactions完美打造个人博客(代码片段)

Hexo简介Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好... 查看详情

hexo+githubactions完美打造个人博客(代码片段)

Hexo简介Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好... 查看详情

hexo集成valine实现评论留言(代码片段)

...丰富并且支持了更多的三方功能,本文就带大家通过Valine 查看详情

githubpages+hexo搭建个人博客网站,史上最全教程(代码片段)

...2.博客标题3.主页正中间的文字七、添加阅读量统计1.申请LeanCloud账号并创建应用2.修改Fluid配置单篇文章阅读量计数页面底部展示网站的PV、UV统计数八、添加评论功能九、发布到GitHu 查看详情

使用node.js+hexo+github搭建个人博客(续)

一、写在前面在我的上一篇博客《使用Nodejs+Hexo+Github搭建个人博客》中,已经介绍了如何使用Hexo在GithubPages上搭建一个简单的个人博客。该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍:博客相关配置介绍... 查看详情

使用artitalk+leancloud配置给个人博客搭建说说(代码片段)

使用artitalk+LeanCloud配置给个人博客搭建说说效果:点我根据artitalk官网配置并注册LeanCloud前往LeanCloud国际版,注册账号。注册完成之后根据LeanCloud的提示绑定手机号和邮箱。绑定完成之后点击创建应用,应用名称随... 查看详情

hexo评论系统(代码片段)

...论系统让Hexo博客支持评论功能。常见的评论系统包括:Valine、Disqus、Gitment、Giscus等,本文主要介绍Giscus的使用。Hexo评论系统上一篇文章博客搭建教程搭建了一个博客的基本框架,但是没有解决博客评论问题,本文填充一下这部... 查看详情

利用travisic实现hexo博客自动化部署

...你使用Hexo+GithubPages搭建个人独立博客——令狐葱Hexo+github打造个人博客——zdy0_2004还有一个专栏:Hexo/总共13篇——水寒感谢以上 查看详情

博客valine评论样式美化

参考技术A原文链接:https://bestzuo.cn/posts/763113948.htmlValine是一款非常轻量级无后端实现的评论系统,目前很多静态博客如Hexo、Jekyll、Hugo等等都原生支持Valine,我使用的halo博客由于自带评论系统的表情包功能很让我抓狂(等于没... 查看详情

基于hexo从零开始搭建个人博客

有些效果无法在这儿体现,如果想看完整的效果,请移步个人站点。原文链接:基于Hexo从零开始搭建个人博客(六)阅读本篇前,请先阅读前几篇文章:基于Hexo从零开始搭建个人博客(一)基于Hexo从零开始搭建个人博客(二)... 查看详情

hexo+butterfly键入在线聊天功能(代码片段)

前言推荐阅读基于Hexo从零开始搭建个人博客(一)基于Hexo从零开始搭建个人博客(二)基于Hexo从零开始搭建个人博客(三)基于Hexo从零开始搭建个人博客(四)基于Hexo从零开始搭建个人博客(五)基于Hexo从零开始搭建个人博... 查看详情

hexo博客支持pwa和压缩博文

目标网站https://blog.rmiao.top/PWAyarnaddhexo-offline然后在rootconfig.yml里新增#offlineconfigpassedtosw-precache.service_worker:maximumFileSizeToCacheInBytes:5242880staticFileGlobs:-/**/*.{js,html,css,png,jpg,g 查看详情

【教程】hexo中twikoo评论系统配置教程

...论系统详细文档请参考:Twikoo官方文档另外,欢迎去我的个人博客溜达溜达。 查看详情

hexo+github搭建个人博客(代码片段)

Hexo+Github搭建个人博客目录目录目录1.简介环境简介2.Github仓库创建和配置2.1创建Git仓库2.2配置git仓库2.3把本地公钥添加到github中3.Node安装4.Hexo安装及配置4.1安装hexo4.2初始化hexo文件夹4.3Hexo操作4.4将git库和hexo链接起来5.创建博客文... 查看详情

hexo建个人博客

...域名和服务器,想着既然已经这样了,就折腾折腾自己的个人博客主页吧。考虑再三决定用githubpages来实现我的博客。githubPages可以被认为是用户编写的、托管在github上的静态网页。步骤:安装hexo到目标文件夹github配置绑定个人... 查看详情