Docusaurus配置Gitalk评论插件，让你的博客更具互动性

前言

之前使用vuepress的时候，使用的评论系统是Valine，可是匿名用户也能直接评论，虽说会过滤垃圾信息，但是后台查看评论与通知总感觉没有那么实在。

然后换到了docusaurus，并没有找到合适的评论系统，于是我想到了gitalk，之前看别人用过，效果也还可以，于是这次也尝试了一下。

安装

npm install --save docusaurus-gitalk-plugin

配置

在docusaurus.config.js文件中，找到plugins数组，并在其中添加以下内容：

  plugins: [
    [
      require.resolve('@docusaurus/plugin-content-docs'),
      {
        id: 'docs',
        path: 'docs',
        routeBasePath: '/',
        sidebarPath: require.resolve('./sidebars.json'),
        editUrl:
          'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
      },
    ],
    // other plugins
    'docusaurus-gitalk-plugin',
  ],

接下来，你需要在docusaurus.config.js文件中配置Gitalk评论插件。你可以根据自己的需求，对插件的配置进行调整。

module.exports = {
  // other configuration
  plugins: [
    // other plugins
    {
      module: 'docusaurus-gitalk-plugin',
      options: {
        repository: 'YOUR_GITHUB_REPOSITORY',
        owner: 'YOUR_GITHUB_USERNAME',
        clientId: 'YOUR_GITHUB_CLIENT_ID',
        clientSecret: 'YOUR_GITHUB_CLIENT_SECRET',
        // 其他可选配置
      },
    },
  ],
};

在docusaurus.config.js文件中，找到themeConfig对象，并在其中添加以下内容：

  themeConfig: {
    // other configuration
    gitalk: {
      // Gitalk configuration
    },
  },

使用

在你的Markdown文件中，你可以使用以下语法来添加评论框：

<!--comment-->

效果

添加好评论框后，读者就可以在你的文章和文档上留下评论了。评论框的外观和功能将根据你所配置的Gitalk评论插件的设置而有所不同。

结语

通过本教程，你已经学会了如何将Gitalk评论插件集成到你的Docusaurus项目中。现在，你的博客或文档网站已经具有了互动性，读者可以对你的文章和文档进行评论，从而增加网站的互动性和活跃度。我希望本教程对你有帮助，祝你成功！