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 Comment Thread
• Demo Recent Comment List

• jQuery - for making Ajax requests and manipulating DOM.
• markdown-js - for rendering markdown.
• timeago.js - for formatting time labels.
• spin - for displaying a spinning indicator(optional).

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

<!-- javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js">/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown.js/0.5.0/markdown.min.js">/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/3.0.2/timeago.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="path_to_comment_js/comment.js"></script>

Create a Github repo for hosting your comments.

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.

• Register a Github OAuth application .
• Register an OSChina OAuth application(alternatively).

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 .

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:

• type: the site as the backend. Currently supports Github and OSChina.
• user: your site's user account.
• repo: your repo for comment issue tracking.
• no_comment: tips when no comments are fetched.
• go_to_comment: text of the "go to comment" button.
• issue_title: the corresponding issue title to your page. Alternatively you can use issue_id.
• issue_id: the corresponding issue id to your page. Alternatively you can use issue_title.
• btn_class: css class name for the "go to comment" button.
• comments_target: target for displaying comment thread.
• loading_target(optional): target for displaying loading a spinning indicator.
• client_id(optional but recommended): the client id of your OAuth App.
• client_secret(optional but recommended): the client secret of your OAuth App.

example:

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:

• type: the site as the backend. Currently supports Github and OSChina.
• user: your site's user account.
• repo: your repo for comment issue tracking.
• recent_comments_target: target for displaying recent comment list.
• count(optional): the maximize length of the comment list. Default value is 5.
• client_id(optional but recommended): the client id of your OAuth App.
• client_secret(optional but recommended): the client secret of your OAuth App.

example: