Hello_Blog - Andy

Memos v0.24.4 的官方评论功能确实存在问题，且 Twikoo 接入代码在最新版本可能失效。以下是关键信息和解决方案：

问题根源#

从搜索结果可以看到，社区提供的 Twikoo 接入代码都是针对 v0.16.1 到 v0.22.x 版本的，依赖的 DOM 选择器如 .gap-2 在 v0.24.x 可能已经改变。

v0.24.4 界面结构变化：

新版本使用了新的 React 组件结构
旧的 document.querySelector('.gap-2') 可能已失效
单条 Memo 页面的 URL 结构可能也有变化

为什么你的 Twikoo 代码没用#

旧代码依赖的 DOM 元素：

1
// 旧代码（v0.16-0.22）
2
var memoTw = document.querySelector('.gap-2') || '';  // v0.24 可能已不存在这个 class
3
memoTw.insertAdjacentHTML('afterend', '<div id="mtcomment"></div>');

v0.24.4 新的界面结构（推测）：

可能需要选择 [data-testid="memo-content"] 或其他新的 data 属性
或者使用更通用的选择器如 .memo-wrapper > div:last-child

临时解决方案#

方案 1：调试新版 DOM 结构#

在浏览器控制台执行，找到正确的插入点：

1
// 打开任意单条 Memo 页面（如 /m/123），在控制台执行：
2
console.log(document.querySelector('.gap-2'));  // 旧的选择器，应该为 null
3
console.log(document.querySelector('[class*="gap-"]'));  // 模糊搜索
4
console.log(document.querySelector('.memo-wrapper').innerHTML);  // 查看结构

方案 2：使用更通用的注入代码（适配 v0.24）#

1
// Memos v0.24.4 适配版 Twikoo
2
var twikooENV = 'https://你的-twikoo地址.vercel.app';
3

4
function injectTwikoo() {
5
  // 等待页面加载完成
6
  if (!document.querySelector('script[src*="twikoo"]')) {
7
    var script = document.createElement('script');
8
    script.src = 'https://cdn.jsdelivr.net/npm/twikoo@1.6.32/dist/twikoo.all.min.js';
9
    script.onload = initTwikoo;
10
    document.head.appendChild(script);
11
  } else {
12
    initTwikoo();
13
  }
14
}
15

16
function initTwikoo() {
17
  // 多种选择器尝试，适配不同版本
18
  var container =
19
    document.querySelector('.gap-2') ||  // 旧版本
20
    document.querySelector('.memo-content') ||  // 可能的新类名
21
    document.querySelector('[data-testid="memo-wrapper"] > div:last-child') ||  // data-testid
22
    document.querySelector('.memo-wrapper > div:last-child');  // 通用兜底
23

24
  if (!container) {
25
    console.log('Twikoo: 未找到插入点，1秒后重试');
26
    setTimeout(initTwikoo, 1000);
27
    return;
28
  }
29

30
  // 避免重复插入
31
  if (container.nextElementSibling?.classList.contains('twikoo-container')) return;
32

33
  var twikooDiv = document.createElement('div');
34
  twikooDiv.className = 'twikoo-container';
35
  twikooDiv.style.marginTop = '20px';
36
  container.parentNode.insertBefore(twikooDiv, container.nextSibling);
37

38
  twikoo.init({
39
    envId: twikooENV,
40
    el: twikooDiv,
41
    path: window.location.pathname,  // 使用当前路径作为唯一ID
42
  });
43
}
44

45
// 只在单条 Memo 页面执行（URL 包含 /m/）
46
if (window.location.pathname.match(/\/m\/\d+/)) {
47
  injectTwikoo();
48
}

方案 3：放弃 Memos 内置，改用独立评论页（最稳定）#

如果注入代码始终不稳定，可以：

在 Memo 内容底部手动添加评论链接：

1
---
2
评论请访问：https://你的博客.com/comments/?id=这条memo的id
3
---

自建一个评论聚合页，用 Twikoo 的 API 读取所有评论按 Memo ID 分组显示

长期建议#

Memos v0.24+ 的评论区现状：

官方只有表情反应（😊 按钮），没有文字评论
社区 Twikoo 方案因界面重构失效
GitHub Issues 上有用户请求添加评论功能，但官方未实现

如果你急需评论功能，建议：

降级到 v0.18.1（功能最全面的版本，支持评论）[^^38^]
或换用其他工具：Halo、WordPress、或者 Astro + Twikoo（静态博客+动态评论）

一句话总结#

v0.24.4 的界面结构变了，旧 Twikoo 代码的选择器失效。你需要用浏览器调试工具找到新的 DOM 插入点，或者降级到 v0.18.1 使用原生评论功能。