五分钟搭建博客评论组件-gitalk

时间 2021-01-04

标签 css html git github shell 数据库 npm app 网站 spa 栏目 CSS 繁體版

原文原文链接

前言

由于本身最近在搭建一个本身的博客，须要有个评论功能，又不想本身建数据库，还想用第三方登陆，仔细斟酌一番后，决定使用 gitalk [0] ，用完以后是真香，因此来给你们安利一波~

大概长这样👇css

gitalk 特色

✅ GitHub 登陆html

✅ 无需数据库git

✅ 无干扰模式（设置 distractionFreeMode 为 true 开启）github

✅ 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru, de, pl, ko]shell

✅ 快捷键提交评论（cmd|ctrl + enter）数据库

✅ 支持我的或组织npm

安装

npmapp

# npm
npm i --save gitalk

# 引入
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'

or网站

直接引入spa

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

使用

老严就直接用的直接引入，先建立一个index.html文件

建立一个容器用于存放 gitalk

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

new 一个 gitalk 来进行配置

下面这些参数尚未？等等老严再教你们一步一步填写

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

render 一下

gitalk.render('gitalk-container')

看下咱们刚刚写完这些以后的效果，大体就长这样了

建立评论仓库

咱们不用数据库是没错，可是咱们至少须要一个容器来存放这个评论数据吧！gitalk 须要咱们建立一个用于存放评论的空仓库，咱们就叫 gitalk-comments [2]

刚刚咱们已经建立完了一个空仓库

建立 gitalk

咱们已经作完了咱们的准备工做。那么接下来，咱们就须要建立属于咱们本身的 gitalk 应用 [1]

！注意：这里的 Homepage URL 与 authorization callback URL 可填写本身的域名，由于老严采用的是 gh-pages

点击注册以后，咱们会跳转到详细配置页面

这里面的 clientID 是咱们以前配置中须要的 ID

咱们还须要建立这个 clientSecret 密钥点击 Generate a new client secret 便可建立

从新配置

var gitalk = new Gitalk({
    clientID: '8e2585b74fb088fa5c1b', // clientID 
    clientSecret: '34d45f15101fe1c1746b0ce9455760a1f628d989', // clientSecret
    repo: 'gitalk-comments', // 评论仓库名
    owner: 'crazymryan',
    admin: ['crazymryan'], // 管理人
    id: location.pathname, // 返回当前 URL 的路径部分做为id
    language:'zh-CN', // 语言
    distractionFreeMode: false  // 无干扰模式
})

修改完以后，老严直接提交到了 gh-pages ，若是你是本身的网站，直接上传这个 index.html 文件

效果

打开 https://crazymryan.github.io/gitalk-study/ 这个地址

点击 使用 GitHub 登陆 进行绑定受权

受权成功以后回到页面上

输入点东西评论一下吧！

此时咱们能够在以前建立的空仓库中的 issue 中看到咱们刚刚评论的内容了

所有代码

若是你想看看所有代码能够去 gitalk-study [3] 看看，若是你有兴趣想看看老严的博客也能够访问 blog [4]

这里也贴一下所有代码吧

<!DOCTYPE html>
<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', // 评论仓库名
        owner: 'crazymryan',
        admin: ['crazymryan'], //管理人
        id: location.pathname, // 返回当前 URL 的路径部分做为id
        language:'zh-CN', //语言
        distractionFreeMode: false  // 无干扰模式
    })
    gitalk.render('gitalk-container')
    </script>
</body>
</html>

注解地址

[0] https://github.com/gitalk/git...

[1] https://github.com/settings/a...

[2] https://github.com/CrazyMrYan...

[3] https://github.com/CrazyMrYan...

[4] https://crazymryan.github.io/...