GitHub 질문을 사용하여 블로그에 의견 추가

당신의 개인 블로그에 논평을 발표하는 것은 독자와 상호작용을 돕고 그들로 하여금 자신도 경청을 받게 할 수 있다.그것들은 당신의 블로그 게시물을 일방적인 상호작용이 아니라 활기차게 느끼게 할 수 있다.
물론 당신의 블로그에 논평을 발표하는 것은 악당들의 스팸메일과 공격적인 평론 같은 부정적인 영향을 미칠 수 있다.따라서 트롤과 로봇을 막기 위해 사용자 로그인 기능이 없는 매우 개방적인 평론 시스템을 사용하는 것을 권장하지 않는다.
나는 일부 사람들이 Disqs를 사용하는 것을 본 적이 있는데 이것은 장점과 단점(예를 들어 광고나 가격)이 있다. 나도 일부 개발자들이 자신의 Firebase 기반 해결 방안을 구축하는 것을 본 적이 있다.하지만, 나는 간단하면서도 공짜인 것을 원한다. 보기에도 괜찮다.
나는 Tania Rascia의 블로그에서 약 Utterances을 읽었다. 그녀는 내가 극력 추천한 훌륭한 블로그를 가지고 있다. 나는 내가 새로 만든 사이트에서 그것을 신속하게 실현하는 것이 얼마나 기억에 남는지에 대해 매우 기억에 남는다.나는 모두 20분 동안 그것을 나의 게이츠비 블로그와 통합시켰기 때문에, 당신도 쉽게 블로그에 추가할 수 있도록 본고에서 따르는 절차를 설명할 것입니다.

무엇이 말입니까?
이것은 당신의 블로그에 작은 위젯으로GitHub 문제를 블로그 평론으로 저장하는 무료 소스 프로그램입니다.
새 게시물에 대한 새로운 질문을 만들고, 게시물에 있는 모든 댓글을 그 자체에 대한 댓글로 삼을 것입니다.너도 GitHub에 대한 평론을 편집할 수 있다.깔끔해요.

나의 블로그는 언론을 발표하기에 적합합니까?
Eutrances는 GitHub 문제에 논평을 저장하기 때문에 본고는 귀하의 블로그가 통상적으로 GitHub 계정을 가진 개발자를 대상으로 한다고 가정합니다.
또한, 만약 당신의 블로그가 매우 인기가 있고 데이터도 매우 높다면 이 해결 방안을 사용하는 것은 당신에게 적합하지 않을 것입니다. 왜냐하면 이 작은 위젯은GitHub API의 속도 제한에 도달할 수 있고 당신의 평론 기능도 계속 작동하지 않기 때문에 장래에 이 점을 기억해야 합니다.

어떻게 보이세요?
post on my blog의 끝까지 스크롤하기만 하면 됩니다.의견 및 질문 here을 볼 수 있습니다.

당신의 블로그에 말을 추가합니다
표준 Html Js 웹 사이트에 언어를 추가하려면 간단한 스크립트만 추가하면 됩니다.언어 사이트는 이 점을 실현하는 간단한 절차를 기록했다.

// example of embedding this in a non-react app

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        label="comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

그러나 이 연습은 리얼리티 기반 블로그(예를 들어 Gatsby나Next)에 말을 추가하는 방법을 소개할 것이다.
다음은 다음 단계에 대한 요약입니다.

은 GitHub에 공통 저장소를 설치합니다.

은 Repo에 Utterments GitHub 애플리케이션을 설치합니다.

주석에 react 구성 요소를 추가합니다.

은posts 구성 요소에 useEffect을 추가하여 작은 위젯을 나타냅니다.

