어떻게 게이츠비 블로그에 평론을 추가합니까

당신의 게이츠비 블로그에는 평론 시스템이 있습니까?만약 그렇지 않다면, 너는 놓칠 수도 있어!평론은 독자들의 참여도를 높이고 질문을 할 수 있는 기회를 주며 블로그 글에 유용한 정보를 추가하는 데 도움이 된다.
게이츠비는 상자를 열면 바로 사용할 수 있는 평론을 제공하지 않지만, 두 개의 독립된 평론 시스템 utterances 과 GraphComment 을 사용하는 것이 얼마나 쉬운지 보여 드리겠습니다.

당신의 게이츠비 블로그에 댓글과 말을 추가하세요

말은 어떻게 작동합니까?

utterances는 Github 위에 구축된 리뷰 시스템입니다.사용자는 먼저 Github 계정의 인증을 거쳐야 웹 사이트에 의견을 달 수 있습니다.

선택한 Github 재구매 계약에 새로운 질문이 생성되며, 설명이 거기에 나타납니다.

같은 페이지에 다른 설명을 남기면 같은 Github 질문에 설명이 추가됩니다.
만약 다른 개발자들이 주로 읽는 블로그를 운영하고 있다면, Github 계정을 가지고 있을 가능성이 높기 때문에, Github와 이러한 통합은 언어를 좋은 선택으로 만들 수 있다.

말을 세우다

utterances documentation의 설정 절차에 따라 조작할 수 있습니다.즉,

Github에 의견을 달 수 있는 새 공용 저장소를 만듭니다.

로 이동하여 저장소에 설치합니다.

언어 Github 응용 게이츠비 블로그에 평론 구성 요소 추가

다음과 같이 사이트에 추가할 수 있는 스크립트가 제공됩니다.

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

우리는 React를 사용하기 때문에 이 스크립트를 직접 삽입할 수 없습니다.대신 Comments라는 반응 어셈블리를 만듭니다.

// src/components/comments.js
import React, { useEffect } from 'react';

const COMMENTS_ID = 'comments-container';

const Comments = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://utteranc.es/client.js';
        script.setAttribute('repo', 'emgoto/emgoto-comments');
        script.setAttribute('issue-term', 'pathname');
        script.setAttribute('theme', 'dark-blue');
        script.setAttribute('crossorigin', 'anonymous');
        script.async = true;

        const comments = document.getElementById(COMMENTS_ID);
        if (comments) comments.appendChild(script);

        // This function will get called when the component unmounts
        // To make sure we don't end up with multiple instances of the comments component
        return () => {
            const comments = document.getElementById(COMMENTS_ID);
            if (comments) comments.innerHTML = '';
        };
    }, []);

    return (
        <div id={COMMENTS_ID} />
    );
};

export default Comments;

위에 붙인 코드만 복사하면 됩니다. repo 줄을 주석 저장소로 변경해야 합니다.
그 후에 블로그 글을 보여주는 곳에 새 구성 요소를 놓을 수 있다.각 블로그 게시물 페이지에 템플릿 파일이 있기 때문에 이 파일의 아래쪽에 템플릿 파일을 배치합니다.

// src/templates/blog-post.js
const BlogPost = () => (
    <>
        // Code to render blog post content
        <Comments />
    </>
);

너 망했어!🎉 만약 에서 이 글을 읽고 있다면, 실행 중인 구성 요소를 아래로 스크롤해서 끝까지 볼 수 있습니다.

내 웹 사이트 주제화와 풍격화된 언어

언어는 어두운 모드와 밝은 모드 옵션을 포함한 7가지 다른 배색 방안을 제공합니다. 에서 모든 옵션을 직접 시도할 수 있습니다.
documentation page
iframe에서 언어가 나타나기 때문에 색 배열을 수정하기 위해 자신의 CSS를 추가할 수 없습니다.그래서 너는 반드시 사용할 수 있는 옵션을 선택해야 한다.만약 네가 정말로 네 블로그의 배색 방안을 견지하고 싶다면, 너도 홍보를 향상시켜 새로운 주제를 추가할 수 있다.
iframe는 .utterances 클래스 이름으로div로 포장되어 있기 때문에 그곳에서 포지셔닝 수정을 할 수 있습니다.말은 설명 구성 요소에 내장된 간격과 채우기가 있기 때문에 삭제하고 싶으면 다음과 같이 할 수 있습니다.

.utterances {
    margin: -16px 0;
    padding: 0 -4px;
}

GraphComment를 사용하여 게츠비에 설명 추가하기

의 작업 원리는 다른 평론 시스템, 예를 들어 Disqs와 유사하다.그것들은 당신을 위해 평론을 위탁 관리하고 사용자가 플랫폼에서 사용자 이름과 이미지를 가진 계정을 만들 수 있도록 합니다.그것들은 매달 100만 건의 데이터를 불러올 수 있는 무료 층을 제공했다.
GraphComment
익명 사용자도 논평을 할 수 있다.GraphComment 설정에서 이 익명의 댓글을 즉시 올릴지, 승인을 받은 후에 올릴지 선택할 수 있습니다.

