Docusaurus is configured with the Gitalk comment plugin

preface

When I used VuePress, I used Valine as the comment system, but anonymous users could also comment directly. Although it would filter out spammy information, it didn’t feel real to check comments and notifications in the background.

Then I switched to Docusaurus, which didn’t have comments built in. I was going to write my own comment system, and MongoDB was relatively convenient for storing comment data. And then this drag is dragged to the Chinese New Year… I came across a plugin called Gitalk, which is based on Github Issue. I usually check Github and need a Github account to comment, so I used Gitalk to comment on my blog.

steps

1. Create a review repository

First, I need a Github account to create a repository for comments. Since my blog is uploaded synchronously to Github, I don’t need a new repository

2. Enable the Issues function

This function is enabled by default. You can choose Settings -> Features -> Issues

3. Sign up for a Github Application

Click here to create or go to Settings -> Developer Settings -> OAuth Apps in the upper right corner of Github

Homepage URL: this URL is the URL of a Homepage blog.
Authorization callback URL: specifies the github Authorization callback URL. The default URL is the domain name

4. Obtain the Client ID and Client Secret

After the Client ID is created successfully, the Client ID and Client Secret can be obtained and saved.

5, installation,

Gitalk/readme.md at Master · gitalk/gitalk (github.com)

Directly introducing

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" />
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<! -- or -->

<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css" />
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
Copy the code

NPM install

npm i --save gitalk
Copy the code

import 'gitalk/dist/gitalk.css';
import Gitalk from 'gitalk';
Copy the code

6, use,

<div id="gitalk-container"></div>
Copy the code

To generate the Gitalk plug-in, use the following Javascript code:

const gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID'.clientSecret: 'GitHub Application Client Secret'.repo: 'GitHub repo'.owner: 'GitHub repo owner'.admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'].id: location.pathname, // Ensure uniqueness and length less than 50
  distractionFreeMode: false.// Facebook-like distraction free mode
});

gitalk.render('gitalk-container');
Copy the code

Used in the react

Import Gitalk components with styles

import 'gitalk/dist/gitalk.css';
import GitalkComponent from 'gitalk/dist/gitalk-component';
Copy the code

Use components and configuration parameters

