这篇文章将帮助您将独特的个性化功能整合到您的 Zendesk帮助中心。它指导您完成在 Knowledge Enterprise 服务模式中添加 自定义页面的 过程，说明如何使用 React.js 和 Node.js 等技术开发、捆绑和嵌入自定义页面。
例如，您可以创建一个自定义 VIP Support注册页面，与您现有的帮助中心设计无缝衔接，提供一致的量身定制的用户体验。
此单页面应用示例使用了 React 和 TypeScript 作为前端，使用 Node.js 作为后端。对于成功注册的新用户， Tailwind CSS 设置应用的样式，而 Nodemailer 则 管理电邮确认。
由于您使用的是 React 应用，因此本示例涵盖了将其编译为单个文件的 Weback 步骤。将文件嵌入帮助中心主题并上传。对于每组步骤，请按照以下部分进行操作：
- 第 1 步：使用 React、TypeScript 和 Node.js 开发自定义页面
- 第 2 步：配置 Weback 以捆绑自定义页面
- 第 3 步：将项目嵌入并整合到您的主题中，并将其发布到帮助中心
如果您不想与后端整合或使用 TypeScript，请查看 样板文件 以创建您自己的单页应用。
第 1 步：使用 React、TypeScript 和 Node.js 开发自定义页面
自定义页面使您可以使用任何首选的网络技术堆栈进行开发。许多开发者更喜欢使用 React.js 和 Node.js 进行后端开发。每种技术都有其自身的细微差别和规格。请考虑以下技术要点：
React
对于自定义页面，请使用 Create React App， 因为此框架支持单页面应用程序。上述 VIPSupport注册页面会发出两个请求：一个请求是生成用于后端身份验证的安全密钥，另一个是提交实际数据。
示例自定义页面更改了 Zendesk 中的用户个人资料和组织。如果您的专页提出了类似请求，请在发送请求之前先验证来自前端的数据。后端验证起着至关重要的作用，但前端验证可确保数据干净，尤其是来自用户输入的数据。
请记住，自定义页面只是帮助中心的一部分。确保所有功能、品牌打造或样式与帮助中心保持一致。
请考虑以下设计方面：
-
身份验证：指定谁可以访问此页面：专员、所有已通过身份验证的用户或每个用户。
-
导航
-
避免在自定义页面上开发标头或导航。这些功能将由您帐户的知识团队设置。自定义页面将继承当前主题的页首和导航栏。
-
将此页面放在帮助中心适当的位置 。和 功能一样，自定义页面也在默认的帮助中心架构之外。用户可通过任何帮助中心模板中的链接或预定义页面（如主页）访问这些页面。自定义页面 URL 如下所示：
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
页面样式：选择适合帮助中心主题的样式库。确保您的字体和调色板匹配您现有的主题。
-
图像处理：由于您需要手动配置和捆绑自定义页面，因此无法在本地存储图像或资产。请在嵌入前将其上传到您的帮助中心主题。有关逐步说明，请参阅文章：使用自己的帮助中心主题资产
Node.js
自定义页面为您提供了一张白纸，便于您为访问者打造个性化的体验。借助 Node.js 和Express 等工具，您可以直接连接到现有的系统和数据库。您还可以使用首选技术堆栈创建新服务，并将其与帮助中心整合，以获得无缝的用户体验。
示例应用使用以下函数。
-
开发者创建了一个 Express API，用于接收前端表格提交的用户和组织信息。
-
该应用发送 API 请求到Zendesk Support ，以使用 Node-Fetch创建和更新相关用户和组织。
-
它使用 validator.js验证表格提交数据。
-
当使用 Nodemailer成功提交表格后，应用将向用户发送 确认电邮通知 。
构建服务器端自定义页面服务时，请小心保护您的 API 路由。使用 JWT 等工具建立请求身份验证，保护您的应用程序。有关 JWT 的更多详情，请参阅 JWT 网站文章：JSON 网络密钥简介。
此示例应用使用如下所述的身份验证。
-
开发者创建了一个 身份验证端点 ，前端使用该端点来请求 JWT 密钥，并对表格提交 API 的请求进行授权。
-
身份验证模块 使用 jsonwebtoken生成并验证 JWT 密钥。
根据您构建的应用程序，考虑您的 CORS（跨域资源共享）政策。确保接收客户端请求的路由已启用 CORS。如果您知道发送请求的域名，请明确指定这些域名。否则，配置通配符 *.有关 CORS 的更多信息，请参阅 Mozilla 网站文章：跨源资源共享 (CORS)
第 3 步：配置 Weback 以捆绑自定义页面
完成自定义页面的开发后，使用 Weback 捆绑您的 React 应用。由于您的主题需要嵌入所有自定义页面，请将自定义页面编译到单个 HTML 文件中。Create React App 包括其自己的捆绑和优化。但是，由于您的目标是退回单个 index.html 文件中的其他内容，该示例使用其自己的 webpack 配置 来简化此过程。
第 4 步：将项目嵌入并整合到您的主题中，并将其发布到帮助中心
构建应用程序后，将其嵌入帮助中心。导航到新创建的构建目录。您将在其中找到一些创建新的自定义页面所需的文件。
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
的 index.html 文件 中包含您放入自定义页面的代码。访问为项目创建的 JavaScript 和 CSS。首先，将 JavaScript 和 CSS 文件作为 资产 上传到您的帮助中心。然后，从您的 index.html 文件进入自定义页面，调整文件路径以指向资产。
请参阅以下示例，了解其在代码编辑器中的显示方式。
完成后，发布您的自定义页面。有关在帮助中心管理内容的更多资源，请参阅文章：知识资源。
翻译免责声明：本文章使用自动翻译软件翻译，以便您了解基本内容。 我们已采取合理措施提供准确翻译，但不保证翻译准确性
如对翻译准确性有任何疑问，请以文章的英语版本为准。