A super useful third-party plug-ins --Gittalk comment

Use GITALK background:

1. recently doing a Java-based personal blog system, has been basically completed, and suddenly discovered how no comment operation, if we start from scratch to write from the database, then the price it takes a little big reason that I was on the Internet looking for a money for my third-party plug-ins comment, the first time I found a "Chatteris', the result is disappointing because my site is not for the record, so I can not use the" Chatteris. " So Gitalk to come into my eyes.

2. Gitalk initial launch, should want to cooperate to build blog on github, easy to add a comment function. With the decline of the other comment plugins, Gitalk to fire up. Gitalk is based on Github Issue and Preact comments plug-in development. In addition to its support Hexo, but also support the language development of java, php and other blog.
For details, please refer to: official website

Instructions:

1. First need to GitHub up a new warehouse for storing the contents of the comments:

Creating a warehouse

　2. Open the isue function in the settings:

Set up

The default is on

Issues

3. Register a Github Application requires the following steps:

Blog comments

Notice the two URL is the domain name of your site. Just write the application name, description just write.

(2) After completing it to the following page:

image.png

Client ID and Client Secret which is what we need.
　4. After completion of the above steps, then you will experience at the convenience of Gitralk:

Only need to add the following code to introduce you wish to comment html or jsp page is ready for use

<-- 引入 -->
<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>

<-- 添加一个容器-->
<div id="gitalk-container"></div>

<-- 生成 gitalk 插件-->
var gitalk = new Gitalk({
  clientID: '56f73fbc5e79a466ea62', //Client ID

  clientSecret: '26d8eb4f3b0de9ce02382103ffc32ba34c4671f4', //Client Secret

  repo: 'blogtalk',//仓库名称
  owner: 'smfx1314',//仓库拥有者
  admin: ['smfx1314'],
  id: location.href,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

Set up

• clientID String

  Must . GitHub Application Client ID.

• clientSecret String

  Must . GitHub Application Client Secret.

• repo String

  必须. GitHub repository.

• owner String

  必须. GitHub repository 所有者，可以是个人或者组织。

• admin Array

  必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。

• id String

  Default: location.href.

  页面的唯一标识。长度必须小于50。

• number Number

  Default: -1.

  页面的 issue ID 标识，若未定义number属性则会使用id进行定位。

• labels Array

  Default: ['Gitalk'].

  GitHub issue 的标签。

• title String

  Default: document.title.

  GitHub issue 的标题。

• body String

  Default: location.href + header.meta[description].

  GitHub issue 的内容。

• language String

  Default: navigator.language || navigator.userLanguage.

  设置语言，支持 [en, zh-CN, zh-TW]。

• perPage Number

  Default: 10.

  每次加载的数据大小，最多 100。

• distractionFreeMode Boolean

  Default: false。

  类似Facebook评论框的全屏遮罩效果.

• pagerDirection String

  Default: 'last'

  评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序。

• createIssueManually Boolean

  Default: false.

  如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面，创建 issue 需要点击 init 按钮。

• proxy String

  Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.

  GitHub oauth 请求到反向代理，为了支持 CORS。 为什么要这样?

• flipMoveOptions Object

  Default:

    {
      staggerDelayBy: 150,
      appearAnimation: 'accordionVertical',
      enterAnimation: 'accordionVertical',
      leaveAnimation: 'accordionVertical',
    }
  

  评论列表的动画。 参考

• enableHotKey Boolean

  Default: true.

  Enable keyboard shortcuts (cmd | ctrl + enter) to submit comments.

Note: The first time the module is loaded into the comments do not come out, you need to register Github Application account login module comment after refresh the page, you can normally use.

Fourth, show examples of my blog:

Just click on an article into the bottom of the comment module will appear:

image.png

Reproduced in: https: //www.jianshu.com/p/4242bb065550