MaxKB 作为一款功能强大的知识库系统，其自定义开场白功能为企业提供了展示品牌形象、引导用户获取信息的绝佳机会。为了满足用户对自定义开场白的需求，本文提供了一个基于 HTML 的通用开场白模板，用户可以根据自身业务场景和风格需求进行修改和调整，实现个性化的开场白效果。
1.HTML 开场白模板示例
可以在 MaxKB 的高级编排的开场白中直接编写 HTML 代码，或者在本地创建一个新的 HTML 文件打开进行编辑。
需要 <html_rander> 标签编写 HTML 结构。以下是基 于HTML 编写的 MaxKB 开场白模板示例，可以根据自身需求进行修改和调整：
<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞致云产品小助手</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 16px;
color: #202124;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h2 {
font-size: 1.5em;
margin-bottom: 1em;
text-align: center;
}
.tab {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab button {
background: transparent;
border: 1px solid #dadce0;
padding: 8px 16px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
flex: 1 1 auto;
min-width: 100px;
}
.tab button.active {
background: #1a73e8;
color: white;
border-color: #1a73e8;
}
.tabcontent {
display: none;
padding: 16px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #dadce0;
cursor: pointer;
}
th {
background-color: #f8f9fa;
}
tr:hover td {
background-color: rgba(26, 115, 232, 0.04);
}
@media (max-width: 600px) {
body {
padding: 8px;
}
.container {
padding: 8px;
border-radius: 4px;
}
h2 {
font-size: 1.25em;
}
.tab {
gap: 4px;
margin-bottom: 16px;
}
.tab button {
padding: 6px 12px;
font-size: 12px;
border-radius: 16px;
min-width: 80px;
}
.tabcontent {
padding: 8px;
}
th, td {
padding: 8px;
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<h2>为数字经济时代创造好软件</h2>
<div class="tab">
<button class="tablinks" onclick="openTab(event,'Tab1')">产品相关</button>
<button class="tablinks" onclick="openTab(event,'Tab3')">常见问题</button>
<button class="tablinks" onclick="openTab(event,'Tab4')">关于我们</button>
</div>
<div id="Tab1" class="tabcontent">
<table>
<tr>
<td onclick="send(event)">MaxKB 有哪些核心功能?</td>
</tr>
<tr>
<td onclick="send(event)">介绍一下 JumpServer 产品?</td>
</tr>
<tr>
<td onclick="send(event)">DataEase 有哪些功能?</td>
</tr>
</table>
</div>
<div id="Tab3" class="tabcontent">
<table>
<tr>
<td onclick="send(event)">如何使用 MaxKB?</td>
</tr>
<tr>
<td onclick="send(event)">JumpServer 的常见问题</td>
</tr>
<tr>
<td onclick="send(event)">DataEase 的价格是多少?</td>
</tr>
</table>
</div>
<div id="Tab4" class="tabcontent">
<table>
<tr>
<td onclick="send(event)">飞致云公司介绍</td>
</tr>
<tr>
<td onclick="send(event)">联系方式</td>
</tr>
</table>
</div>
</div>
<script>
function openTab(evt, tabName) {
const tabcontents = document.getElementsByClassName("tabcontent");
Array.from(tabcontents).forEach(tab => tab.style.display = "none");
const tablinks = document.getElementsByClassName("tablinks");
Array.from(tablinks).forEach(link => link.classList.remove("active"));
document.getElementById(tabName).style.display = "block";
evt.currentTarget.classList.add("active");
}
openTab({ currentTarget: document.querySelector('.tablinks') }, 'Tab1');
function send(event) {
console.log(event);
console.log(event.target.innerText);
sendMessage(event.target.innerText);
}
</script>
</body>
</html>
</html_rander>2.应用模板到 MaxKB 小助手
登录 MaxKB 平台，在 MaxKB 的高级编排的开场白，将上述HTML代码模板复制并粘贴到该区域。
在 MaxKB 高级编排的右上角保存当前设置并且启动调试
查看开场白是否按照预期显示和交互。点击开场白中的按钮（如“产品相关”、“常见问题”或“关于我们”），确保消息能够正确发送。
3.注意事项
使用
<html_rander>标签：确保在代码中使用<html_rander>标签。确保代码规范：仅支持原生 HTML 和 JavaScript 写法，避免使用非标准扩展语法或依赖特定框架。
本地编写与压缩：建议在本地编写 HTML 和 JavaScript 代码，然后通过压缩工具压缩后再复制到开场白中。