dumi2.0配置Github评论系统

本文正在参加「金石计划」

dumi 是一款不错的用于搭建门户网站、个人博客和文档分享的前端框架。展示给大家讨论的网站自然需要一个评论互动系统。今天就带大家搭建一个免费的评论系统吧！

giscus 是一个使用 GitHub Issues 实现评论系统的工具，可以集成在 dumi2.0 中，提供给读者在文档页面中留言。

要在 dumi2.0 中集成 giscus，可以按照以下步骤进行操作：

1. 在 GitHub 上配置你的 dumi 项目仓库

• 设置仓库属性为 public
• 打开 Discussions： settings -> generals -> Discussions

2. 在 giscus 的官方网站（giscus.app/) 上配置应用

输入框里输入 用户名/app_name，但是会报错，提示不满足条件。那是要在线上项目里安装一下：

链接：giscus

关联你的项目即可：

然后再试一下：

3. 配置映射关系

dumi 是自动识别路由的，这里使用pathname匹配即可：

下面的配置按照官网推荐即可，直到看到一段代码：

<script src="https://giscus.app/client.js"
    data-repo="UMCloud-FE/frontend-knowledge"
    data-repo-id="xxx"
    data-category="Announcements"
    data-category-id="xxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="bottom"
    data-theme="light_tritanopia"
    data-lang="zh-CN"
    crossorigin="anonymous"
    async>
</script>

4. 项目中使用

• 安装依赖：

yarn add @giscus/react

• 在想要评论的 markdown 文件下：

/**
 * compact: true
 * inline: true
 */
import React from 'react'
import Giscus from '@giscus/react';

export default function Main() {

  return (
    <section style={{ marginTop: '32px' }}>
      <Giscus
        id="comments"
        reactionsEnabled="1"
        emitMetadata="0"
        inputPosition="bottom"
        loading="lazy"
        src="https://giscus.app/client.js"
        repo="UMCloud-FE/frontend-knowledge"
        repoId="xxx"
        category= "Announcements"
        categoryId= "xxx"
        mapping= "URL"
        strict= "0"
        reactionsEnabled= "1"
        emitMetadata= "1"
        inputPosition= "bottom"
        theme="light_tritanopia"
        lang= "zh-CN"
        loading="lazy"
        crossorigin="anonymous"
        async={true}
      />
    </section>
  )
}

上面的参数使用官网生成的即可。

可以看到文章下面已经有了：

配置主题

dumi 是有亮色和暗色主题的，评论系统也要相应的设置。

import { usePrefersColor } from 'dumi';

...

const [color] = usePrefersColor();

配色有两种：

• light
• dark

查看官网，看到评论有这么几种颜色：

因此，可以这样配置组件：

...
<Giscus
    ...
    theme={color === 'dark' ? 'dark_tritanopia' : 'light_tritanopia'}
/>

看看效果：

当然，还可以引入 import { useLocale } from 'dumi'; 来判断当前语言环境，这里不赘述。

---

当然了，github 不止这一个评论插件，同类的还有 gitalk 或者 valine 插件等，配置方法大同小异，在这里就不展开讲解了。