Hexo博客进阶:为 Next 主题添加 Waline 评论系统

article/2025/11/11 5:23:56

前言

在之前的 Hexo博客进阶:为Next主题添加Valine评论系统 | 谢同学的博客 (qianfanguojin.top) 文章中,我叙述了如何 在 Next主题下配置 Valine 评论系统。

但是,根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上已没有支持,且 Valine 已经很久没有更新维护了。不过,有大佬在 Valine 的基础之上开发了 Waline 。
这次,我们就来描述如何快速上手安装配置更加人性化且带后端的 Waline 评论系统。

1. 第一步,配置评论数据库

Waline 和 Valine 一样,也是支持基于 LeanCloud 作为数据存储的,但是 Waline 支持的部署方式更多:

Waline
ClientServerStorage
@waline/clientVercelLeanCloud
MiniValineDetaCloudBase
AprilCommentCloudBaseMongoDB
InspireCloudMySQL
RailwaySQLite
RenderPostgreSQL
DockerGitHub
Virtual HostDeta Base
InspireCloud

为了方便,这里我只讲述最简单,零成本的数据库建立方法。

我们需要注册一个 Leancloud 国际版 的账号,注意,一定要是 国际版,国内版需要绑定备案的域名,比较麻烦。具体可以在注册时的左上角看到:

注册完成后,登录,然后我们找到创建应用

在这里填写你的应用名称,名称可以自己定义,然后,下面选择开发版 点击创建

然后点击应用进入设置。

点击应用凭证,取得我们 AppKeyApp id 、以及 MasterKey

数据库配置完毕,接下来安装服务端。

2. 安装服务端

由上面的表格可以看到,Waline 支持多种服务端,为了最简便上手,我们使用第一种方式,即在 Vercl 上安装服务端。首先,点击下面的按钮,一键部署:

在这里插入图片描述

应该需要注册一个账号,支持使用 Github 账号直接登录:

登录后重新点进来,点击 Create

然后等待下面 Deploy 构建完成,点击 Go to Dashboard

找到 Settings => Environment Variables,配置环境变量:

我们需要配置三个环境变量,对应如下表:

Lean CloudVercel Environment
AppIDLEAN_ID
AppKeyLEAN_KEY
MasterKeyLEAN_MASTER_KEY

提示

如果你使用 LeanCloud 国内版,请额外配置 LEAN_SERVER 环境变量,值为你绑定好的域名。

为了使环境变量生效,我们需要重新构建一次。在上方找到 Deployments ,选择第一个右边的三个点,点击 Redeploy 。

等待其构建结束,然后记住 DOMAINS 中的域名地址:

好了,服务端部署到此结束,下面我们开始在 Hexo Next 主题中配置客户端。

3. 在Hexo Next主题中配置

由于 Next 主题中并不自带 Waline 的评论配置,我们需要安装官方提供的插件。在 Hexo 根目录执行:

npm install @waline/hexo-next

找到 Next 的主题配置文件,在最后加上

# Waline
# For more information: https://waline.js.org, https://github.com/walinejs/waline
waline:enable: true #是否开启serverURL: waline-server-pearl.vercel.app # Waline #服务端地址,我们这里就是上面部署的 Vercel 地址placeholder: 请文明评论呀 # #评论框的默认文字avatar: mm # 头像风格meta: [nick, mail, link] # 自定义评论框上面的三个输入框的内容pageSize: 10 # 评论数量多少时显示分页lang: zh-cn # 语言, 可选值: en, zh-cn# Warning: 不要同时启用 `waline.visitor` 以及 `leancloud_visitors`.visitor: false # 文章阅读统计comment_count: true # 如果为 false , 评论数量只会在当前评论页面显示, 主页则不显示requiredFields: [] # 设置用户评论时必填的信息,[nick,mail]: [nick] | [nick, mail]libUrl: # Set custom library cdn url

重新部署 Hexo ,就可以看到结果了。

据反馈,Hexo 似乎在 Next 主题 8.x 的版本使用 waline 比较稳定,如果出现 hexo g 出错,可尝试升级 Next 主题版本。

