Smilingleo's Blog

为你的Gatsby博客添加评论功能

March 12, 2018

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

Prev: 为Gatsby博客添加分页功能

Next: 转用Gatsby打造基于github的博客站点


Blog comments powered by Disqus.

© Wei Liu | 2024