Twikoo评论系统魔改

Twikoo 评论系统魔改记录

最近对博客里的 Twikoo 评论系统做了一些二次开发，主要围绕前端体验和博客主题适配展开。

这篇只记录改造方向，不展开核心逻辑。

改造内容

这次主要调整了评论区的前端体验：

  • 评论输入框 UI 重新整理
  • 表情、图片、AI 评论按钮收纳到左下角工具胶囊中
  • 移动端按钮尺寸缩小，避免换行和拥挤
  • 评论方式按钮重新排版
  • 深色模式单独优化配色
  • 默认头像 CDN 做了适配调整
  • Twikoo 前端资源统一放到 Hexo 静态目录

前端资源路径

博客中引用的 Twikoo 前端文件路径为：

1
/pluginsSrc/twikoo/twikoo.all.min.js

对应 Hexo 项目目录

source/pluginsSrc/twikoo/twikoo.all.min.js

这样可以把二开后的 Twikoo 前端文件作为博客静态资源统一管理。

页面初始化

博客页面中仍然通过 twikoo.init 初始化评论系统。

示例：

1
2
3
4
twikoo.init({
  envId: 'https://twikoo.example.com',
  el: '#twikoo'
})

其中 envId 指向 Twikoo 服务地址，前端 JS 文件则走博客自己的静态资源路径。

这次魔改重点不是重写 Twikoo，而是让它更贴合自己的博客主题。

主要优化了评论输入框、移动端显示、深色模式和头像显示等细节。整体思路是尽量保留 Twikoo 原有能力，只在影响实际体验的地方做定制。