<GitalkComponent
  options={{
    clientID: '... '.// ...
    // options below}} / >Copy the code

My configuration

const options = {
  clientID: 'GitHub Application Client ID'.clientSecret: 'GitHub Application Client Secret'.repo: 'blog'.owner: 'kuizuo'.admin: ['kuizuo'].id: title,
  title: title,
  labels: labels,
  distractionFreeMode: false};Copy the code

The specific parameter is gitalk

The problem

Error: Not Found

“Repo”, “warehouse name”, “link”, “blog”, “github.com/kuizuo/blog

No relevant one foundIssuesTo comment, please contact @xxxxx init Creation

XXXXX here is the content of the option admin, the first time to load the article, you need to log in with the administrator account to initialize (that is, create a new issue), otherwise other people will also visit the message.

At present, there is no effective way to load the issues of all blogs in one click. As long as you log in to Github administrator account to visit each blog.

The Authorization callback URL address of [step 3](#3, register a Github Applications) must be entered into the online blog environment kuizuo.cn, otherwise it cannot be used normally

Validation failed

The reason is that the id parameter cannot exceed 50 characters, but the default is location.href, which may cause the length to exceed. So WHAT I do is ID: title, and when I visit the page at the same time, it automatically creates an issue for the repository with the title of the article.

React compilation problems

The plug-in will use the browser’s Window object, which is normal during development, but an error will be reported when compiling (Window is not defined). BrowserOnly of Docusaurus is referenced here, and the code can be compiled normally if it is encapsulated as follows

<BrowserOnly fallback={<div></div>} > {() = > <GitalkComponent options={options} />}</BrowserOnly>
Copy the code

View the full source point me

Github Api

GitHub Documentation

You can also get a list of issues using the Github API

Visit api.github.com/repos/kuizu…

[{"url": "https://api.github.com/repos/kuizuo/blog/issues/24"."repository_url": "https://api.github.com/repos/kuizuo/blog"."labels_url": "https://api.github.com/repos/kuizuo/blog/issues/24/labels{/name}"."comments_url": "https://api.github.com/repos/kuizuo/blog/issues/24/comments"."events_url": "https://api.github.com/repos/kuizuo/blog/issues/24/events"."html_url": "https://github.com/kuizuo/blog/issues/24"."id": 1111300101."node_id": "I_kwDOF7NJDM5CPRgF"."number": 24."title": "Docusaurus config Gitalk comment plugin"."user": {
      "login": "kuizuo"."id": 61005888."node_id": "MDQ6VXNlcjYxMDA1ODg4"."avatar_url": "https://avatars.githubusercontent.com/u/61005888?v=4"."gravatar_id": ""."url": "https://api.github.com/users/kuizuo"."html_url": "https://github.com/kuizuo"."followers_url": "https://api.github.com/users/kuizuo/followers"."following_url": "https://api.github.com/users/kuizuo/following{/other_user}"."gists_url": "https://api.github.com/users/kuizuo/gists{/gist_id}"."starred_url": "https://api.github.com/users/kuizuo/starred{/owner}{/repo}"."subscriptions_url": "https://api.github.com/users/kuizuo/subscriptions"."organizations_url": "https://api.github.com/users/kuizuo/orgs"."repos_url": "https://api.github.com/users/kuizuo/repos"."events_url": "https://api.github.com/users/kuizuo/events{/privacy}"."received_events_url": "https://api.github.com/users/kuizuo/received_events"."type": "User"."site_admin": false
    },
    "labels": [{"id": 3754161267."node_id": "LA_kwDOF7NJDM7fw_Rz"."url": "https://api.github.com/repos/kuizuo/blog/labels/Gitalk"."name": "Gitalk"."color": "ededed"."default": false."description": null
      },
      {
        "id": 3754411279."node_id": "LA_kwDOF7NJDM7fx8UP"."url": "https://api.github.com/repos/kuizuo/blog/labels/blog"."name": "blog"."color": "ededed"."default": false."description": null
      },
      {
        "id": 3754517867."node_id": "LA_kwDOF7NJDM7fyWVr"."url": "https://api.github.com/repos/kuizuo/blog/labels/Docusaurus%E9%85%8D%E7%BD%AEGitalk%E8%AF%84%E8%AE%BA%E6%8F%92%E4%BB%B6"."name": "Docusaurus config Gitalk comment plugin"."color": "ededed"."default": false."description": null}]."state": "open"."locked": false."assignee": null."assignees": []."milestone": null."comments": 0."created_at": "2022-01-22T06:47:34Z"."updated_at": "2022-01-22T06:47:34Z"."closed_at": null."author_association": "OWNER"."active_lock_reason": null."body": "Https://kuizuo.cn/develop/Docusaurus configuration Gitalk comments plugin \ n preface"."reactions": {
      "url": "https://api.github.com/repos/kuizuo/blog/issues/24/reactions"."total_count": 0."+ 1": 0."1": 0."laugh": 0."hooray": 0."confused": 0."heart": 0."rocket": 0."eyes": 0
    },
    "timeline_url": "https://api.github.com/repos/kuizuo/blog/issues/24/timeline"."performed_via_github_app": null},]Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Docusaurus is configured with the Gitalk comment plugin

preface

steps

1. Create a review repository

2. Enable the Issues function

3. Sign up for a Github Application

4. Obtain the Client ID and Client Secret

5, installation,

6, use,

Used in the react

The problem

Error: Not Found

No relevant one foundIssuesTo comment, please contact @xxxxx init Creation

Validation failed

React compilation problems

Github Api

The final result

Comments on the page

Issues page

Docusaurus is configured with the Gitalk comment plugin

preface

steps

1. Create a review repository

2. Enable the Issues function

3. Sign up for a Github Application

4. Obtain the Client ID and Client Secret

5, installation,

6, use,

Used in the react

The problem

Error: Not Found

No relevant one foundIssuesTo comment, please contact @xxxxx init Creation

Validation failed

React compilation problems

Github Api

The final result

Comments on the page

Issues page

Related Posts

How many things can a label draw? Talk about tag manipulation

Vue principle analysis (a) bidirectional binding

JSMS05- Differences between Typeof and Instanceof