개발자
류준열

Utterances 이용한 댓글기능 추가

v1.1.0

Utterances를 이용하여 댓글기능을 추가했다.

새롭게 개발중인 blog-server 레포지토리에 Utterances를 연동하고 스크립트를 blog의 게시글 코드에 삽입헀다.

Utterances 스크립트

위 스크립트를 코드내에 복붙하니 빨간줄이 떠서 바꿔주었다.

에러

// 출처: https://paulcjy.github.io/blog/GitHub-Pages-Next.js/19-nextjs-comment-utterances

"use client";

import React from "react";

const CommentScript = () => {
  return (
    <section
      ref={(elem) => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.setAttribute("repo", "ryu9663/blog-server");
        scriptElem.setAttribute("issue-term", "pathname");
        scriptElem.setAttribute("theme", "github-light");
        scriptElem.setAttribute("label", "blog-comment");
        scriptElem.crossOrigin = "anonymous";
        elem.appendChild(scriptElem);
      }}
    />
  );
};

export default CommentScript;

CommentScript를 넣어준 자리에 iframe이 생겼다.

iframe