Gitment, a comment plugin for Github Issues

Recently discovered an interesting comment plug-in Gitment[1], which is good in terms of implementation and effect. Let me introduce it to you[2]. If you have a personal blog, you can consider using it; if you don’t have a personal blog, you can also learn about the implementation ideas and open up your imagination.

The commonly used Duosuo comments have been closed. I believe many people’s blogs have been affected. Therefore, my personal blog comments have been changed to Discuz, NetEase comment plug-in, and Changyan comment plug-in, but none of them are satisfactory. It was a bit of a surprise to see Gitment this time.

The final effect achieved is shown in the figure:

The basic principle is to use the Issues function on the GitHub project to store content, and use the GitHub account to log in to the system. Integrating it with your own blog is relatively simple, just a css file, a js file, and a piece of initialization code.

1. First, register the OAuth Application on Github

You can register an application through this address [3] and just fill in the information as prompted.

After success, you will get a client ID and a client secret, which will be used later when initializing the plug-in.

2. Page integration Gitment

Load the corresponding css file, js file, and initialization code to the page to be displayed:

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        id: '页面 ID', // 可选。这个选项不写（不是留空），默认为 location.href
        owner: '你的 GitHub ID',
        repo: '存储评论的 repo',
        oauth: {
            client_id: '你的 client ID',
            client_secret: '你的 client secret',
        },
     });
    gitment.render('container'); //container为你要显示评论的id
</script>

For more instructions on the parameters of the initialization part, please refer to

https://github.com/imsun/gitment#options

Possible problems one

If you encounter such an error, it means that the container in your gitment.render('container'); does not correspond to the page, please check carefully.

Possible problems 2

If you encounter such a problem, it is likely that the repo address you initialized is not written correctly. The repo must be written as the corresponding id, not the http address. The id in the picture is a project on my own GitHub, also It is the item to store the comment content, as shown in the figure:

3. Initialization comments

After the integration is successful, you can see the displayed content of the comment plug-in. The next step you need at this time is to log in to your GitHub account and click "Initilize Comments" in the picture.

Note: Each article needs to be initialized

Finally the comments you can see in the Issues section are stored as:

4. Customization and personalization

You can also customize the style and layout. For more instructions, please refer to: https://github.com/imsun/gitment#customize

Finally, to summarize, the advantages of this Gitment are simple integration, convenient customization, and built-in GitHub account login; the disadvantage is that it only supports GitHub account login, and you have to click a button to initialize each time you publish a new article, which is a little troublesome; At present, the mobile phone adaptation is not ideal. If your requirements for comment plugins are not so strict, you can consider using this plugin.

GitHub project source code: https://github.com/imsun/gitment

The above is the detailed content of Gitment, a comment plugin for Github Issues. For more information, please follow other related articles on the PHP Chinese website!