Skip to main content

8.How to add Disqus-forum to docusaurus

· 2 min read
chasen

An image from the static

Picture from: details

引出​

今天看到别人的博客有评论功能，很好奇是怎么加上的。然后看到一个sass服务，很多博客模板都可以集成。https://disqus.com/ 这个控件可以帮忙解决这个问题， 基本的评论功能，自带 twitter facebook 转发。如果要增加表情包需要升级付费。但是我个人使用当然免费就可以了😄。

网站注册步骤​

1、首页点击 GET STARTED 按钮， 没注册先注册先。

2、选择 "I want to install Disqus on my site"

3、填写 Website Name 注意：这个比较重要，稍后在docusaurus控件中需要用到这个name，类似于id,可以谁便写。 备份 Website Name

4、然后就是选择套餐，选择 Basic 即可

docusaurus 安装控件​

1、安装 disqus-react

yarn add disqus-react

2、yarn run swizzle @docusaurus/theme-classic DocItem --danger

shortname 为上次备份的 Website Name

import { DiscussionEmbed } from 'disqus-react'

function BlogPostPage(props) {
  ...
  const { slug, title, description, nextItem, prevItem } = metadata
  ...
  return (
    ...
    // after Edit this Page block
    <DiscussionEmbed
        shortname='Website Name'
        config={{
          url: slug,
          identifier: slug,
          title: title,
          language: 'en_US',
        }}
      />
    // before nextItem
    ...
  )
}

大功告成。

Reference​

https://madrus4u.com/blog/blog-comments https://zenahr.com/docs/Random%20miniguides/Add%20Disqus%20to%20Docusaurus/