본문으로 건너뛰기

"gitment" 태그로 연결된 1개 게시물개의 게시물이 있습니다.

모든 태그 보기

· 약 2분

블로그에 붙힐만한 댓글 라이브러리로는 Disqus, Commento, livere 등이 있지만 깃헙 페이지라 Gitment를 사용하고 싶었다.

사전 준비

Github > Settings > Developer settings > OAuth Apps 메뉴로 들어가 새로운 OAuth App 을 만들어준다.

준비

Client ID 와 Client Secret 을 저장해 놓고 Authorization callback URL 은 Homepage URL 과 같은 주소를 입력한다.

# Application name
GracefulLight

# Homepage URL
https://gracefullight.github.io

# Application description
GracefulLights Blog

# Authorization callback URL
https://gracefullight.github.io

소스 추가

원하는 페이지에 소스를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.core.min.js"></script>
<section class="comments" id="comments">
<div id="gitment_thread"></div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/style/default.css"
/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
id: "Gitment 를 구분할 아이디 (ex: 페이지 제목 또는 포스팅 일시)",
owner: "github 아이디 (ex: gracefullight)",
repo: "repository 명 (ex: gracefullight.github.io)",
oauth: {
client_id: "위에서 발급 받은 client_id",
client_secret: "위에서 발급 받은 client_secret",
},
});
gitment.render("gitment_thread");
</script>
</section>

gitment.min.js 파일은 없으므로, 직접 minify 해서 사용하면 된다. bluebird (promise) core 를 추가한 이유는, IE 에서 gitment 를 지원해야하기 때문이다.

옵션 관리

위 4개 옵션 외에 추가로 옵션을 더 줄 수 있다. desc 와 labels 정도가 추가되면 좋을 것 같다.

댓글 쓰기

깃허브 아이디로 로그인한 뒤 Initialize Comments 를 누르고 댓글을 작성하면 된다.