### [Twikoo评论系统魔改](https://blog.cikcc.com/article/265)

**Published:** 2026-10-05T16:21:10

**Author:** Cik

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

## Twikoo 评论系统魔改记录

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

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

## 改造内容

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

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

## 前端资源路径

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

```html
/pluginsSrc/twikoo/twikoo.all.min.js
```

对应 Hexo 项目目录

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

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

## 页面初始化

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

示例：

```
twikoo.init({
  envId: 'https://twikoo.example.com',
  el: '#twikoo'
})
```

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

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

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

**Tags:** hexo, twikoo

**Categories:** 网站教程

---