介绍
open-twitch-dashboard 是一个为 Twitch 平台构建的开源仪表板，该仪表板提供了有关 Twitch 频道和用户的实时数据统计信息。该 npm 包提供了一个方便的使用界面，允许用户基于自己的需要使用模块化的方式来展示和解释 Twitch 数据。
安装
安装 open-twitch-dashboard 版本适用于 npm 环境。在安装该包之前，请确保已经拥有 npm 环境。
--- ------- ---------------------
使用方式
从 Twitch 获得数据是通过 Twitch 的 API 实现的。在使用 open-twitch-dashboard 之前，必须在 Twitch 开发人员门户网站上注册一个应用程序并获取 Client ID 和 Client Secret。
在引入 open-twitch-dashboard 之前需要引入 twitch-auth 和 twitch-api。
------ - ---------- - ---- -------------- ------ - --------- - ---- ------------- ------ --------------- ---- ------------------------ ----- ---- - --- ------------ --------- ----------------- ------------- --------------------- ------------ ------------------ --- ----- --- - --- ----------- ------------- ----- --------- ---------------- --- ----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------ --- -------------------------------------
该示例代码展示了如何将 open-twitch-dashboard 与 twitch-auth 和 twitch-api 一同使用。
首先，创建 TwitchAuth 实例以获取 Client ID 和 Client Secret。
----- ---- - --- ------------ --------- ----------------- ------------- --------------------- ------------ ------------------ ---
接下来，创建 TwitchApi 实例并将其设置为认证提供程序。
----- --- - --- ----------- ------------- ----- --------- ---------------- ---
最后，创建 TwitchDashboard 实例，设置要展示的频道名称和要展示的模块列表。
----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------ ---
最后，调用 twitchDashboard.render 方法，将仪表板呈现在 DOM 中。
-------------------------------------
指南
该 npm 包提供了丰富的选项和配置。在以下示例中，我们将重点介绍这些选项和配置方法。
模块
open-twitch-dashboard 可以显示许多不同类型的信息，这些信息可以通过模块配置进行启用。
以下是可以启用的模块及其选项：
viewers：展示实时观看人数。可选参数：refreshIntervalInSeconds（int）。followers：展示实时关注人数。可选参数：refreshIntervalInSeconds（int）。chat：展示最近几个聊天消息。可选参数：messageLimit（int），refreshIntervalInSeconds（int）。bits：展示实时比特币数量。可选参数：refreshIntervalInSeconds（int）。subscribers：展示实时订阅者数量。可选参数：refreshIntervalInSeconds（int）。
使用模块配置的最简单示例如下所示：
----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------ ---
布局
可以使用 layout 配置项进行适当的布局。默认布局为 COLUMN。
以下是可用的布局选项：
ROW：在一行上水平排列所有模块。COLUMN：按列排列所有模块。
以下示例演示如何将布局设置为 ROW：
----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------- ------- ----- ---
主题
可以使用 theme 配置项来更改仪表板的外观。默认主题为 DEFAULT。
以下是可用的主题选项：
DEFAULT：白色背景，黑色文本。DARK：黑色背景，白色文本。LIGHT：深蓝色背景，白色文本。
以下示例演示如何将主题设置为 DARK：
----- --------------- - --- ----------------- ---- ------------ --------------- -------- ----------- ------------- ------ ------ ---
常规选项
以下示例演示了如何使用常规选项：
----- --------------- - --- -----------------
----
------------ ---------------
-------- ----------- -------------
------- ------
------ -------
---------- -------------
-------- ---------- -
---------------------- -- ---------
-
---container：要在其中呈现仪表板的容器的 ID。onReady：当仪表板准备好后要调用的回调函数。
结论
open-twitch-dashboard 是一个非常实用的 npm 包，使得构建 Twitch 仪表板变得非常容易。通过了解本文中详细的使用指南，你现在应该已经了解了如何使用 open-twitch-dashboard 建立一个漂亮且丰富的 Twitch 数据仪表板。在使用该 npm 包时，请始终遵循 Twitch API 的使用规则并确保保护用户隐私。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006737a890c4f7277584122