为Hexo添加评论系统Waline并配置图床

官方文档里面有详细的教程，我这里仅作参考。

我尝试过两种方式部署，Vercel以及服务器独立部署，具体过程如下。

使用服务器部署

租个便宜的服务器

学生和新用户的话试试阿里云、腾讯云、华为云、百度云等大厂，学生价很便宜。

另外阿里云和腾讯云有99元租一年的活动，2核2G服务器，可以去看看

非学生的话我推荐一个我正在用的——雨云 - 新一代云服务提供商 (rainyun.com)，注册时填写推荐码（MzgwODIy）可以获得五折优惠。

建议租带有公网IP的服务器，方便配置SSL证书，没有SSL证书的话Waline无法正常使用。

安装docker

Debian 12 / Ubuntu 22.04 安装 Docker 以及 Docker Compose 教程 - 烧饼博客

修改镜像源

docker国内镜像源配置及走代理设置_docker 镜像代理-CSDN博客

可以先ping一下，看看通不通

https://6kx4zyno.mirror.aliyuncs.com
https://ccr.ccs.tencentyun.com
https://docker.mirrors.ustc.edu.cn
https://hub-mirror.c.163.com
https://mirror.baidubce.com

安装postgresql

Docker安装postgreSQL

PostgreSQL数据库——Docker版本的postgres安装 & Navicat连接方式+导入向导使用 & SpringBoot结合Jpa使用PostgreSQL初步_postgresql docker-CSDN博客

踩坑：

1. 若登陆不上。提示用户postgres认证失败，那可能是启动容器时设置的密码没生效，重新设置一下就行

   docker exec -it postgresql /bin/bash
   psql -U postgres
   ALTER USER postgres WITH PASSWORD 'zmqwyj';
   

安装Walinne

采用docker-compose方式

配置文件docker-compose.yml（数据库使用的postgresql，其他数据库的变量名请查看官网多数据库服务支持 | Waline）

version: '3'

services:
  waline:
    container_name: waline
    image: lizheming/waline:latest
    restart: always
    ports:
      - 8360:8360
    volumes:
      - ${PWD}/data:/app/data
    environment:
      TZ: 'Asia/Shanghai'
      PG_DB: 'hexowaline（你创建的数据库数名称）'
      PG_USER: 'postgres（创建数据库时选择的用户，默认是postgres）'
      PG_PASSWORD: 'youpassword（你的密码）'
      PG_HOST: 'xxx.xxx.xxx.xxx'
      PG_PORT: '5432'

踩坑：

• 修改镜像源，否则无法下载，不建议配多个，会影响下载速度

  vim  /etc/docker/daemon.json #没有就新建，有就直接改
  
  {
      "registry-mirrors": [
      	"https://dockerhub.timeweb.cloud"，
          #"https://registry.docker-cn.com",
          #"https://docker.mirrors.ustc.edu.cn",
          #"https://hub-mirror.c.163.com",
          #"https://mirror.baidubce.com",
          #"https://ccr.ccs.tencentyun.com"
      ]
  }
  
  sudo systemctl daemon-reload		#重启daemon进程
  sudo systemctl restart docker		#重启docker
  docker info
  

  试了很多镜像源，就第一个能下，虽然慢，但起码是能下下来的

Hexo引入Walline评论

我是用的是Butterfly主题，直接在主题的配置文件中引入就行，修改以下部分：

注意这里必须是大写的W

serverURL是服务器地址，记得配个SSL证书，否则只能进入Walline后台，正常页面中评论时会无法使用，报错Faile to fatch！

使用Vercel部署

个人更推荐Vercel部署，省时省力，就是速度慢了点，但是白嫖的它不想香吗/doge

根据教程直接走就行，不过现在Vercel部署的项目国内想访问的话需要绑定个二级域名，使用leanCloud的话建议用国际版，如果使用国内版则也需要绑定一个二级域名

Vercel绑定域名：

找到项目的Setting——Domains，输入自己的二级域名并点击Add（二级域名就是你购买的域名用DNS解析出来的带前缀的域名，前缀自己随便定义，比如waline.你的域名.com），接着Vercel会提示你让你去DNS添加一条记录，只需要在DNS处将之前添加的二级域名改为CNAME，并填入Vercel给的记录值即可。过几分钟出现两个蓝色对勾即配置成功。

LeanCloud绑定域名

左下角设置——域名绑定——绑定新域名。添加另外解析处的另一个二级域名，然后配置DNS的记录，过几分钟就会显示已绑定

改用其他数据库

除了官方默认的 LeanCloud 之外，Waline 还支持多种数据库，包括 MySQL, PostgreSQL, SQLite 以及 MongoDB。因为LeanCloud的数据库没法直接连接Navicate，所以我使用了其他的数据库来代替。

我目前就是使用的自己的云服务器中docker中运行的postgresql，若没有服务器的话，免费的数据库服务商还是很多的，MySQL有SQLpub、PostgreSQL有supabase，去官网注册就好，完全免费的。

改用其他数据库的话，在Vercel中的变量就需要修改了

点击setting——environment variables，将leanclouod的变量LEAN_ID、LEAN_KEY、LEAN_MASTER_KE删除，改为我下图中的变量

mysql的话改为以下变量

