twikoo-fixed

简介

twikoo-fixed 是基于 Twikoo 评论系统的修复版本，解决了点击点赞/回复按钮时页面跳转到顶部的问题。

修复内容

• 修复问题：点击点赞、回复、登出等按钮时页面跳转到顶部
• 修复方法：将 href="#" 替换为 href="javascript:void(0)"
• 修复范围：8 处相关代码

版本信息

• 基于版本：Twikoo v1.6.45
• 修复版本：v1.6.45

安装使用

方法 1：通过 CDN 直接使用

<script src="https://s4.zstatic.net/npm/[email protected]/dist/twikoo.min.js"></script>
<div id="tcomment"></div>
<script>
twikoo.init({
  el: '#tcomment',
  envId: '您的环境ID'
});
</script>

方法 2：通过 npm 安装

npm install twikoo-fixed

// 导入
import twikoo from 'twikoo-fixed';

// 初始化
twikoo.init({
  el: '#tcomment',
  envId: '您的环境ID'
});

延迟加载优化

<div id="tcomment"></div>
<script>
// 延迟加载 Twikoo
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const script = document.createElement('script');
        script.src = 'https://s4.zstatic.net/npm/[email protected]/dist/twikoo.min.js';
        script.defer = true;
        script.onload = function() {
          twikoo.init({
            el: '#tcomment',
            envId: '您的环境ID'
          });
        };
        document.head.appendChild(script);
        observer.disconnect();
      }
    });
  }, { rootMargin: '100px' });
  
  observer.observe(document.getElementById('tcomment'));
} else {
  // 降级方案
  const script = document.createElement('script');
  script.src = 'https://s4.zstatic.net/npm/[email protected]/dist/twikoo.min.js';
  script.defer = true;
  script.onload = function() {
    twikoo.init({
      el: '#tcomment',
      envId: '您的环境ID'
    });
  };
  document.head.appendChild(script);
}
</script>

注意事项

• 此修复版本仅解决了页面跳转问题，其他功能与官方版本完全一致
• 建议在生产环境中启用 Gzip/Brotli 压缩以提高加载速度
• 如需更新到 Twikoo 新版本，请重新应用此修复

许可证

MIT License

相关链接

• Twikoo 官方仓库
• 问题修复参考