React / Next.js 中接入 Twikoo 前端

在 React 或者 Next.js 中接入 Twikoo 前端

<div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.25/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
  el: '#tcomment', // 容器元素
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>

import React, { useEffect } from 'react'

export const Twikoo: React.FC = () => {
  useEffect(() => {
    // 通过 CDN 引入 twikoo js 文件
    const cdnScript = document.createElement('script')
    cdnScript.src = 'https://cdn.staticfile.org/twikoo/1.6.25/twikoo.all.min.js'
    cdnScript.async = true

    const loadSecondScript = () => {
      // 执行 twikoo.init() 函数
      const initScript = document.createElement('script')
      initScript.innerHTML = `
            twikoo.init({
              envId: "https://***.xiaobotalk.com/",
              el: '#twikoo-comment'
            });
          `
      initScript.id = 'twikoo-init-id' // 添加唯一的 ID
      document.body.appendChild(initScript)
    }

    // 在 twikoo js 文件加载完成后，再加载执行 twikoo.init() 函数的 js 文件
    cdnScript.addEventListener('load', loadSecondScript)
    document.body.appendChild(cdnScript)

    return () => {
      if (loadSecondScript) {
        cdnScript.removeEventListener('load', loadSecondScript)
      }
      if (cdnScript) {
        document.body.removeChild(cdnScript)
      }
      const secondScript = document.querySelector('#twikoo-init-id')
      if (secondScript) {
        document.body.removeChild(secondScript)
      }
    }
  }, [])

  return (
     <div id='twikoo-comment'></div>
  )
}