Graph 설정Comment

GraphComment 계정의 경우 다음에 signing up에 사이트를 추가해야 합니다.
GraphComment는 다음과 같은 스크립트를 제공합니다.

<div id="graphcomment"></div>
<script type="text/javascript">
  window.gc_params = {
    graphcomment_id: 'emgoto',
    fixed_header_height: 0,
  };

  (function() {
    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
    gc.src = 'https://graphcomment.com/js/integration.js?' + Date.now());
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
  })();
</script>

React를 사용하고 있기 때문에 React 구성 요소로 변환해야 합니다.

import React, { useEffect } from 'react';

const COMMENTS_ID = 'graphcomment';

const Comments = () => {
    useEffect(() => {
        window.gc_params = {
            graphcomment_id: 'emgoto',
            fixed_header_height: 0,
          };

        const script = document.createElement('script');
        script.src = 'https://graphcomment.com/js/integration.js?' + Date.now();
        script.async = true;

        const comments = document.getElementById(COMMENTS_ID);
        if (comments) comments.appendChild(script);

        // This function will get called when the component unmounts
        // To make sure we don't end up with multiple instances of the comments component
        return () => {
            const comments = document.getElementById(COMMENTS_ID);
            if (comments) comments.innerHTML = '';
        };
    }, []);

    return <div id={COMMENTS_ID} />
};

export default Comments;

사이트를 추가할 때 사용 중인 IDgraphcomment_id가 변경되었는지 확인합니다.
그리고 새 <Comments /> 구성 요소를 렌더링하고 싶은 곳에 놓을 수 있습니다.

관리 페이지 주제화 및 스타일화된 그래픽 요소

내가 보기에GraphComment의 사용자 인터페이스는 말(Github 사용자 인터페이스 중복 사용)보다 좋지 않지만, 이것은 무료 서비스라는 것을 감안하면 나는 너무 많은 불평을 할 수 없다!
GraphComment는 사이트가 밝기 모드인지 어둡기 모드인지 확인하고 렌더링할 수 있는 지능적인 기능입니다.주제 색상을 선택할 수도 있습니다.

이 모든 것이 진정으로 하는 일은 페이지에 나타나는 강조색을 선택하는 것이다. (아래 화면 캡처에서 파란색이다.)

이 외에 사용자 정의 옵션을 사용할 수 없습니다.

주석 어셈블리에 셀 테스트 추가

언어 또는 GraphComment를 설정한 후 스크립트가 페이지에 표시되는지 확인하기 위해 유닛 테스트를 추가해야 합니다.

//src/components/comments.test.js
import React from 'react';
import { render } from '@testing-library/react';

import Comments from './index';

describe('Comments component', () => {
    test('should render comments script', () => {
        const { container } = render(<Comments />);
        const script = container.querySelector(
            // choose one of the following lines below
            // 'script[src="https://utteranc.es/client.js"]',
            // 'script[src^="https://graphcomment.com/js/integration.js"]',
        );
        expect(script).toBeTruthy();
    });
});

언어 vs discus(및 기타 경쟁사)

Disqs는 가장 유명한 평론 시스템으로 많은 사이트에서 사용된다.그러나 그것은 과거에 와 약간의 논쟁을 일으킨 적이 있다.이 때문에 디스커스를 놓치고 다른 해결 방안이 있는지 알아보기로 했습니다.
'언어' 는 독자가 Github 계정을 사용하여 평론을 남길 수 있기 때문에 개발자를 대상으로 하는 블로그를 운영한다면 이것은 좋은 해결 방안이다.다른 유형의 블로그에 대해서GraphComment는 내가 발견한 유일한 무료 층 (Disqs 포함하지 않음) 을 제공하는 옵션이다.
만약 비용을 지불하는 것에 개의치 않는다면, 예를 들면 affiliate links and injecting advertising code 또는 Commento 다른 옵션을 보는 것도 괜찮다.불행하게도, 시장에는 당신이 자신의 수요에 따라 디자인을 대량으로 맞춤형으로 제작할 수 있는 것이 없는 것 같다.가장 가까운 것은 FastComments일 것이다. 이것은 다양한 외관 설정을 제공한다.그들의 시스템은 매달 5달러부터 시작하여 매달 10만 번의 조회를 한다.

헤프 결론

당신의 게이츠비 블로그에 논평을 발표하는 것은 말이든 도형 내용이든 무장애 체험이다.개발자 블로그에 있어서 말은 좋은 선택이다. GraphComment는 확실히 더 많은 기능 (예를 들어 자동 조절과 키워드 필터) 을 제공했지만, 이것은 약간 원활하지 않은 UI를 대가로 한 것이다.
이 두 가지 옵션의 가장 큰 단점은 당신이 제공한 배색 방안과 디자인에만 한정되어 있기 때문에 평론 구성 요소가 사이트의 다른 부분에 비해 약간 부적합할 수 있다는 것이다.