首页 > 其他分享 >最好的个人博客评论区实现方案推荐：waline

最好的个人博客评论区实现方案推荐：waline

时间：2024-01-31 13:56:12浏览次数：30  
标签：SET varchar DEFAULT 博客 评论 https NULL waline

我的博客一直没有一个好看的评论区，自己做又不会。。没错，我是个前端渣渣。调研了一下，一开始想套用一些网上的静态模板，但是改造成本还是挺大的，后来接触到了Waline，简单了解了以下，我就知道了，它就是我理想中的评论区功能实现，和我的博客匹配度MAX。

一、Waline简介

Waline官网：https://waline.js.org/

Waline github地址：https://github.com/walinejs/waline

Waline是一款评论区实现方案软件，它需要单独的服务端部署，适用于非常适用于静态博客，比如Hexo，对于大多数个人博客也一样适用。

它有以下特点：

  1. 评论支持markdown，同时支持多套表情、数据公式、html嵌入等
  2. 强大的安全性：匿名登录内容校验、防灌水、保护敏感数据等
  3. 登录支持：支持注册登录、github登录等多种登录方式，同时也支持匿名登录
  4. ......

确实，它的功能很强大，UI也很漂亮。

二、Waline安装

1、Wline软件架构

直接看Waline文档，很多人一开始会比较迷糊，LeanCloud是啥，为啥要注册？Vercel又是啥？啥啥啥，为啥步骤这么复杂。。。。其实非常简单，一张架构图表示下

Waline软件架构图

可以清楚的看到，Vercel只是服务端部署的一种方案，LeanCloud只是个数据存储服务，它们均有可替代方案，推荐使用独立部署替代Vercel，使用Mysql替代LeanCloud。

2、服务端安装

这里使用独立部署的方案，独立部署官方文档：https://waline.js.org/guide/deploy/vps.html

Waline关于MySQL的说明：https://waline.js.org/guide/database.html#mysql

首先，需要先建好MySQL数据库waline（注意使用utf8mb4编码），并执行初始化脚本，初始化脚本见github：https://github.com/walinejs/waline/blob/main/assets/waline.sql

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
SET NAMES utf8mb4;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;


# Dump of table wl_Comment
# ------------------------------------------------------------

CREATE TABLE `wl_Comment` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `comment` text,
  `insertedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `ip` varchar(100) DEFAULT '',
  `link` varchar(255) DEFAULT NULL,
  `mail` varchar(255) DEFAULT NULL,
  `nick` varchar(255) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  `rid` int(11) DEFAULT NULL,
  `sticky` boolean DEFAULT NULL,
  `status` varchar(50) NOT NULL DEFAULT '',
  `like` int(11) DEFAULT NULL,
  `ua` text,
  `url` varchar(255) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Counter
# ------------------------------------------------------------

CREATE TABLE `wl_Counter` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `time` int(11) DEFAULT NULL,
  `reaction0` int(11) DEFAULT NULL,
  `reaction1` int(11) DEFAULT NULL,
  `reaction2` int(11) DEFAULT NULL,
  `reaction3` int(11) DEFAULT NULL,
  `reaction4` int(11) DEFAULT NULL,
  `reaction5` int(11) DEFAULT NULL,
  `reaction6` int(11) DEFAULT NULL,
  `reaction7` int(11) DEFAULT NULL,
  `reaction8` int(11) DEFAULT NULL,
  `url` varchar(255) NOT NULL DEFAULT '',
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;



# Dump of table wl_Users
# ------------------------------------------------------------

CREATE TABLE `wl_Users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `display_name` varchar(255) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  `password` varchar(255) NOT NULL DEFAULT '',
  `type` varchar(50) NOT NULL DEFAULT '',
  `label` varchar(255) DEFAULT NULL,
  `url` varchar(255) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `github` varchar(255) DEFAULT NULL,
  `twitter` varchar(255) DEFAULT NULL,
  `facebook` varchar(255) DEFAULT NULL,
  `google` varchar(255) DEFAULT NULL,
  `weibo` varchar(255) DEFAULT NULL,
  `qq` varchar(255) DEFAULT NULL,
  `2fa` varchar(32) DEFAULT NULL,
  `createdAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `updatedAt` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;




/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

为了方便部署，这里使用了docker-compose部署，docker-compose.yml文件如下

version: '3'

services:
  waline:
    container_name: waline
    image: lizheming/waline:latest
    restart: always
    ports:
      - 8360:8360
    volumes:
      - ${PWD}/data:/app/data
    environment:
      #数据库配置
      MYSQL_HOST: 'MySQL连接地址'
      MYSQL_PORT: '端口号'
      MYSQL_DB: '数据库'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: '密码'
      MYSQL_PREFIX: 'wl_'
      MYSQL_CHARSET: 'utf8mb4'
      MYSQL_SSL: 'false'
      TZ: Asia/Shanghai
      #邮箱配置，163为例
      SMTP_SERVICE: '163'
      AUTHOR_EMAIL: '邮箱地址'
      SMTP_HOST: 'smtp.163.com'
      SMTP_PORT: '465'
      SMTP_USER: '邮箱地址'
      SMTP_PASS: '第三方授权登陆token'
      SMTP_SECURE: 'true'
      #站点地址，方便发邮件时直接跳转
      SITE_URL: 'https://blog.kdyzm.cn'
      SITE_NAME: '一枝梅的博客'
      #这里这个似乎不生效，不知道什么原因，但是不影响使用
      SENDER_NAME: 'kdyzm'
      #安全域名
      SECURE_DOMAINS: 'blog.kdyzm.cn'
      #配置文章响应
      LEVELS: '0,10,20,50,100,200'

之后使用docker-compose up 命令启动看看有没有报错，如果没有报错，使用docker-compose up -d命令后台启动即可。

服务端启动成功之后访问 http://127.0.0.1:8360/ ，会看到默认的效果展示

image-20240131133344552

访问 http://localhost:8360/ui/register，进行注册，第一个注册的用户即为管理员

image-20240131133438447

进去之后可以修改自己的头像、管理评论等

三、前端使用

首先，定义一个div放在要显示评论区的位置：

 <div id="waline"></div>

接下来在下方引入样式和js

<script src="https://unpkg.com/@waline/client@v2/dist/waline.js"></script>
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet' />

注意这里应当引入v2版本，而不是官方的v3版本（实测v3版本有bug，它不能正确适配移动端而且登录功能也有问题）看官方的包v3版本刚更新，似乎还不是很稳定。

然后初始化脚本

<script>
    const waline = Waline.init({
        el: '#waline',
        //后端服务器地址
        serverURL: 'http://localhost:8360',
        emoji: [
            'https://unpkg.com/@waline/[email protected]/alus',
            'https://unpkg.com/@waline/[email protected]/bilibili',
            ......各种表情包
        ],
        //禁止图片上传按钮
        imageUploader: false,
        //不显示版权标志
        copyright: false,
    });
</script>

1、禁用图片上传按钮

初始化的时候配置imageUploader: false,即可

2、不显示版权标志

初始化的时候配置copyright: false,即可

3、各种表情包配置

官方文档：https://waline.js.org/guide/features/emoji.html

常用的表情包如上所示，官方文档里还有其他表情包，部分表情包显示效果可看我的博客留言板模块：https://blog.kdyzm.cn/messageBoard

四、欢迎来到我的博客留言

留言板使用了Waline，查看Waline效果，请看：https://blog.kdyzm.cn/messageBoard

image-20240131133950677

标签：SET,varchar,DEFAULT,博客,评论,https,NULL,waline
From： https://www.cnblogs.com/kuangdaoyizhimei/p/17999097

相关文章

  • 1.22 《梦断代码》读书博客1
    在《梦断代码》中，作者生动地描绘了软件工程所面临的重重困难与艰辛。这些描述即便再过5年读来，也许都不会过时。书中所述不仅是一队人马并肩扛起代码巨石，历经磨难仍欲将其推上山顶的故事，更是今天亿万台服务器和PC机上运行的各种软件的创造故事，成就着人类不断超越实现更伟大梦想的过......
  • 1.25 《梦断代码》读书博客2
    《梦断代码》和“乐高假设”为我们描绘了软件工程的现状和未来发展的方向。它们提醒我们，软件开发需要不断的奋斗和努力，而乐高假设的提出也引发了我们对软件开发未来的思考。或许，未来的软件开发将更加高效、便捷，这种变革可能会影响我们的工作方式和行业发展。在阅读《梦断代码》和......
  • 1.27 《梦断代码》读书博客3
    当2008年的《梦断代码》一书被问世时，它或许并不曾意识到自己将成为未来软件开发现实问题的一面镜子。然而，随着时间的推移，我们发现书中所描述的情境与如今的软件开发实践有着惊人的相似之处。以ReactJS为例，它所采用的组件化开发模式就像搭积木一般，美好而诱人。然而，实际开发中，由于......
  • 小书匠发布笔记到博客园
    小书匠发布笔记到博客园小书匠博客园发布要把小书匠里面写的markdown笔记发布到博客园中，需要做如下的设置。一、设置元数据下面是我这个笔记的元数据设置。这里面，title是笔记的标题，tags是笔记的标签，renderNumberedHeading:true表示自动对标题进行编号，grammar_cjkRuby:t......
  • 记录第一篇博客
    Typora学习二级标题列表示意你好无序列表名字性别生日张三男1997分割线图片超链接[点击](百度一下，你就知道(baidu.com))引用你好......
  • [转]解决Visual Studio 调试时加载符号慢的问题 - zhaotianff - 博客园
    什么是调试符号编译程序时生成的一组特殊字符，并包含有关变量和函数在生成的二进制文件中的位置以及其他服务信息的信息。该数据集可用于逐步调试程序或检查第三方代码。调试符号可以添加到可执行文件或库中，但是大多数现代编译器将它们存储为单独的对象。例如，VisualStudio将调......
  • 博客园设置
    1、基础设置2、博客侧边栏公告格式html文档查看代码 <script>window.$silence={//...avatar:'https://images.cnblogs.com/cnblogs_com/zlshtml/2308217/o_230510055746_Mrzxs.jpg',defaultMode:'light',hljsln:true,catalog:{......
  • Hexo+Github搭建个人博客记录
    1.安装Git1.1Git下载从Git官网直接下载安装程序，按默认选项安装。安装完成后，在开始菜单里找到“Git”->“GitBash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功1.2Git学习了解Git是目前世界上最先进的分布式版本控制系统。版本库，又称仓库，英文名是repository，可以简单理......
  • 模拟集成电路设计系列博客——5.3.2 电容重置开关电容增益电路
    5.3.2电容重置开关电容增益电路为了消除需要放大器输出每个时钟周期都需要摆动到接近0V，并且仍然能够取消掉放大器的失调电压，可以使用一个电容重置正义电路。这个正义电路的基本思路是通过一个之前充电到输出电压电容，将放大器的输出在复位相耦合到一个反相的输入。因此，我们会看到......
  • 模拟集成电路设计系列博客——5.3.1 可重置开关电容增益电路
    5.3.1可重置开关电容增益电路最常见的非滤波器模拟功能是可能增益电路，即输出信号是输入信号的比例缩放。使用开关电容技术可以实现精确的正义电路。开关电容增益电路的一个重要应用是在流水线ADC中。具体的流水线ADC中的开关电容电路会在那个章节中进行讨论。在有源RC电路中，增......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99