前言
社区和开发者一直在寻找更好的解决方案来管理和共享自己创建的代码。Node Package Manager (NPM) 是一个流行的包管理器，它允许开发者从各种来源轻松地安装、更新和卸载不同的包。@blackbaud/help-client 是一个 npm 包，它可以帮助你为你的 web 应用程序提供可自定义的用户帮助文档。@blackbaud/help-client 的使用非常方便，本文将详细介绍如何使用它。
安装 @blackbaud/help-client
@blackbaud/help-client 是一个可安装的 npm 包。安装它的方法非常简单，只需要在终端中运行以下命令：
npm install @blackbaud/help-client --save
用法
@blackbaud/help-client 旨在帮助开发者为其 web 应用提供可自定义的用户帮助文档。它可以将帮助文档添加到你的 web 应用程序的任何地方，用户可以通过点击帮助按钮或快捷键来打开帮助面板。
1、导入
在你的项目中，你可以使用以下代码导入 @blackbaud/help-client：
import HelpClient from "@blackbaud/help-client";
2、初始化
你还需要将你的帮助文档配置以及其他选项传递给 HelpClient。以下是一些常用的选项：
-- -------------------- ---- ------- ----- ---------- - --- ------------ -------- --------------------------------- ------- - - --- ------------- ------ --- ----- --- --------- ------------------ -- - --- ------------- ------ --- ----- --- --------- ------------------ -- -- ------------ ---- -------------------- ---------- ---展开代码
在这里，baseUrl 是指向你的帮助文档的 URL。topics 包含你想要添加到 HelpClient 的帮助主题数组。每个帮助主题都需要一个唯一的 id、一个 label 以及一个指向该主题帮助文档文件的 fileName。最后，shortcutKey 和 shortcutModifierKey 是用于打开 HelpClient 的快捷键。
3、添加按钮
一旦你创建了 HelpClient 实例，你可以添加帮助按钮到你的 web 应用程序。以下是一个示例的 HTML/CSS 代码，将 HelpClient 及其帮助按钮添加到页面的右下角：
-- -------------------- ---- ------- ---- --------------------------------- ------- ------------ - --------- ------ ------- ---- ------ ---- ------ ----- ------- ----- -------------- ---- ----------- -------- ------ ----- ----------- ------- ------------ ----- ------- -------- - --------展开代码
在这里，#help-client-container 是一个空 div，它将容纳 HelpClient。CSS 类 .help-button 负责样式。
接下来，使用以下 JavaScript 代码将 HelpClient 添加到该容器中：
helpClient.addHelpButton(document.getElementById("help-client-container"));
现在你的 web 应用程序中已经添加了帮助按钮，它将弹出 HelpClient 面板。
示例代码
下面是一个完整的示例，展示了如何使用 @blackbaud/help-client：
HTML:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- --------- --- ----------- ----- ---------------- ---------------- -- ------- ------ ----------- -- -- --- --------- ---- --------------------------------- ------- ---------------------- ------- -------展开代码
JavaScript:
-- -------------------- ---- ------- ------ ---------- ---- ------------------------- ----- ---------- - --- ------------ -------- --------------------------------- ------- - - --- ------------- ------ --- ----- --- --------- ------------------ -- - --- ------------- ------ --- ----- --- --------- ------------------ -- -- ------------ ---- -------------------- ---------- --- ---------------------------------------------------------------------------展开代码
CSS:
-- -------------------- ---- ------- ------------ - --------- ------ ------- ---- ------ ---- ------ ----- ------- ----- -------------- ---- ----------- -------- ------ ----- ----------- ------- ------------ ----- ------- -------- -展开代码
结论
@blackbaud/help-client 可以为你的 web 应用程序添加自定义用户帮助文档，提高了你的应用程序的易用性和用户满意度。它是一个易于使用和集成的 npm 包，使用本文提供的教程，你可以很容易地在你的 web 应用程序中添加它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/101401