1단계: GitHub에서 공통 저장소 설정
기존 환매 협의를 사용하거나 새로운 빈 환매 협의를 만드는 두 가지 선택이 있습니다.어떤 방식이든 공개적으로 환매해야 한다.새 리콜 프로토콜을 만들면 오염 코드 리콜 프로토콜에 주석을 달 수 있습니다. (주석에 라벨을 추가할 수 있지만.)
이 평론 저장소에서 당신은 utterances.json 파일을 제출하고 사이트의 영역을 추가할 수 있습니다.이것은 다른 권한이 부여되지 않은 사이트에서 귀하의 평론 회답을 사용하는 것을 방지할 것입니다. 만약 누군가가 귀하의 사이트를 복제하고 언어 스크립트를 변경하는 것을 잊어버리면 (아래 4단계에서 추가할 것입니다) 이런 상황이 발생할 수 있습니다.

//utterances.json

{
  "origins": [
    "https://yourDomain.tld"
  ]
}

Note: The above file gets committed in the same repository you are using for the comments, not in your blog repository.

2단계: Repo에 언어 GitHub 어플리케이션 설치
재구매 계약을 사용하기로 결정한 후에는 utterances GitHub app으로 이동하여 저장소에 설치할 수 있습니다.
선택한 저장소에 대해서만 읽기와 쓰기를 수행할 수 있도록 애플리케이션에 필요한 권한만 부여하면 3단계를 계속할 수 있습니다.

3단계:comments 컨테이너에 react 구성 요소 만들기
현재, 우리는 모든 것을 준비했다. 우리는 블로그에 새로운 구성 요소를 만들고, 우리가 논평을 통합하고 싶은 곳이라면 어디든지 그것을 사용할 수 있다.

//components/Comment.js

import React from 'react'

const Comment = React.forwardRef((props, commentBox) => {
  return <div ref={commentBox} className="comments" />
});

export default Comment;

따라서 빈 div를 만들 뿐입니다. 그러나 중요한 것은 ref={commentBox}을 인용하여 이 div에 전달하는 것입니다. React forwarding refs은 div DOM 요소에 대한 인용을 얻을 수 있도록 합니다. 다음 단계에서 사용할 것입니다.

4단계: 게시물 템플릿에 설명 구성 요소 사용
마지막 단계에서, 우리는 주석이 표시되기를 원하는 곳에 Comment 구성 요소를 통합해야 한다.이 예에서는 Post Footer 구성 요소에서 사용합니다.포스터 템플릿 파일에서 직접 사용할 수도 있고 원하는 곳에서 사용할 수도 있습니다.

In a rush: Jump to the end for the final code of this step.

먼저 상위 어셈블리 PostFooter.js에 ref를 생성합니다.

// PostFooter.js

import React from 'react'

const PostFooter = () => {

    const commentBox = React.createRef();

    return (
        // ...
    )
}

export default PostFooter;

이후에 구성 요소 마운트에 스크립트 요소를 만드는 useEffect을 추가합니다.나는 모든 속성의 값을 설명하기 위해 주석을 추가했다.

useEffect(() => {
  const commentScript = document.createElement('script')

  commentScript.async = true
  commentScript.src = 'https://utteranc.es/client.js'

  // define the name of the repository you created here as 'owner/repo'
  // or import it from your config file if you have one.
  commentScript.setAttribute('repo', siteConfig.commentsRepo)

  // define the blog post -> issue mapping (e.g. page pathname, page url).
  // here the issues will be created with the page pathname as the issue title.
  commentScript.setAttribute('issue-term', 'pathname')

  // define a custom label that you want added to your posts.
  commentScript.setAttribute('label', 'blog-comment')

  // define if you want to use dark or light theme.
  commentScript.setAttribute('theme', 'github-light')

  commentScript.setAttribute('crossorigin', 'anonymous')

  // we will append this script as a child to the ref element we have created above
  if (commentBox && commentBox.current) {
      commentBox.current.appendChild(commentScript)
    } else {
      console.log(`Error adding utterances comments on: ${commentBox}`)
   }

  }, [])

