Home
avatar

CatOi

Waline 评论组件魔改实践：让评论更个性化

690字 3.5分钟 魔改

在搭建个人网站或博客时，评论组件是促进与访客互动交流的重要工具。Waline 评论组件凭借其简洁轻量、易于集成的特点，受到了众多开发者的青睐。但在实际使用发现它的默认样式与功能无法完全契合需求。好在Waline 支持自定义模板，这为我们进行个性化改造提供了可能。这里我们实现了昵称框输入 QQ 号时获取头像与 QQ 邮箱的实用功能，下面就来分享一下具体的操作过程。

关键代码解析：实现 QQ 头像获取功能

核心功能函数 avatarUrl：这个异步函数是实现 QQ 头像获取的关键。它接收一个 comment 对象作为参数，其中包含了评论者的昵称 nick 和邮箱 mail 等信息。首先，定义了两个正则表达式 regq 和 reg，分别用于匹配 QQ 号和 QQ 邮箱格式。然后，通过条件判断，当昵称符合 QQ 号格式时，直接使用 QQ 头像接口 https://q1.qlogo.cn/headimg_dl?dst_uin=QQ号&spec=4 生成头像链接；当邮箱符合 QQ 邮箱格式时，提取邮箱中的 QQ 号部分，再通过相同的头像接口获取头像链接。

<!-- netlify/functions/comment.js -->
const http = require('http');
const Waline = require('@waline/vercel');
const serverless = require('serverless-http');

const app = Waline({
  env: 'netlify', 
  //违禁词
  forbiddenWords: ['违禁词1', '违禁词2','违禁词3'],
  // 黑名单
  disallowIPList: [''],
  // async preUpdate(comment) {
  //   return '你无法更新评论数据';
  // },
  async postUpdate(comment) {
    console.log(`${comment.objectId} 评论已更新!`);
  },
//   通过QQ号或者QQ邮箱获取QQ头像
  async avatarUrl(comment) {
    const regq = new RegExp('^[1-9][0-9]{4,11}$');
    const reg = new RegExp('(\\d+)@qq\\.com$', 'i');
    const mail = comment.mail;
    const nick = comment.nick;
    if (regq.test(nick)) {
        return 'https://q1.qlogo.cn/headimg_dl?dst_uin=' + nick + '&spec=4';
    }
    if (reg.test(mail)) {
      const q = mail.replace(/@qq\.com/i, '').toLowerCase();
      if (regq.test(q)) {
      return 'https://q1.qlogo.cn/headimg_dl?dst_uin=' + q + '&spec=4';
      }
    }
  },
    //管理员通知模板
    mailTemplateAdmin: ``,
    //评论通知模板
    mailTemplate: ``
});

module.exports.handler = serverless(http.createServer(app));

其他配置

因为mailTemplate 和 mailTemplateAdmin 分别用于设置管理员通知模板和评论通知模板，由于本次魔改暂未涉及模板定制，所以这两个字段留空。对这个两个字段感兴趣的小伙伴可以参考我的另一篇文章进行配置。

总结与展望​

通过对 Waline 评论组件的魔改实践，我深刻体会到了开源之力的强大。这次魔改不仅满足了我对评论组件个性化的需求，也为网站带来了更好的互动效果。如果你也对 Waline 评论组件的个性化改造感兴趣，不妨参考上述方法尝试一下。当然，如果你有更好的想法或建议，也欢迎在评论区留言交流。

教程 Waline 评论组件 魔改