为网站重新配置 twikoo 评论前后端

后端配置

在私有服务器中，利用宝塔面板部署

安装 Twikoo server¹

npm i -g tkserver

初始化 node 项目

npm init -y

编辑 package.json

package.json

{
  "name": "twikoo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "tkserver"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tkserver": "^1.6.39"
  }
}

配置项目域名模块管理里面再安装一次 tkserver 访问之前绑定的域名

前端

twikoo.nocss.js 和 twikoo.css 文件放在项目的 static 目录下，gatsby 会生成到 public 根目录中

TwikooComments.tsx

import React, { useEffect } from 'react';
import { Box } from 'theme-ui';
const TwikooComments: React.FC = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = "/twikoo.nocss.js";
    script.async = true;
    script.onload = () => {
      // @ts-ignore
      window.twikoo.init({
        envId: 'https://commentxxx.jiewong.com/',
        el: '#tcomment',
        path: window.location.pathname,
        lang: 'zh-CN',
      });
    };
    document.body.appendChild(script);

      // 引入 CSS 文件
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = '/twikoo.css';
      document.head.appendChild(link);
    }, []);

  // return <div id="tcomment"></div>;
  return (
    <Box 
      id="tcomment"
      sx={{
        variant: `dividers.top`,
        mt: [3],
      }}
    />
  );
};

export default TwikooComments;

要使用，在页面中引用即可

import TwikooComments from './TwikooComments';
//其他代码
// 在模板中使用
<TwikooComments />

修改 twikoo.nocss.js 文件，删去 logo 返回 null 即可

https://twikoo.js.org/backend.html#%E7%A7%81%E6%9C%89%E9%83%A8%E7%BD%B2 ↩

为网站重新配置 twikoo 评论前后端

后端配置

前端

Footnotes