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/