Gatsby에 Commento(또는 기타 주석)를 추가하는 방법

최근에 나는 Gatsby 사이트에서 코멘트를 추가하고 싶었습니다. 이 오픈 소스 시스템(Commento)을 찾았지만 오픈 소스를 지원하기 위해 유료 버전에 가입했습니다 :D.

원본 게시물: https://koalatea.io/gatsby-add-comments/

어쨌든, 나는 이것을 내 사이트에 추가하고 싶었습니다. 가입 후 다음 코드 스니펫을 받았습니다.

<script defer src="https://cdn.commento.io/js/commento.js"></script>
<div id="commento"></div>

시스템은 페이지를 자동으로 인식하고 해당 페이지에 대한 댓글만 가져와야 합니다. 그래서 저는 이것을 페이지에 추가하기만 하면 되지만 작동해야 하지만 작동하지 않았습니다.

이것은 내가 Gatsby에서 사용한 캐싱 때문일 수 있지만 이것은 React가 그것을 처리하는 방식 때문이라고 생각합니다. 이를 해결하기 위해 수동으로 스크립트를 삽입하는 주석 구성 요소를 만들었습니다.

import React, { useEffect } from 'react';

const Comments = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://cdn.commento.io/js/commento.js';
        script.async = true;

        const comments = document.getElementById('comments-container');
        if (comments) comments.appendChild(script);
    }, []);

    return (
        <>
            <div id="comments-container"></div>
            <div id="commento"></div>
        </>
    );
};

export default Comments;

게시물을 렌더링하는 템플릿으로 사용되는 post.jsx라는 파일이 있습니다. 그 파일에 다음을 추가하고 각 페이지에 주석을 추가합니다.

<Comments />