您现于de位置乃:亚博 > 其他

亚博 2019-08-14 其他 172

Gitalk安装教程

授权需要1个GitHub应用程序 如果您没有 点击这里注册1个新de.

https://github.com/settings/applications/new


如果您已经创建过应用程序 可以点击这里查看

https://github.com/settings/developers

Register a new OAuth application


填写信息

image.png


点击Register application

image.png

记住这里 需要

0 users

Client ID

08fe7a58b6d958104526

Client Secret

816d55b06ae8443089117f4c6ab7ee1ec86b2fcf


得到以上deClient ID和Client Secret之后 接下来就乃安装代码了

直接引入以下js 其中两行就行了

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

npm安装 不用de可以直接忽略掉

npm i --save gitalk
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

html代码 这行代码放于要现于您所需要显示评论de地方

<div id="gitalk-container"></div>

用下面de Javascript 代码来生成 gitalk 插件

var gitalk = new Gitalk({
  clientID: 'GitHub Application Client ID', //上面申请deClient ID
  clientSecret: 'GitHub Application Client Secret', //上面申请deClient Secret
  repo: 'GitHub repo', //GitHub仓库 评论可以于里面查询
  owner: 'GitHub repo owner', //GitHubde用户名
  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'], //这里也乃填GitHubde用户名 不过乃数组形式 如['user1','user2']
  id: location.pathname,      // Ensure uniqueness and length less than 50 唯1值 如果和其他页面1样 则两个页面显示de评论都1样
  distractionFreeMode: false  // Facebook-like distraction free mode})gitalk.render('gitalk-container') 这里具体功能1共磺宄 到时候懂了再告诉大家 不如我天true

以上de代码记得放于js里面了.


安装好之后效果如下:

13.png


或者如下提示

QQ截图20190814000332.png


如果出现以上提示 只需要点击"使用 GitHub登录" 输入githubde账号密码后

QQ截图20190814000428.png

点击"Authorize 3465454"按钮即可.

效果可以到我de个人亚博去看1下:https://www.liqingbo.com/

相关教程

Gitalk

评论