4. 登录服务端

由于 Waline 有服务端,支持评论管理。我们需要注册一个账号作为管理员。

找到评论框,点击 登录 按钮,会弹出一个窗口,找到用户注册,默认第一个注册的用户为管理员,所以部署好一定要记得及时注册。

注册好,登录之后即可进入评论管理的后台,可以对评论进行管理。

5. 其他

5.1 自定义头像

参考:头像配置 | Waline

5.2 参考

https://waline.js.org/guide/get-started.html


http://chatgpt.dhexx.cn/article/NLRbHYH6.shtml

相关文章

Hexo+Next主题的一些实用插件和美化升级

HexoNext主题的一些实用插件和美化升级 添加右上角图标folk github添加站内搜索主页显示项目moon-cake 进度显示和上下滑动代码颜色首页只显示文章摘要NexT8动画背景Canvas Nest修改链接样式LaTeX公式编辑问题使用mermaid绘制流程图mermaid的flowchart基础语法 访客统计文章目录…

Hexo博客主题安装及Next主题个性化修改

原文链接https://www.lixint.me/hexo-theme-diy.html 欢迎加入博客搭建交流群&#xff08;QQ群号60429576&#xff09;>点击加入< 写在最前面&#xff1a; 1.在修改时请注意博客配置文件与主题配置文件的区别&#xff1a;博客配置文件是指博客根目录下的_config.yml文件…

Hexo-Next主题优化

添加动态背景添加背景图片侧边栏设置头像设置&#xff08;圆形旋转&#xff09;浏览页面显示当前浏览进度添加顶部加载条Hexo-Next代码复制功能 1. 添加动态背景 动态背景就是我的博客背景中动的那些粒子。 只需修改主题配置文件 /themes/next/_config.yml # Canvas-nest c…

基于Hexo搭建Next主题博客

Next 链接地址&#xff1a;https://github.com/caozongpeng/hexo-theme-next NexT 是一个高质量并且优雅的Hexo 主题。这是精心制作做出来的 hexo 主题。 如果你对此主题非常喜欢&#xff0c;欢迎Star & Fork&#xff0c;非常感谢。 预览界面 首页 底部 相册 文章 搜索…

Next主题添加背景图片

文章目录 操作步骤添加背景图片设置透明边框圆角 hexo 和 Next 的版本如下&#xff1a; hexo: 5.2.0 NexT: 7.8.0 操作步骤 进入 themes\next\source\css 目录中打开 main.styl 文件在末尾添加 css 代码即可 添加背景图片 值得注意的是&#xff0c;在 main.styl 文件末尾写的…

Hexo-Next主题博客个性化配置

Hexo版本&#xff1a;6.2.0、NextT版本&#xff1a;7.8.0 一、主题安装 打开Git Bash&#xff0c;cd到站点根目录&#xff0c;输入 git clone https://github.com/theme-next/hexo-theme-next themes/next打开站点根目录下的_config.yml文件&#xff0c;landscape修改为next …

hexo下next主题的优化

1.站点信息的配置。 修改一些基本的配置&#xff0c;比如站点名、站点描述等等。 # Site title: halisi7 subtitle: 一个专注技术的组织 description: 涉猎的主要编程语言为 c语言、Java、mysql、linux、docker&#xff0c;领域涵盖算法、服务研发和对象存储等。 keywords: c…

Hexo博客-NexT主题自定义主页配置方法

Refrence https://zhuanlan.zhihu.com/p/366761432 问题 在使用Hexo博客框架的Next主题时&#xff0c;默认主页是数篇博客的摘要。想要修改主页&#xff08;也即首页&#xff09;的内容&#xff08;例如给出网站的介绍等&#xff09;&#xff0c;需要进行自定义配置。 步骤 …

Hexo-Next主题搭建个人博客最新配置教程!

个人博客 网页预览&#xff1a;https://benn314.github.io/ Hexo-Next 是一款我很喜欢的主题&#xff0c;布局简约&#xff0c;很适合用于搭配 live-2d 和 网格动画&#xff0c;打造属于自己的个人博客。博客目前部署于 Github Pages 相关Github仓库 https://github.com/Ben…

