社会化评论系统 php,commentjs: Comment.js 是一个纯 JS 实现的静态站点评论系统，它的核心代码只有 400 行左右，却能够用来实现评论会话和最新评论列表的两个功能。比起已有的...

comment.js

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

jQuery - for making Ajax requests and manipulating DOM.

marked - for rendering markdown.

timeago.js - for formatting time labels.

highlight.js - for syntax highlighting(optional).

spin - for displaying a spinning indicator(optional).

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

marked.setOptions({

highlight: function (code, lang) {

return hljs.highlightAuto(code).value;

}

});

function Highlighting(){

var markdowns = document.getElementsByClassName('markdown');

for(var i=0;i

if(markdowns[i].innerHTML) markdowns[i].innerHTML =marked(markdowns[i].innerHTML);

}

}

window.addEventListener('DOMContentLoaded', Highlighting, false);

window.addEventListener('load', Highlighting, false);

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.

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

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

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);

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(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.

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

var opt = {

type: "github",

user: "wzpan",

repo: "comment.js",

recent_comments_target: "#recent-comments",

count: 5,

client_id: "xxxxxx",

client_secret: "xxxxxx"

};

getRecentCommentsList(opt);

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(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.

Chrome

Safari

Firefox

IE8+

How to contribute

A Github star outweights 1000 dollars(一星胜千元).

Pull requests are always welcome.

Your donation will encourage me to improve this project. Supports Alipay & Wechat Pay.

Alipay

Wechat Pay