React遇到disqus

本文是填坑之作

步骤概述

1. 注册Disqus 账号，新建一个 site。
2. React 工程安装disqus-react组件，配置组件。

注册账号

注册的过程就不详细说了，就是注册完了之后要去对应 site 设定Website URL字段

设置菜单的路径位于

https://[你的siteShortname].disqus.com/admin/settings/general/

安装和配置 disqus-react

用 yarn 安装依赖

yarn add disqus-react

然后配置页面组件，本工程为例，页面组件在src/components/BlogPostLayout.tsx 重点是NEW_CODE标记的

import React from 'react';
import {Link, useCurrentRoute, useView} from 'react-navi';
import {MDXProvider} from '@mdx-js/react';
import siteMetadata from '../siteMetadata';
import ArticleMeta from './ArticleMeta';
import Bio from './Bio';
import styles from './BlogPostLayout.module.css';
import Disqus from 'disqus-react'; // NEW_CODE

interface BlogPostLayoutProps {
    blogRoot: string;
}

function BlogPostLayout({blogRoot}: BlogPostLayoutProps) {
    let {title, data, url} = useCurrentRoute();
    let {connect, content, head} = useView()!;
    let {MDXComponent, readingTime} = content;
    /* NEW_CODE start */
    const disqusShortname = 'miaocode';
    const disqusConfig: any = {
        url: 'https://mzvast.github.io' + url.pathname,
        identifier: data.slug,
        title: title
    };
    /* NEW_CODE end */
    console.log('useCurrentRoute::title, data, url', title, data, url);
    // The content for posts is an MDX component, so we'll need
    // to use <MDXProvider> to ensure that links are rendered
    // with <Link>, and thus use pushState.
    return connect(
        <>
            {head}
            <article className={styles.container}>
                <header className={styles.header}>
                    <h1 className={styles.title}>
                        <Link href={url.pathname}>{title}</Link>
                    </h1>
                    <ArticleMeta
                        blogRoot={blogRoot}
                        data={data}
                        readingTime={readingTime}
                    />
                </header>
                <MDXProvider
                    components={{
                        a: Link,
                        wrapper: ({children}) => (
                            <div className={styles.content}>{children}</div>
                        )
                    }}
                >
                    <MDXComponent />
                </MDXProvider>
                {/* NEW_CODE start
                 */}
                <Disqus.DiscussionEmbed
                    shortname={disqusShortname}
                    config={disqusConfig}
                />
                {/* NEW_CODE end
                 */}
                <footer className={styles.footer}>
                    <h3 className={styles.title}>
                        <Link href={blogRoot}>{siteMetadata.title}</Link>
                    </h3>
                    <Bio className={styles.bio} />
                    <section className={styles.links}>
                        {data.previousDetails && (
                            <Link
                                className={styles.previous}
                                href={data.previousDetails.href}
                            >
                                ← {data.previousDetails.title}
                            </Link>
                        )}
                        {data.nextDetails && (
                            <Link
                                className={styles.next}
                                href={data.nextDetails.href}
                            >
                                {data.nextDetails.title} →
                            </Link>
                        )}
                    </section>
                </footer>
            </article>
        </>
    );
}

export default BlogPostLayout;

值得注意的是，disqusConfig 的设置，其中 url 必须跟步骤 1 中配置的相匹配，而 identifier 只要保证文章之间唯一即可。

总结

mdx和React天生一对，相信在disqus等生态的加持下，会绽放出更强的生命力。