跳到主要内容

为Docusaurus添加twikoo评论系统

· 阅读需 3 分钟
JovenKing

twikoo​

twikoo是一个简洁、安全、免费的静态网站评论系统。 它支持很多种部署方式，具体可见官网文档，本文这里使用docker进行自托管部署。

自托管部署​

docker-compose.yml
version: '3'
services:
  twikoo:
    image: imaegoo/twikoo
    container_name: twikoo
    restart: unless-stopped
    ports:
      - 127.0.0.1:8383:8080
    environment:
      TWIKOO_THROTTLE: 1000
    volumes:
      - ./data:/app/data
nginx反代配置文件
# 博客评论
server {
        # 这里域名只做演示，请替换真实域名
        server_name www.domain.test;

        listen 443 ssl http2;
        
        # ....略

        # 使用nginx反代静态资源
        location /twikoo.min.js {
            proxy_pass https://cdn.jsdelivr.net/npm/twikoo@1.6.38/dist/twikoo.min.js;
            # ....略
        }
        # 反代twikoo后台服务
        location / {
            proxy_pass http://127.0.0.1:8383;
            # ....略
        }
}

Docusaurus修改​

使用swizzle创建页面/博客组件​

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

新增Twikoo组件​

创建src/components/Twikoo/index.js文件，添加以下代码

import React, { useEffect } from 'react';

export default function Twikoo() {
    useEffect(() => {
        // 通过 CDN 引入 twikoo js 文件
        const cdnScript = document.createElement('script');

        cdnScript.src = 'https://www.domain.test/twikoo.min.js';
        cdnScript.async = true;

        const loadSecondScript = () => {
            // 执行 twikoo.init() 函数
            const initScript = document.createElement('script');
            initScript.innerHTML = `
            twikoo.init({
              envId: "https://www.domain.test/",
              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>;
}

引入评论组件​

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

在博客页面中添加twikoo组件

至此twikoo已完成配置，重启docusaurus可看见效果

参考​