블로그에 어둠/광명 테마 전환기가 있다면 사용자의 취향에 따라 테마를 변경할 수 있도록 수정할 수 있습니다.주제 상하문을 도입합시다. 이것은 당신의 사이트의 다른 곳에서 이루어져야 합니다. (나는 지금 주제 상하문을 어떻게 실현하는지 상세하게 소개하지 않을 것입니다. 왜냐하면 이것은 본문과 무관하기 때문입니다.)

  const { theme } = useThemeContext();

  useEffect(() => {

    const commentsTheme = theme && theme === 'dark'
            ? 'github-dark'
            : 'github-light'

    commentScript.setAttribute('theme', commentsTheme)

   // ...

 }, [theme])

Notice that we added theme as the second argument to the useEffect function. This allows triggering the useEffect function every time the user toggles the theme.

그러나 함정이 하나 있습니다. 왜냐하면 우리는 이useffect()를 정리해야 하기 때문입니다.그렇지 않으면, 주제를 바꿀 때마다, 우리는 여러 개의 평론 상자를 가지고 있다.청소를 위해서는 useEffect 함수에서 함수를 되돌려야 합니다. 이 함수에서dom에서 언어 요소를 간단하게 삭제할 수 있습니다.

  useEffect(() => {

  // ...

  const removeScript = () => {
       commentScript.remove();
       document.querySelectorAll(".utterances").forEach(el => el.remove());
   };

  // clean up on component unmount
   return () => {
     removeScript();
   };

 }, [theme])

마지막으로, 3단계에서 생성한 Comment 구성 요소를 렌더링하고 commentBox 참조를 전달합니다.

    ...

    return (
        <>
          <Comment ref={commentBox} />
        </>
      )

    ...

게시물 템플릿 또는 페이지에서 PostFooter 구성 요소를 직접 사용할 수 있습니다.

4단계 최종 코드
다음은 PostFooter.js 파일의 최종 정리 코드입니다.

// PostFooter.js

import React from 'react'
import Comment from './components/Comment'
import {useThemeContext} from '../context/theme-context';
import {siteConfig} from '../utils/site-config';

const PostFooter = () => {

  const commentBox = React.createRef();

  const { theme } = useThemeContext();

  useEffect(() => {
    const commentScript = document.createElement('script')
    const commentsTheme = theme && theme === 'dark'
            ? 'github-dark'
            : 'github-light'
    commentScript.async = true
    commentScript.src = 'https://utteranc.es/client.js'
    commentScript.setAttribute('repo', siteConfig.commentsRepo)
    commentScript.setAttribute('issue-term', 'pathname')
    commentScript.setAttribute('id', 'utterances')
    commentScript.setAttribute('label', 'comment')
    commentScript.setAttribute('theme', commentsTheme)
    commentScript.setAttribute('crossorigin', 'anonymous')


    if (commentBox && commentBox.current) {
      commentBox.current.appendChild(commentScript)
    } else {
      console.log(`Error adding utterances comments on: ${commentBox}`)
    }

    const removeScript = () => {
      commentScript.remove();
      document.querySelectorAll(".utterances").forEach(el => el.remove());
    };

    return () => {
      removeScript();
    };

  }, [theme])

  return (
    <>
      <Comment ref={commentBox} />
    </>
  )
}

export default PostFooter;

이 기능을 실현한 후, 당신의 블로그에는 평론 기능이 통합되어야 합니다.이게 다야.
읽어주셔서 감사합니다.나는 네가 이 문장이 매우 유용하다고 생각하기를 바란다.
사진 출처:
원형 아이콘 PNG는 Pngtree.com에서 평면 ***로 설계되었습니다.
읽은 거 좋아해요?나는 방금 abba.dev에 나의 새 블로그를 시작했다.그곳에 가서 나의 newsletter에 가입하거나 나를 따라 전창고 소프트웨어 개발자로서 쓴 새로운 것을 계속 업데이트해라.JS, nodeJs, AWS, 시스템 디자인에 대한 댓글을 더 기대할 수 있습니다. 더 많을 수도 있습니다.