웹사이트에 댓글 섹션을 무료로 추가하는 방법은 무엇입니까?

6615 단어 supportjavascriptcommunityreact
우리는 항상 블로그, 개인 포트폴리오, 일부 공식 웹사이트 등에 댓글을 추가하고 싶습니다. 하지만 백엔드 데이터베이스를 만드는 대신 모든 종류의 웹사이트에 무료로 댓글 섹션을 추가하는 매우 쉽고 간단한 방법이 있습니다. 다음과 같은 몇 가지 조건이 있습니다.

그럼 시작하겠습니다...
  • 발화가 정확히 무엇입니까?

    • 답변: GitHub 문제에 기반한 가벼운 댓글 위젯입니다. 블로그 댓글, 위키 페이지 등에 GitHub 문제를 사용하세요!
  • 오픈 소스. 🙌
  • 추적 없음, 광고 없음, 항상 무료. 📡🚫
  • 잠금이 없습니다. GitHub 문제에 저장된 모든 데이터. 🔓
  • GitHub를 지원하는 css 툴킷인 Primer로 스타일이 지정되었습니다. 💅
  • 어두운 테마. 🌘
  • 경량. 바닐라 타입스크립트. 글꼴 다운로드 없음, JavaScript
    에버그린 브라우저용 프레임워크 또는 폴리필. 🐦🌲
  • HTML 웹사이트에 발화를 추가하는 방법을 알려드리겠습니다.

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


    HTML 파일에 다음 코드 스니펫을 추가합니다.
    이렇게..👇

    <html>
   <head>
        <title>Add COMMENT using Utterance</title>
   </head>
   <body>


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


    다음은 다음과 같은 몇 가지 매개변수입니다.
    1.src
    2. 레포
    3.이슈
    4.테마
    5.크로스오리진
    6.비동기

    1.src:

    Src는 기본적으로 Utterance에서 제공하는 스크립트입니다.

    2.레포:

    REPO는 G I T H U B 저장소를 의미합니다.

    좋아요: yourgithubusername/repositoryname
    따라서 다음과 같이 표시됩니다.

    repo = "github사용자 이름/저장소 이름"

    3. 문제:

    "블로그 게시물과 GitHub 문제 간의 매핑"에 불과합니다.



    4. 테마:

    사용자에게 댓글 상자의 다른 모양과 느낌을 제공하기 위한 것입니다.

    github의 테마와 동일합니다.

    다음은 몇 가지 옵션입니다.
    * github 빛
    * 깃허브 다크
    * 박시 라이트
    * 깃허브 다크 오렌지
    * 그리고 더 많은 ...

    5.크로스오리진:

    이 특정 방법에 대해서만 원본 간 리소스 공유를 활성화합니다. 그리고 기본적으로 "익명"으로 유지됩니다.

    6.비동기:

    비동기 동작이 있으므로 기본적으로 true입니다.

    이것이 의미하는 바입니다. 이러한 방식으로 정적 HTML 웹 사이트에서 Utterance를 사용할 수 있습니다.



    2. 이제 REACT 웹사이트 또는 웹 애플리케이션에서 Utterances를 사용하는 방법을 살펴보겠습니다.

    Reactjs의 경우

          It is also very Simple.

    새 반응 앱을 만듭니다.
    npm install create-react-app@latest your-app-name
    이제 앱을 설치한 후 다음과 같이 앱에 cd해야 합니다.
    cd your-app-name
    src 폴더에서 comments.js라는 새 파일을 만듭니다.

    comment.js 파일에 다음 코드를 붙여넣습니다.

    import React, { Component } from 'react'

export default class Comments extends Component {
    constructor(props) {
        super(props);
        this.commentBox = React.createRef();
    }

    componentDidMount() {
        let scriptEl = document.createElement("script");
        scriptEl.setAttribute("src", "https://utteranc.es/client.js")
        scriptEl.setAttribute("crossorigin", "anonymous")
        scriptEl.setAttribute("async", true)
        scriptEl.setAttribute("repo", "yourgithubusername/repositoryname")
        scriptEl.setAttribute("issue-term", "pathname")
        scriptEl.setAttribute("theme", "github-light")
        this.commentBox.current.appendChild(scriptEl)
    }

    render() {
        return (
            <div style={{ width: '100%' }} id="comments">
                <div ref={this.commentBox} ></div>
            </div>
        )
    }
}


    코드를 이해합시다.

    *먼저 우리는 React와 React.Component 즉, {Component}를 가져옵니다.

    *

    
constructor(props) {
        super(props);

    }


    In React, constructors are mainly used for two purposes: It used for initializing the local state of the component by assigning an object to this. state. It used for binding event handler methods that occur in your component.


  • 이 코드는 이해하기 매우 쉽습니다. this.commentBox = React.createRef();

    • It means, createRef() method is used to access any DOM element in a component and it returns a mutable ref object which will be persisted as long as the component is placed in the DOM.



    *componentDidMount() 메소드

    This method allows us to execute the React code when the component is already placed in the DOM (Document Object Model).(Here our DOM element includesdocument.createElement("script") ). This method is called after the component is rendered.



    아래 코드 줄은 Plain JS로 작성되었습니다. 설명은
    위의 모든 사항을 설명한 것과 동일합니다.

    간단히 말해서 setAttribute("parentaAttribute","childAttribute")
    예: scriptEl.setAttribute("src", "https://utteranc.es/client.js")
    scriptEl.setAttribute("src", "https://utteranc.es/client.js")
        scriptEl.setAttribute("crossorigin", "anonymous")
        scriptEl.setAttribute("async", true)
        scriptEl.setAttribute("repo", "yourgithubusername/repositoryname")
        scriptEl.setAttribute("issue-term", "pathname")
        scriptEl.setAttribute("theme", "github-light")


    이 단계를 완료한 후.

    마지막으로 파일 위치에서 이 파일(Comments.js)을 가져와야 합니다.



    이 모든 단계를 수행한 후.
    npm start 반응 응용 프로그램을 시작합니다.

    그리고 마지막으로 댓글 상자를 얻습니다. 댓글을 추가하려면 github 계정으로 로그인하기만 하면 됩니다. 그리고 이모티콘을 사용하여 반응을 줄 수 있습니다. 좋아요 👇



    이것이 출력으로 얻을 수 있는 것입니다.



    UTTERANCE OFFICIAL WEBSITE
    React JS에서 BMI 계산기를 구축하는 방법 - useState Hook & Conditionals | 초보자
    스타일 구성 요소

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage