跳到主要内容

引入第三方评论系统

· 阅读需 3 分钟
Lichlaughing

评论系统有很多，比如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';

第五步：重启查看效果​

Waline​

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

参考​

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

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