其他数据库变量名请查看官网多数据库服务支持 | Waline

Hexo引入Walline评论

同服务器部署

配置图床

Waline自带的图片上传有文件大小限制128k，基本是啥都传不了，所以作者的意思是提倡使用图床的，能减小评论的体积，加快访问速度。

本博客使用butterfly主题，其他主题大差不差，就是在waline的js文件中添加imageUploader

本文按照此教程修改而来Waline评论与Lsky兰空图床 - 那个码农 (thatcoders.github.io)，其中踩了些坑，供大家借鉴。并没有完全按照此教程，因为主题不同，Butterfly完成waline配置只需两大步，第一是在主题配置文件中启用waline；第二部教程中自定义js这一步。

去不图床

教程给的兰空图床是自行搭建的，我为了方便，就选择了直接购买去不图床 - 杜老师说旗下付费图片外链平台 (7bu.top)（其实是为了artitalk买的，结果买完后artitalk的图床功能已经不好使了，秉持不浪费的原则，遂使用去不图床），10元1年，我记得阿里oss是9元1年，而且每月40G流量，不限容量，但oss跟此教程差的有些多，我等之后再尝试。

去不图床购买完成之后进入Token页面，生成Token，仅选择上传图片权限即可。记住此Token，因为只显示一次。

修改主题配置文件

同Hexo引入Walline评论，见上文

修改waline.pug文件

Hexo/themes/butterfly/layout/includes/third-party/comments/waline.pug

- const { serverURL, option, pageview } = theme.waline
- const { lazyload, count, use } = theme.comments

script.
  (() => {
    let initFn = window.walineFn || null
    const el = document.getElementById("waline-wrap"); //这里是你的评论div#id
    var idPath = el.getAttribute('comment_id');
    if (!idPath) {
      idPath = decodeURI(window.location.pathname);
    }
    const initWaline = (Fn) => {
      const waline = Fn(Object.assign({
        el: '#waline-wrap',         //这里是你的评论div#id，跟上面的el中定义的值一致
        serverURL: '!{serverURL}',  //主题配置文件中配置的服务地址
        search: false,              //关闭表情查找 不大好用
        emoji: [
          'https://unpkg.com/@waline/emojis@1.1.0/bilibili',
          'https://unpkg.com/@waline/emojis@1.1.0/qq',
        ],
        reaction: true,              // 开启反应，可以点击按钮对文章进行评价
        pageview: !{lazyload ? false : pageview},  // 主题配置文件中配置的浏览量统计
        dark: 'html[data-theme="dark"]',           
        path: window.location.pathname,            
        comment: !{lazyload ? false : count},      // 主题配置文件中配置的评论数统计
        imageUploader: (file) => {
            if (!file) {  
              throw new Error('No file provided');  
            }  
            let formData = new FormData();
            let headers = new Headers();
            formData.append('file', file);
            formData.append('album_id', 1234); //去不的相册id，id可进入相册页面用F12查看
            headers.set('Authorization', 'Bearer xxxxxxxxxxxxx');   // 记得改自己的token，去不给的token是1234|xxxx，前面的数字和竖杠不需要，加上Bearer 变成Bearer xxxxx才能认证通过
            headers.set('Accept', 'application/json');
            return fetch('https://7bu.top/api/v1/upload', {    // 去不图床的API就是此链接，如果你用的其他图床就改成其他的
              method: 'POST',
              headers: headers,
              body: formData,
              mode: 'cors',
            })
              .then((resp) => resp.json())
              .then((resp) => resp.data.links.url);
          },
      }, !{JSON.stringify(option)}))

      const destroyWaline = () => {
        waline.destroy()
      }

      btf.addGlobalFn('pjax', destroyWaline, 'destroyWaline')
    }

    const loadWaline = async () => {
      if (initFn) initWaline(initFn)
      else {
        await getCSS('!{url_for(theme.asset.waline_css)}')
        const { init } = await import('!{url_for(theme.asset.waline_js)}')
        initFn = init || Waline.init
        initWaline(initFn)
        window.walineFn = initFn
      }
    }

    if ('!{use[0]}' === 'Waline' || !!{lazyload}) {
      if (!{lazyload}) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
      else setTimeout(loadWaline, 0)
    } else {
      window.loadOtherComment = loadWaline
    }
  })()

这是整个文件，其实改动的只有添加了imageUploader这一段，以及顶部添加的

const el = document.getElementById("waline-wrap"); //这里是你的评论div#id
    var idPath = el.getAttribute('comment_id');
    if (!idPath) {
      idPath = decodeURI(window.location.pathname);
    }

其他的就保留原本的不用动即可，可以添加的其他配置，比如emoji，这里的emoji是微博和哔哩哔哩的

提示：原教程中给的跨域的代码一定要删掉，不然无法上传成功。看控制台一直以为是文件没传过去，但是用控制台输出又证明传过去了，最后删了这两行代码才成功

headers.append("Access-Control-Allow-Headers", "*");
headers.append("Access-Control-Allow-Origin", "*");

测试

至此，waline已配置完成，进入自己的博客进行测试，点击上传图片，上传完成后会自动留下链接，然后提交就可以看到图片了

留下俺的博客，欢迎访问火柴人儿的小站