comment.js

[Archived] A tiny comment system based on Github issue comments.

View the Project on GitHub

comment.js

GitHub release license

IMPORTANT!!! This project is archived and will no more be mantained! Please use gitalk or gitment instead.

Table of Contents

Pure JavaScript to make a Disqus-like comment system. Use issue system of code hosting sites like Github/OSChina as the backend. Easily to use. Free for running.

Demo

Dependencies

How to use

For people using Hexo as static blog generator, they can try a theme hexo-theme-freemind with comment.js as the default comment system that works out of box.

0. Add stylesheets and JavaScript files

<!-- stylesheet -->
<link rel="stylesheet" href="path_to_comment_css/comment.css">

<!-- for IE support -->
<!--[if lte IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<![endif]-->

<!-- javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.min.js"></script>

<!-- loading spin indicator(optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>

<!-- syntax highlighting(optional) -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script type="text/javascript">
  marked.setOptions({
  highlight: function (code, lang) {
     return hljs.highlightAuto(code).value;
  }
  });
  function Highlighting(){
    var markdowns = document.getElementsByClassName('markdown');
    for(var i=0;i<markdowns.length;i++){
       if(markdowns[i].innerHTML) markdowns[i].innerHTML =marked(markdowns[i].innerHTML);
    }
  }
  window.addEventListener('DOMContentLoaded', Highlighting, false);
  window.addEventListener('load', Highlighting, false);
</script>

<!-- comment.js -->
<script src="path_to_comment_js/comment.js"></script>

1. Create Github Repo

Create a Github repo for hosting your comments.

2. Register an OAuth App

To avoid abused API calling, Github API (and the same as OSChina API) has Rate Limiting. To enlarge the limit you can register an OAuth application.

After that, you will get a client id as well as a client secret.

Tips: When you registering the App, the Authorization callback URL can be assigned as your site address. For example http://hahack.com .

3. Comment Thread

In this section I will describe on how to generate a comment thread of a certain page for your site.

Firstly, write a div for placing your comment thread.

<div id="comment-thread"></div>

Secondly, write a div for placing a spinning indicator(optional):

<div id="loading-spin"></div>

Thirdly, call getComments() function to fetch comment thread and display them to the page.

<script type="text/javascript">
   var opt = {
       type: "github",
	   user: "wzpan",
	   repo: "comment.js",
	   no_comment: "No comments yet. Press the button and go to comment now!",
	   go_to_comment: "Go to comment",
	   issue_id: "1",
	   btn_class: "btn",
	   comments_target: "#comment-thread",
	   loading_target: "#loading-spin",
	   client_id: "xxxxxx",
	   client_secret: "xxxxxx"
   };
   getComments(opt);
</script>

parameters explaning:

example(You won’t see this from README):

4. Recent Comment List

In this section I will describe on how to generate a recent comment list for your site.

Firstly, write a div for placing the recent comment list.

<div id="recent-comments"></div>

Secondly, call getRecentCommentsList() function to fetch a comment list and display them to the page.

<script type="text/javascript">
   var opt = {
       type: "github",
	   user: "wzpan",
	   repo: "comment.js",
	   recent_comments_target: "#recent-comments",
	   count: 5,
	   client_id: "xxxxxx",
	   client_secret: "xxxxxx"
   };
   getRecentCommentsList(opt);
</script>

parameters explaning:

example(You won’t see this from README):

Browser support

All of the above browsers should support using comment.js, although I haven’t fully test all of them.

How to contribute

Alipay Wechat Pay