Gatsby打造的博客已经很不错了，但是缺少一个评论功能。

本文简单介绍如何集成Disqus评论服务到你的博客站点。

How To

首先，添加react-disqus-thread组件。

yarn add react-disqus-thread

之后，新建一个Comments的React组件。

const React = require('react');
const ReactDisqusThread = require('react-disqus-thread');

class Comments extends React.Component{

    constructor(props) {
        super(props);
    }
    
    handleNewComment (comment) {
        
    }

    render () {
        const id = `smilingleo/${window.location.pathname}`;
        return (
            <ReactDisqusThread
                shortname="smilingleo"
                identifier={id}
                title={this.props.title}
                onNewComment={this.handleNewComment}/>
        );
    }
};

export default Comments;

注意:

• identifier需要是唯一的，这里我用了smilingleo作为前缀，加上pathname。
• onNewComment的响应函数中，可以做一些有意思的东西，比如给你的IM发一条消息，尝试了Slack Webhook，可惜不支持CORS.

最后，在templates/blog-post.js文件中添加：

<hr />
<Comments title={title} />

搞定.

References

1. React Disqus thread component