NexT主题优化

前言 这算是各种文章的集合了&#xff0c;如果你有耐心就看完吧(&#xff34;▽&#xff34;) 如果是明确想要哪一种功能的童鞋&#xff0c;那就直接查找吧( • ̀ω•́ )✧ 本篇文章是在已经搭建好gitpagehexo的博客的前提下&#xff08;不懂怎么搭建的可以参考我的另一篇…

Hexo+next主题美化静态博客

前言 需要在Hexo下配置next主题 Hexo配置next主题教程&#xff1a;点我跳转 更改配置以后使用素质三连&#xff1a;hexo clean && hexo g && hexo s即可本地看到效果。 hexo clean && hexo g && hexo s注&#xff1a;部分参考自互联网&…

Next主题美化

写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了&#xff0c;但是在作者去一一尝试的时候&#xff0c;却发现有很多博客中提供的方法现在已经不支持或者过时了&#xff0c;为了避免大家和作者一样花费大量时间去一一尝试&#xff0c;所以作者考虑再三&#xff0c;决定…

Hexo博客优化之Next主题美化

前言 有了前面几篇博客的介绍,我们就可以很容易的搭建并编辑我们的博客了,不过既然是属于自己的博客网站,自然也就想让其更加美观,更有意思,所以呢我下面介绍一下Hexo博客的主题美化操作。 1. Next主题 Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,…

Django CBV ( 类视图函数 )

Django 类视图函数 写在前面1、先创建一个新的应用2、写一个类视图函数3、post访问试试4、再创建一个类视图函数5、as_view()里面可以传参6、TemplateView6.1、template_name写到路由里6.2、template_name写到视图里 7、ListView8、DetailView8.1、DetailView还可以不指定templ…

详解Django中FBV开发模式与CBV开发模式的区别.

你可能会好奇为什么在这里我们又要介绍CBV开发模式&#xff0c; 在前面的文章中&#xff0c; 我们调用视图函数都是使用 FBV 开发模式&#xff0c; 用的好好的为什么又要换呢&#xff1f; 其实不然&#xff0c;这是一个循序渐进的过程&#xff0c; 就像编程基础 和 框架开发&am…

什么是ccv

ccv是一个以不成熟的openframeworks为基础作的一个开源的软件。注意它并不是一个库。并且她早就不再更新了。现在openframeworks已经很成熟了&#xff0c;openframeworks提供的函数完全可以替代ccv&#xff0c;所以想继续使用ccv的同学们&#xff0c;赶紧回头是岸&#xff0c;使…

Django----FBV 与 CBV 介绍、CBV源码分析

文章目录 一、CBV和FBV二、CBV 源码分析 一个视图函数&#xff08;类&#xff09;&#xff0c;简称视图&#xff0c;是一个简单的Python 函数&#xff08;类&#xff09;&#xff0c;它接受Web请求并且返回Web响应。 响应可以是一张网页的HTML内容&#xff0c;一个重定向&#…

FBV和CBV

一、FBV FBV&#xff08;function base views&#xff09; 就是在视图里使用函数处理请求。 看代码&#xff1a; urls.py from django.conf.urls import url, include # from django.contrib import admin from mytest import viewsurlpatterns [# url(r‘^admin/‘, admin.s…

CBV

一、CBV与FBV #Class Base View(基于类的视图) #Function Base View(基于函数的视图) 二、CBV的用法及源码分析 1、用法 #视图层 # 1 先导入View(继承它) from django.views import View # 写一个类继承它, class Test(View):#request必须传,后面的可传可不传(有可能有名,无名分…

FBV与CBV

FBV与CBV 视图函数并不只是指函数也可以是类。FBV(基于函数的视图) 面向函数式编程。CBV(基于类的视图) 面向对象式编程 问题:基于CBV的视图函数&#xff0c;get请求来就会走类里面get方法,post请求来就会走类里面post方法 为什么??? urls.py中 url(r^login/,views.MyLogin.…