hexo-theme-amane/layout/comment/valine.jsx

const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('../util/cache');

class Valine extends Component {
    render() {
        const {
            appId,
            appKey,
            notify,
            verify,
            placeholder,
            avatar = 'mm',
            avatarForce = false,
            meta = ['nick', 'mail', 'link'],
            pageSize = 10,
            visitor = false,
            highlight = true,
            recordIP = false
        } = this.props;
        if (!appId || !appKey) {
            return <div class="notification is-danger">
                You forgot to set the <code>app_id</code> or <code>app_key</code> for Valine.
                Please set it in <code>_config.yml</code>.
            </div>;
        }
        const js = `new Valine({
            el: '#valine-thread' ,
            notify: ${notify},
            verify: ${verify},
            appId: '${appId}',
            appKey: '${appKey}',
            placeholder: '${placeholder}',
            avatar: '${avatar}',
            avatarForce: ${avatarForce},
            meta: ${JSON.stringify(meta)},
            pageSize: ${pageSize},
            visitor: ${visitor},
            highlight: ${highlight},
            recordIP: ${recordIP}
        });`;
        return <Fragment>
            <div id="valine-thread" class="content"></div>
            <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
            <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
            <script dangerouslySetInnerHTML={{ __html: js }}></script>
        </Fragment>;
    }
}

module.exports = cacheComponent(Valine, 'comment.valine', props => {
    const { comment } = props;

    return {
        appId: comment.app_id,
        appKey: comment.app_key,
        notify: comment.notify,
        verify: comment.verify,
        placeholder: comment.placeholder,
        avatar: comment.avatar,
        avatarForce: comment.avatarForce,
        meta: comment.meta,
        pageSize: comment.pageSize,
        visitor: comment.visitor,
        highlight: comment.highlight,
        recordIP: comment.recordIP
    };
});