preface

Because I recently build a blog of my own, need to have a comment function, and do not want to build their own database, but also want to use a third party login, after careful consideration, decided to use Gitalk [0], after using up is really sweet, so to give you a wave ~

It looks something like 👇

Gitalk characteristics

✅ making login

✅ No database required

✅ No interference mode (set distractionFreeMode to true)

✅ Supports multiple languages [EN, zh-CN, zh-TW, ES-es, FR, ru, DE, PL, ko]

✅ shortcuts to submit comments (CMD | CTRL + enter)

✅ Supports individuals or organizations

The installation

npm

# npm
npm i --save gitalk

#The introduction of
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
Copy the code

or

Directly introducing

<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

use

Create an index. HTML file

Create a container to hold gitalk

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

New a gitalk for configuration

I don’t have the following parameters, okay? Wait until Lao Yan teaches us step by step to fill in

var 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 len
    distractionFreeMode: false  // Facebook-like distraction
})
Copy the code

Render the

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

So if you look at what we just wrote, it looks something like this

Create a review repository

We don’t need a database, but we need at least a container to store this comment data. Gitalk requires us to create an empty repository for comments, which we’ll call gitalk-Comments [2]

We have just created an empty warehouse

Create gitalk

We have finished our preparation work. Next, we need to create our own Gitalk application [1]

! Note: The Homepage URL and authorization callback URL can be filled in with their own domain names, because Lao Yan uses GH-Pages

After clicking register, we will be redirected to the detailed configuration page

The clientID in here is the ID we needed in the previous configuration

We also need to create the clientSecret key by clicking Generate a new Client secret

To reconfigure

var gitalk = new Gitalk({
    clientID: '8e2585b74fb088fa5c1b'.// clientID 
    clientSecret: '34d45f15101fe1c1746b0ce9455760a1f628d989'.// clientSecret
    repo: 'gitalk-comments'.// Comment on the warehouse name
    owner: 'crazymryan'.admin: ['crazymryan']./ / manager
    id: location.pathname, // Returns the path portion of the current URL as id
    language:'zh-CN'./ / language
    distractionFreeMode: false  // No interference mode
})
Copy the code

After modification, Lao Yan directly submitted to gh-Pages, if you are your own website, directly upload the index.html file

The effect

Open the crazymryan. Making. IO/gitalk – stud… This address

Click On GitHub login for binding authorization

Return to the page after successful authorization

Type in something and leave a comment!

At this point we can see what we just commented on in the issue in the empty repository we created earlier

All the code

If you want to see the whole code you can go to Gitalk-Study [3] and if you are interested in looking at Yan’s blog you can also visit blog [4]

Post the whole code here, too

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <style>
        #gitalk-container {
            max-width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="gitalk-container"></div>
    <script>
    var gitalk = new Gitalk({
        clientID: '8e2585b74fb088fa5c1b'.//clientID 
        clientSecret: '34d45f15101fe1c1746b0ce9455760a1f628d989'.//clientSecret
        repo: 'gitalk-comments'.// Comment on the warehouse name
        owner: 'crazymryan'.admin: ['crazymryan']./ / manager
        id: location.pathname, // Returns the path portion of the current URL as id
        language:'zh-CN'./ / language
        distractionFreeMode: false  // No interference mode
    })
    gitalk.render('gitalk-container')
    </script>
</body>
</html>
Copy the code

Note the address

[0] github.com/gitalk/gita…

[1] github.com/settings/ap…

[2] github.com/CrazyMrYan/…

[3] github.com/CrazyMrYan/…

[4] crazymryan.github.io/blog/