五分鐘搭建博客評論組件-gitalk

時間 2021-01-03

標籤 javascript css html java git github web 數據庫 npm bash 欄目 JavaScript 简体版

原文原文鏈接

前言

由於本身最近在搭建一個本身的博客，須要有個評論功能，又不想本身建數據庫，還想用第三方登陸，仔細斟酌一番後，決定使用 gitalk [0] ，用完以後是真香，因此來給你們安利一波~javascript

大概長這樣👇css

gitalk 特色

✅ GitHub 登陸html

✅ 無需數據庫java

✅ 無干擾模式（設置 distractionFreeMode 爲 true 開啓）git

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

✅ 快捷鍵提交評論（cmd|ctrl + enter）web

✅ 支持我的或組織數據庫

安裝

npmnpm

# npm
npm i --save gitalk

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

orbash

直接引入

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

image-20210103143024105

剛剛咱們已經建立完了一個空倉庫

image-20210103143143250

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