발화로 Gatsby 사이트에 댓글을 추가하는 방법
다음은 TypeScript에서 내 gatsby 블로그에 대한 발화를 설정하는 방법입니다.
발화
Utterances는 GitHub 저장소를 저장소 및 API로 사용하는 자바스크립트 도구입니다. 이것은 정적 사이트에 이상적입니다.
사람들은 스팸이 큰 문제가 되지 않도록 댓글을 게시하기 위해 GitHub 계정에 로그인해야 합니다. 이는 Utterances가 대부분 개발자 청중이 있는 사이트에 적합하다는 것을 의미합니다.
데이터는 GitHub 저장소에 저장되기 때문에 실제로 데이터를 소유하고 있습니다! 이것은 Disqus와 같은 도구보다 훨씬 좋습니다.
Github에서 설정
공개 GitHub 리포지토리가 있어야 합니다. 내 블로그 콘텐츠는 비공개이므로 블로그 댓글에 대한 특정 저장소를 설정합니다.
방문하여 해당 리포지토리에 앱을 설치합니다.
https://github.com/apps/utterances
"설치"를 클릭한 다음 주석 GitHub 리포지토리를 선택합니다.
사이트에 UI 추가
컨트롤을 원하는 곳에 스크립트를 삽입해야 합니다. 이를 위해 구성 요소를 만들었습니다. 아래에서 각 설정이 어떻게 작동하는지 확인할 수 있습니다.
import React, { useEffect } from 'react'
export const Comments = () => {
const commentsInjectionRoot: React.RefObject<HTMLDivElement> =
React.createRef()
useEffect(() => {
if (commentsInjectionRoot.current?.children.length === 0) {
const scriptEl = document.createElement('script')
scriptEl.setAttribute('src', 'https://utteranc.es/client.js')
scriptEl.setAttribute('crossorigin', 'anonymous')
scriptEl.setAttribute('async', 'true')
scriptEl.setAttribute(
'repo',
'darraghoriordan/darragh-oriordan-com-comments'
)
scriptEl.setAttribute('issue-term', 'pathname')
scriptEl.setAttribute('theme', 'github-light')
commentsInjectionRoot.current?.appendChild(scriptEl)
}
}, [])
return (
<div className="container pt-8">
<h1 className="mt-0 mb-0 text-3xl font-normal leading-normal">
Comments
</h1>
<hr className="my-0" />
<div ref={commentsInjectionRoot} />
</div>
)
}
그런 다음 주석을 원하는 위치에 구성 요소를 추가합니다.
<Comments />
댓글 UI
요약
Utterances는 개발자 사이트에 댓글을 추가하는 쉬운 방법이며 모든 데이터를 소유하므로 위험이 낮습니다.
오늘 시도해 보세요! - https://utteranc.es/
Reference
이 문제에 관하여(발화로 Gatsby 사이트에 댓글을 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/darraghor/how-add-comments-to-your-gatsby-site-with-utterances-59d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)