简介
Gitter-Sidecar 是一个基于 Gitter 的 JavaScript 库，可以将 Gitter 聊天室集成到网站中。它提供了多个自定义选项和事件监听器，使得用户可以轻松地与聊天室互动。
在本文中，我们将会详细介绍如何使用 Gitter-Sidecar，包括如何安装和配置，以及如何处理不同的事件。
安装
你可以通过 npm 来安装 Gitter-Sidecar。打开终端并运行以下命令：
--- ------- --------------
配置
为了使用 Gitter-Sidecar，你需要拥有一个 Gitter 账号，并创建一个聊天室。然后，你需要向 index.html 文件中添加以下代码：
------- -------------------------------------------------- ----- ---------------
这个脚本将会加载 Gitter Sidecar 库。接下来，你需要初始化一个 GitterSidecar 对象，然后将其挂载到页面上。示例代码如下：
----- ------- - --- --------------- ----- --------------- --- ----------------
将 room 改为你创建的房间 ID 即可。
自定义配置
你可以定制化 Gitter Sidecar 的外观和行为。下面是一些常用的选项。
target
这个选项指定了 Sidecar 应该挂载到哪个 DOM 元素上。默认情况下，Sidecar 会被挂载到文档的末尾。你可以将其改为其他元素的 ID：
----- ------- - --- --------------- ------- ------------------ ---
theme
这个选项指定了 Sidecar 的主题。默认情况下，会使用 default 主题。除此之外，还有 dark, light, gitter 等主题可供选择。
----- ------- - --- --------------- ------ ------- ---
activationElement
这个选项指定了打开 Sidecar 的元素。默认情况下，会使用一个按钮来触发 Sidecar 的显示。你可以将其改为其他元素的 ID，或者是一个 DOM 元素：
----- ------- - --- --------------- ------------------ ----------------- --- -- -- ----- ----------- - ----------------------------------------- ----- ------- - --- --------------- ------------------ ------------ ---
defaultTab
这个选项指定了默认打开的 Tab。默认情况下，会打开聊天室 Tab。你可以将其改为其他 Tab：
----- ------- - --- --------------- ----------- --------- ---
`on*
Gitter Sidecar 提供了多个事件监听器，如 onShow, onHide, onRoomChanged 等。你可以监听这些事件，并在触发时执行一些自定义的代码。示例代码如下：
----- ------- - --- --------------- ----- --------------- --- ----------------- -- - -------------------- -- --------- --- ----------------- -- - -------------------- -- ---------- ---
示例代码
以下是一个完整的示例代码，将 Gitter Sidecar 添加到一个网站中：
--------- -----
------
------
----- --------------- --
------------- ------- ------------
------- -------------------------------------------------- ----- ---------------
-------
------
---- --- ---
------- ----------------------- -------------
---- --- ---
--------
----- ----------- - -----------------------------------------
----- ------- - --- ------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------