一、前言

基于 Bootstrap4 搭了個前端的架子，大部分個性化 css 都是自己手寫的，于是也就有了現(xiàn)在的個人網(wǎng)站：https://xiaozhu2007.github.io/
， 網(wǎng)站的目的，旨在寫出一些高質(zhì)量的系列教程，幫助大家在工作中速查、學(xué)習(xí)啥的。但是，就目前來說，文章的數(shù)量還是不夠，我在后續(xù)的日子里，會一點點補(bǔ)全的，有興趣的不妨收藏一下。

好了，說了這么多廢話，開始進(jìn)入正題，由于網(wǎng)站沒有留言，聊天的功能，導(dǎo)致與很多讀者 0 溝通，粘性也就比較差。那么，要如何在網(wǎng)站中快速的集成 IM 即時通訊功能呢？

二、什么是 Gitter？

什么是 Gitter 呢？聽名字貌似和 GitHub 有點關(guān)系呢？

以下來之維基百科的解釋：

Gitter 是 GitHub 存儲庫的開發(fā)人員和用戶的即時通訊聊天室系統(tǒng)。 Gitter 作為軟件即服務(wù)提供商，提供包括免費選項和所有基本功能，以及創(chuàng)建單個私人聊天室的能力，和個人和組織的付費訂閱選項，允許他們創(chuàng)建任意數(shù)量的私人聊天室。

該服務(wù)可以為 GitHub 上的各個 Git 存儲庫創(chuàng)建個人聊天室。聊天室隱私遵循關(guān)聯(lián) GitHub 存儲庫的隱私設(shè)置：因此，私有的 GitHub 存儲庫的聊天室對于訪問存儲庫的人員也是私有的。

它還可以將連接到聊天室的地址信息放置在 git 存儲庫的 README 文件中，以引起項目所有用戶和開發(fā)人員的注意。用戶也可以通過 GitHub 登錄 Gitter 訪問他們訪問的存儲庫的私人聊天室。（注意： GitHub 密碼是不與 Gitter 共享）

Gitter 類似于 IRC 和 Slack。但與 IRC 不同的是，它像Slack一樣，會將所有聊天記錄存檔至云端。

三、訪問 Gitter 官網(wǎng)，并注冊用戶

1. 訪問 Gitter 官方網(wǎng)站 https://gitter.im

Gitter 官網(wǎng)

1. 注冊用戶，這里支持 GitLab，GitHub, Twitter 三種方式來授權(quán)登錄，我選的是 GitHub:

Gitter 注冊

四、創(chuàng)建自己的 Gitter 聊天室

添加自己的Gitter聊天室

點擊 ADD A ROOM 按鈕:

創(chuàng)建屬于你的聊天室名稱

接下來，添加一些朋友加入到你創(chuàng)建的聊天室吧：

添加一些用戶加入到你的聊天室

聊天室創(chuàng)建完成啦！

創(chuàng)建完成

接下來，讓我看下剛剛創(chuàng)建的聊天室：

聊天室都有些啥

• ①：聊天室名稱；
• ②：聊天室唯一域名（域名要記住，等下我們集成到個人網(wǎng)站需要）；
• ③：聊天室描述；

五、借助 Sidecar 集成 gitter 到個人網(wǎng)站

好了，聊天室你也創(chuàng)建好了，怎么集成到自己的網(wǎng)站咧？為了開箱即用式的集成到個人網(wǎng)站，我們還需要借助一下 Sidecar, 等等！什么是 Sidecar?

Sidecar 能夠幫助你快速便捷的集成 gitter, 僅僅需要添加幾行 javascript 代碼即可，開箱即用，你還可以通過一些配置來自定義它。

Sidecar 官方網(wǎng)站為： https://sidecar.gitter.im

將 javascript 代碼，集成到個人網(wǎng)站中：

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: ''
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

六、最終效果

大工告成，有興趣的童鞋，自己也可以上手試一試哦！

七、寫在最后

今天我給大家介紹了一個黑科技—— Gitter, 以及如何通過 Sidecar 快速便捷地集成到自己的個人網(wǎng)站中。持續(xù)關(guān)注，我后面會再推送一些有意思的干貨文章哦！下期見！