歡迎關注個人微信公眾號: 小哈學Java, 優質文章第一時間分享哦！！
目錄
- 一、前言
- 二、什麼是 Gitter
- 三、訪問 Gitter 官網，並註冊使用者
- 四、建立自己的 Gitter 聊天室
- 五、藉助 Sidecar 整合 gitter 到個人網站
- 六、最終效果
- 七、寫在最後
一、前言
小哈從很早以前就有寫博文的習慣，不過那個時候，也沒咋認真地寫，倒是挺喜歡倒騰，從最初在 CSDN 寫部落格，寫了得有 100 多篇後，那時，CSDN 開始加入了噁心的廣告，體驗開始變得極差後，就棄了 CSDN。
當時，就想著自己弄個純淨地個人部落格，於是，從 Jekyll 到 Hexo 都玩過，最終都放棄了，原因是不能隨心所欲地改成自己想要的樣式。
最後基於 Bootstrap4 搭了個前端的架子，大部分個性化 css 都是自己手寫的，於是也就有了現在的個人網站：www.exception.site, 網站的目的，旨在寫出一些高質量的系列教程，幫助大家在工作中速查、學習啥的。但是，就目前來說，文章的數量還是不夠，小哈在後續的日子裡，會一點點補全的，有興趣的不妨收藏一下。
好了，說了這麼多廢話，開始進入正題，由於網站沒有留言，聊天的功能，導致與很多讀者 0 溝通，粘性也就比較差。
那麼，要如何在網站中快速的整合 IM 即時通訊功能呢？
二、什麼是 Gitter？
什麼是 Gitter 呢？聽名字貌似和 GitHub 有點關係呢？
以下來之維基百科的解釋：
Gitter 是 GitHub 儲存庫的開發人員和使用者的即時通訊聊天室系統。 Gitter 作為軟體即服務提供商，提供包括免費選項和所有基本功能，以及建立單個私人聊天室的能力，和個人和組織的付費訂閱選項，允許他們建立任意數量的私人聊天室。
該服務可以為 GitHub 上的各個 Git 儲存庫建立個人聊天室。聊天室隱私遵循關聯 GitHub 儲存庫的隱私設定：因此，私有的 GitHub 儲存庫的聊天室對於訪問儲存庫的人員也是私有的。
它還可以將連線到聊天室的地址資訊放置在 git 儲存庫的 README 檔案中，以引起專案所有使用者和開發人員的注意。使用者也可以通過 GitHub 登入 Gitter 訪問他們訪問的儲存庫的私人聊天室。（注意： GitHub 密碼是不與 Gitter 共享）
Gitter 類似於 IRC 和 Slack。但與 IRC 不同的是，它像Slack一樣，會將所有聊天記錄存檔至雲端。
三、訪問 Gitter 官網，並註冊使用者
- 訪問 Gitter 官方網站 gitter.im:
- 註冊使用者，這裡支援 GitLab，GitHub, Twitter 三種方式來授權登入，小哈選的是 GitHub:
四、建立自己的 Gitter 聊天室
點選 ADD A ROOM 按鈕:
接下來，新增一些朋友加入到你建立的聊天室吧：
聊天室建立完成啦！
接下來，讓我看下剛剛建立的聊天室：
- ①：聊天室名稱；
- ②：聊天室唯一域名（域名要記住，等下我們整合到個人網站需要）；
- ③：聊天室描述；
五、藉助 Sidecar 整合 gitter 到個人網站
好了，聊天室你也建立好了，怎麼整合到自己的網站咧？為了開箱即用式的整合到個人網站，我們還需要藉助一下 Sidecar, 等等！什麼是 Sidecar?
Sidecar 能夠幫助你快速便捷的整合 gitter, 僅僅需要新增幾行 javascript 程式碼即可，開箱即用，你還可以通過一些配置來自定義它。
Sidecar 官方網站為： sidecar.gitter.im：
將如下 javascript 程式碼，整合到個人網站中：
<script>
((window.gitter = {}).chat = {}).options = {
room: 'quanxiaoha/community'
};
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
複製程式碼六、最終效果
程式碼整合完畢後，你看到的效果如下：
開啟聊天室效果：
大工告成，有興趣的童鞋，自己也可以上手試一試哦！
七、寫在最後
今天小哈給大家介紹了一個黑科技 Gitter, 以及如何通過 Sidecar 快速便捷地整合到自己的個人網站中。持續關注，小哈後面會再推送一些有意思的乾貨文章哦！下期見！