引入第三方评论系统

评论系统有很多，比如Twikoo、Waline 它们都支持云部署和自托管，对于静态站点很实用。

Twikoo

第一步：部署后端服务

官网：https://twikoo.js.org/

后端部署的选择很多，根据自身选择一个合适的即可。

部署方式	推荐度	描述
腾讯云一键部署	★☆☆☆☆	虽然方便，但是仅支持按量计费环境——也就是说，一键部署的环境，当免费资源用尽后，将会产生费用。且按量计费环境无法切换为包年包月环境。免费额度数据库读操作数只有 500 次 / 天，无法支撑 Twikoo 的运行需求。
腾讯云手动部署	★★☆☆☆	手动部署到腾讯云云开发环境，在中国大陆访问速度较快。需要付费购买环境才能部署。
腾讯云命令行部署	★☆☆☆☆	仅针对有 Node.js 经验的开发者。
Vercel 部署	★★★☆☆	适用于想要免费部署的用户，在中国大陆访问速度较慢甚至无法访问，绑定自己的域名可以提高访问速度。
Railway 部署	★★☆☆☆	有免费额度但不足以支持一个月连续运行，部署简单，适合全球访问。
Zeabur 部署	★☆☆☆☆	需要绑定支付宝或信用卡，部署简单，适合中国大陆访问，免费计划环境随时可能会被删除。
Netlify 部署	★★★★☆	有充足的免费额度，中国大陆访问速度不错。
Hugging Face 部署	★★★★☆	免费，中国大陆访问速度不错。
私有部署	★★☆☆☆	适用于有服务器的用户，需要自行申请 HTTPS 证书。
私有部署 (Docker)	★★★☆☆	适用于有服务器的用户，需要自行申请 HTTPS 证书。

docusaurus 需要自定义组件引入。

第二步：新建评论组件

import React, { useEffect } from 'react';

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

        const loadSecondScript = () => {
            // 执行 twikoo.init() 函数
            const initScript = document.createElement('script');
            initScript.innerHTML = `
            twikoo.init({
              envId: "https://comment.lichenghao.cn/",
              el: '#twikoo-comment'
            });
          `;
            initScript.id = 'twikoo-init-q7YVHb2v81UmUvxIG4sZ3'; // 添加唯一的 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>;
}

第三步：swizzle 页面/博客组件

# 页面
npm run swizzle @docusaurus/theme-classic DocItem/Layout -- --eject  
# 博客
npm run swizzle @docusaurus/theme-classic BlogPostPage -- --eject

第四步：引入评论组件

文档页面

import Twikoo from '../../../components/Twikoo';

博客页面

`import Twikoo from '../../components/Twikoo';`

第五步：重启查看效果

Waline

Waline也是一样的操作，参考：Waline-在 React 项目中导入

参考

React/Next.js 前端应用中接入 Twikoo 前端 by XiaoboTalk

https://blog.csdn.net/qq_36925843/article/details/127110117