Tumblr主题开发：帖子评论加载与样式处理问题求助

一、正确集成tumblrNotesInserted回调 #

Tumblr原生加载更多评论的逻辑，会在新评论插入页面后自动触发tumblrNotesInserted全局事件，你不需要自己编写AJAX请求，直接监听这个事件即可处理新加载的评论：

// 监听原生评论加载完成事件
document.addEventListener('tumblrNotesInserted', function(e) {
  // e.detail.notes 是新加载的评论元素集合
  processNewNotes(e.detail.notes);
});

这个事件是Tumblr官方提供的原生机制，无需手动重新执行加载脚本，点击“加载更多”后会自动触发。

二、关联自定义分类脚本 #

把你的评论分类逻辑封装成可复用函数，每次加载新评论时调用即可：

// 封装评论分类处理函数
function processNewNotes(noteElements) {
  // 遍历所有新加载的评论元素
  noteElements.forEach(note => {
    // 利用Tumblr原生类名判断评论类型
    if (note.classList.contains('note-reblog')) {
      document.getElementById('reblog-container').appendChild(note);
    } else if (note.classList.contains('note-like')) {
      document.getElementById('like-container').appendChild(note);
    } else if (note.classList.contains('note-reply')) {
      document.getElementById('reply-container').appendChild(note);
    }
  });
}

// 页面初始化时先处理已有评论
processNewNotes(document.querySelectorAll('.note'));

注意：Tumblr的评论元素自带note-reblog（转发）、note-like（点赞）、note-reply（回复）类名，直接用这些类名判断类型即可，无需自行解析内容。

三、确保加载更多按钮的原生功能 #

如果你的自定义样式修改了加载更多按钮，务必保留它的data-url属性，这是Tumblr原生脚本获取更多评论的关键：

<!-- 保留原生属性，不要修改data-url的值 -->
<button class="tumblr-load-more-notes" data-url="{NotesLoadMoreUrl}">加载更多评论</button>

主题中必须包含{PostNotes}标签，Tumblr才会加载对应的评论处理脚本。

四、常见问题排查 #

• 若tumblrNotesInserted事件不触发：检查主题是否正确引入{PostNotes}标签，缺失该标签会导致原生评论脚本无法加载。
• 新评论无法分类：确认processNewNotes函数中的容器ID与页面元素ID一致，且新加载的评论元素确实带有对应的note-*类名。
• 避免重复处理：仅处理e.detail.notes中的元素，不要重新遍历所有评论，防止重复分类。

内容的提问来源于stack exchange，提问作者Faiz