React Remix 项目添加 Utterances 评论功能

utterances 是一款基于 GitHub issues 的开源评论插件，在消息提醒易用性上有较好的表现。缺点：可能会出现加载慢或无法加载问题。

对接流程

在github上创建一个博客仓单（如有已有请跳过）

主要用于存储 评论数据

授权 utterances 访问仓库

访问 utterances app，点击 Install 授权仓库

将 utterances 嵌入页面

function Comments() {
  const ref = useRef<HTMLDivElement | null>(null);
  const scriptRef = useRef<HTMLScriptElement | null>(null);

  useEffect(() => {
    // 避免 react Strict Mode（严格模式）导致多次插入  
    if (scriptRef.current) {
      return;
    }
    scriptRef.current = document.createElement('script');
    const config = {
      src: 'https://utteranc.es/client.js',
      repo: '[owner/repo]',
      'issue-term': 'pathname',
      theme: 'github-light',
      crossOrigin: 'anonymous',
      defer: true,
    };

    Object.entries(config).forEach(([key, value]) => {
      scriptRef.current?.setAttribute(key, value as string);
    });
    ref.current?.append(scriptRef.current);
  }, []);

  return (
    <div ref={ref}></div>
  );
}

对应配置说明 查看

参考