709 lines
26 KiB
HTML
Executable File
709 lines
26 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>帮助文档</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||
}
|
||
|
||
body {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background-color: #f8f9fa;
|
||
color: #333;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 280px;
|
||
background-color: #fff;
|
||
border-right: 1px solid #e1e4e8;
|
||
overflow-y: auto;
|
||
height: 100vh;
|
||
position: fixed;
|
||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
|
||
z-index: 100;
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 20px;
|
||
border-bottom: 1px solid #e1e4e8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.sidebar-header h1 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.search-box {
|
||
width: 100%;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #e1e4e8;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav-menu {
|
||
list-style: none;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.nav-item {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.nav-link {
|
||
display: block;
|
||
padding: 10px 20px;
|
||
color: #333;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.nav-link.active {
|
||
background-color: #e8f4ff;
|
||
color: #0366d6;
|
||
border-left: 3px solid #0366d6;
|
||
}
|
||
|
||
.nav-item h3 {
|
||
padding: 10px 20px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #6e7781;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 30px;
|
||
margin-left: 280px;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.content-header {
|
||
margin-bottom: 30px;
|
||
border-bottom: 1px solid #e1e4e8;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.content-header h1 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #24292e;
|
||
}
|
||
|
||
.content-body {
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.content-body h2 {
|
||
margin: 20px 0 10px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.content-body h3 {
|
||
margin: 15px 0 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.content-body p {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.content-body ul, .content-body ol {
|
||
margin-bottom: 15px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.content-body li {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-body code {
|
||
background-color: #f6f8fa;
|
||
padding: 2px 4px;
|
||
border-radius: 3px;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.code-block {
|
||
background-color: #f6f8fa;
|
||
border-radius: 4px;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
font-family: monospace;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.content-body img {
|
||
max-width: 100%;
|
||
border-radius: 4px;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.content-body a {
|
||
color: #0366d6;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.content-body a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.content-body .note {
|
||
background-color: #f8f9fa;
|
||
border-left: 3px solid #0366d6;
|
||
padding: 15px;
|
||
margin: 15px 0;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.search-results {
|
||
margin-top: 20px;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
padding: 15px;
|
||
}
|
||
|
||
.search-result-item {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #e1e4e8;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.search-result-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.search-result-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 5px;
|
||
color: #0366d6;
|
||
}
|
||
|
||
.search-result-desc {
|
||
font-size: 14px;
|
||
color: #586069;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.search-result-url {
|
||
font-size: 12px;
|
||
color: #3b444b;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.sidebar {
|
||
width: 240px;
|
||
}
|
||
.main-content {
|
||
margin-left: 240px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
width: 0;
|
||
position: absolute;
|
||
z-index: 100;
|
||
transition: width 0.3s;
|
||
}
|
||
.sidebar.active {
|
||
width: 240px;
|
||
}
|
||
.main-content {
|
||
margin-left: 0;
|
||
}
|
||
.mobile-nav-toggle {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.mobile-nav-toggle {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="sidebar" id="sidebar">
|
||
<div class="sidebar-header">
|
||
<h1>帮助文档</h1>
|
||
<button class="mobile-nav-toggle" id="mobile-nav-close">×</button>
|
||
</div>
|
||
<div class="search-box">
|
||
<input type="text" placeholder="搜索文档..." id="search-input">
|
||
</div>
|
||
<ul class="nav-menu">
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link active" data-section="getting-started">入门指南</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="features">功能概览</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<h3>基础操作</h3>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="create-account">创建账户</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="dashboard">仪表盘使用</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="settings">账户设置</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<h3>常见问题</h3>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="faq">常见问题</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#" class="nav-link" data-section="troubleshooting">故障排除</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<button class="mobile-nav-toggle" id="sidebar-toggle">☰</button>
|
||
|
||
<div class="content-header">
|
||
<h1 id="current-section-title">入门指南</h1>
|
||
</div>
|
||
|
||
<div class="search-results" id="search-results" style="display: none;">
|
||
</div>
|
||
|
||
<div class="content-body" id="getting-started-content">
|
||
<h2>欢迎使用我们的服务</h2>
|
||
<p>本帮助文档将指导您如何使用我们的产品。无论您是新手还是有经验的用户，都可以在这里找到有价值的帮助。</p>
|
||
|
||
<h2>开始使用</h2>
|
||
<p>要开始使用我们的服务，请按照以下步骤操作：</p>
|
||
<ol>
|
||
<li>访问我们的官方网站并注册一个账户</li>
|
||
<li>完成账户验证过程</li>
|
||
<li>登录到您的账户</li>
|
||
<li>熟悉界面布局和主要功能</li>
|
||
</ol>
|
||
|
||
<div class="note">
|
||
<p><strong>提示：</strong>建议您在首次登录时花几分钟时间浏览主要功能区域，这将帮助您更快地上手。</p>
|
||
</div>
|
||
|
||
<h2>界面概览</h2>
|
||
<p>我们的产品界面设计简洁直观，主要分为以下几个区域：</p>
|
||
<ul>
|
||
<li><strong>顶部导航栏</strong> - 包含主要功能入口和用户信息</li>
|
||
<li><strong>左侧菜单</strong> - 提供快速访问主要功能的链接</li>
|
||
<li><strong>主内容区域</strong> - 显示当前操作的主要内容</li>
|
||
<li><strong>底部状态栏</strong> - 显示系统状态和相关信息</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content-body" id="features-content" style="display: none;">
|
||
<h2>功能概览</h2>
|
||
<p>我们的产品提供以下核心功能：</p>
|
||
|
||
<h3>数据管理</h3>
|
||
<p>轻松创建、编辑和管理您的数据。支持多种数据类型和格式。</p>
|
||
|
||
<h3>协作工具</h3>
|
||
<p>与团队成员实时协作，提高工作效率。支持评论、共享和权限管理。</p>
|
||
|
||
<h3>自动化工作流</h3>
|
||
<p>创建自定义工作流，自动化重复性任务，节省宝贵时间。</p>
|
||
|
||
<h3>分析与报告</h3>
|
||
<p>强大的分析工具和定制报告功能，帮助您做出数据驱动的决策。</p>
|
||
|
||
<div class="code-block">
|
||
function fetchData(apiEndpoint) {
|
||
const response = await fetch(apiEndpoint);
|
||
return await response.json();
|
||
}
|
||
|
||
fetchData("/api/data").then(data => console.log(data));
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-body" id="create-account-content" style="display: none;">
|
||
<h2>创建账户</h2>
|
||
<p>创建账户是使用我们服务的第一步。以下是详细的创建流程：</p>
|
||
|
||
<h3>注册流程</h3>
|
||
<ol>
|
||
<li>访问我们的官方网站</li>
|
||
<li>点击"注册"按钮</li>
|
||
<li>填写必要的注册信息（姓名、邮箱、密码等）</li>
|
||
<li>阅读并同意服务条款</li>
|
||
<li>点击"创建账户"按钮</li>
|
||
</ol>
|
||
|
||
<h3>账户验证</h3>
|
||
<p>注册完成后，您需要验证您的邮箱地址：</p>
|
||
<ol>
|
||
<li>登录您的邮箱</li>
|
||
<li>查找来自我们的验证邮件</li>
|
||
<li>点击邮件中的验证链接</li>
|
||
<li>按照指引完成验证过程</li>
|
||
</ol>
|
||
|
||
<div class="note">
|
||
<p><strong>注意：</strong>如果您没有收到验证邮件，请检查垃圾邮件文件夹，或者尝试重新发送验证邮件。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-body" id="dashboard-content" style="display: none;">
|
||
<h2>仪表盘使用指南</h2>
|
||
<p>仪表盘是您管理所有活动的中心位置。以下是仪表盘的主要功能和使用方法：</p>
|
||
|
||
<h3>查看概览</h3>
|
||
<p>仪表盘主页面提供以下关键信息：</p>
|
||
<ul>
|
||
<li>最近活动列表</li>
|
||
<li>待处理任务</li>
|
||
<li>重要通知</li>
|
||
<li>数据统计摘要</li>
|
||
</ul>
|
||
|
||
<h3>自定义仪表盘</h3>
|
||
<p>您可以根据自己的需求自定义仪表盘：</p>
|
||
<ol>
|
||
<li>点击右上角的"设置"图标</li>
|
||
<li>选择"仪表盘布局"</li>
|
||
<li>拖拽组件到所需位置</li>
|
||
<li>保存您的布局设置</li>
|
||
</ol>
|
||
|
||
<h3>快捷操作</h3>
|
||
<p>仪表盘提供以下快捷操作：</p>
|
||
<ul>
|
||
<li>快速创建新项目</li>
|
||
<li>一键访问常用功能</li>
|
||
<li>批量管理任务</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content-body" id="settings-content" style="display: none;">
|
||
<h2>账户设置</h2>
|
||
<p>您可以根据自己的需求自定义账户设置，包括个人资料、密码、通知等。</p>
|
||
|
||
<h3>个人资料</h3>
|
||
<p>在个人资料设置中，您可以修改您的姓名、邮箱地址和头像。</p>
|
||
|
||
<h3>密码管理</h3>
|
||
<p>定期更新您的密码可以提高账户安全性。点击"更改密码"按钮开始更新过程。</p>
|
||
|
||
<h3>通知设置</h3>
|
||
<p>自定义您的通知偏好，选择您希望接收的通知类型和频率。</p>
|
||
</div>
|
||
|
||
<div class="content-body" id="api-content" style="display: none;">
|
||
<h2>API 使用</h2>
|
||
<p>API 使您能够集成我们的服务到您自己的应用程序中。要开始使用 API，请先获取 API 密钥。</p>
|
||
|
||
<h3>获取 API 密钥</h3>
|
||
<p>要获取 API 密钥，请按照以下步骤操作：</p>
|
||
<ol>
|
||
<li>登录到您的账户</li>
|
||
<li>导航到"开发人员"或"API"设置页面</li>
|
||
<li>点击"创建新密钥"</li>
|
||
<li>设置密钥的名称和权限</li>
|
||
<li>点击"生成密钥"</li>
|
||
</ol>
|
||
|
||
<h3>API 请求示例</h3>
|
||
<p>以下是一个简单的 API 请求示例：</p>
|
||
<div class="code-block">
|
||
const apiKey = 'your_api_key_here';
|
||
const response = await fetch('https://api.example.com/data', {
|
||
headers: {
|
||
'Authorization': `Bearer ${apiKey}`
|
||
}
|
||
});
|
||
const data = await response.json();
|
||
console.log(data);
|
||
</div>
|
||
|
||
<h3>API 限制</h3>
|
||
<p>请注意以下 API 使用限制：</p>
|
||
<ul>
|
||
<li>免费账户每分钟最多 100 次请求</li>
|
||
<li>付费账户每分钟最多 1000 次请求</li>
|
||
<li>所有账户每天最多 10,000 次请求</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="content-body" id="integrations-content" style="display: none;">
|
||
<h2>系统集成</h2>
|
||
<p>我们的服务可以与其他系统集成，以增强您的工作流程。支持的集成包括：电子邮件、项目管理工具、客户关系管理工具等。</p>
|
||
|
||
<h3>电子邮件集成</h3>
|
||
<p>将我们的服务与您的电子邮件系统集成，可以实现自动通知和提醒功能。</p>
|
||
|
||
<h3>项目管理工具</h3>
|
||
<p>与流行项目管理工具（如 Jira、Trello 等）集成，可以同步任务和项目进度。</p>
|
||
|
||
<h3>客户关系管理工具</h3>
|
||
<p>与客户关系管理工具（如 Salesforce、HubSpot 等）集成，可以统一管理和分析客户数据。</p>
|
||
</div>
|
||
|
||
<div class="content-body" id="faq-content" style="display: none;">
|
||
<h2>常见问题</h2>
|
||
<p>如果您在使用过程中遇到问题，可以查阅以下常见问题解答：</p>
|
||
|
||
<h3>如何重置密码？</h3>
|
||
<p>要重置密码，请访问登录页面，点击"忘记密码"链接，按照提示操作即可。</p>
|
||
|
||
<h3>如何升级账户？</h3>
|
||
<p>要升级您的账户，请导航到"账户设置"页面，选择"订阅"或"计划"选项卡，然后选择您希望升级到的计划。</p>
|
||
|
||
<h3>如何导出数据？</h3>
|
||
<p>要导出您的数据，请导航到"数据管理"页面，选择您要导出的数据集，然后点击"导出"按钮。支持的导出格式包括 CSV、Excel 和 JSON。</p>
|
||
</div>
|
||
|
||
<div class="content-body" id="troubleshooting-content" style="display: none;">
|
||
<h2>故障排除</h2>
|
||
<p>在遇到问题时，您可以参考以下故障排除指南：</p>
|
||
|
||
<h3>登录问题</h3>
|
||
<p>如果您无法登录，请尝试以下步骤：</p>
|
||
<ol>
|
||
<li>检查您的用户名和密码是否正确</li>
|
||
<li>确保您的账户已激活</li>
|
||
<li>尝试使用不同的浏览器或设备</li>
|
||
<li>清除浏览器缓存和 cookies</li>
|
||
<li>联系支持团队获取进一步帮助</li>
|
||
</ol>
|
||
|
||
<h3>数据同步问题</h3>
|
||
<p>如果您的数据不同步，请尝试以下步骤：</p>
|
||
<ol>
|
||
<li>检查您的互联网连接</li>
|
||
<li>确保您的账户有权限访问相关数据</li>
|
||
<li>检查数据源是否可用</li>
|
||
<li>尝试重新启动同步过程</li>
|
||
<li>联系支持团队获取进一步帮助</li>
|
||
</ol>
|
||
|
||
<h3>性能问题</h3>
|
||
<p>如果遇到性能问题，请尝试以下步骤：</p>
|
||
<ol>
|
||
<li>确保您使用的是最新版本的浏览器</li>
|
||
<li>减少同时打开的标签页和应用程序</li>
|
||
<li>清除浏览器缓存</li>
|
||
<li>联系支持团队获取进一步帮助</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="content-body" id="contact-content" style="display: none;">
|
||
<h2>联系我们</h2>
|
||
<p>如果您需要进一步的帮助，可以通过以下方式联系我们：</p>
|
||
|
||
<h3>电子邮件</h3>
|
||
<p>发送电子邮件到 support@example.com，我们的支持团队会在24小时内回复。</p>
|
||
|
||
<h3>电话</h3>
|
||
<p>拨打我们的支持热线：400-123-4567（工作日 9:00-18:00）</p>
|
||
|
||
<h3>在线聊天</h3>
|
||
<p>登录您的账户后，点击右下角的聊天图标，与我们的客服人员实时交流。</p>
|
||
|
||
<h3>提交工单</h3>
|
||
<p>在"帮助中心"页面，点击"提交工单"按钮，填写详细问题描述，我们的团队会尽快处理。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const documents = [
|
||
{
|
||
id: 1,
|
||
title: "入门指南",
|
||
content: "欢迎使用我们的服务。本帮助文档将指导您如何使用我们的产品。无论您是新手还是有经验的用户，都可以在这里找到有价值的帮助。开始使用请按照以下步骤操作：1. 访问我们的官方网站并注册一个账户；2. 完成账户验证过程；3. 登录到您的账户；4. 熟悉界面布局和主要功能。",
|
||
url: "#getting-started"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "功能概览",
|
||
content: "我们的产品提供以下核心功能：数据管理、协作工具、自动化工作流、分析与报告。",
|
||
url: "#features"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "创建账户",
|
||
content: "要开始使用我们的服务，请访问我们的官方网站并注册一个账户。注册流程包括填写必要的信息、阅读并同意服务条款、创建账户。",
|
||
url: "#create-account"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "仪表盘使用",
|
||
content: "仪表盘是您管理所有活动的中心位置。仪表盘主页面提供以下关键信息：最近活动列表、待处理任务、重要通知、数据统计摘要。",
|
||
url: "#dashboard"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "账户设置",
|
||
content: "您可以根据自己的需求自定义账户设置，包括个人资料、密码、通知等。",
|
||
url: "#settings"
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "API 使用",
|
||
content: "API 使您能够集成我们的服务到您自己的应用程序中。要开始使用 API，请先获取 API 密钥。",
|
||
url: "#api"
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "系统集成",
|
||
content: "我们的服务可以与其他系统集成，以增强您的工作流程。支持的集成包括：电子邮件、项目管理工具、客户关系管理工具等。",
|
||
url: "#integrations"
|
||
},
|
||
{
|
||
id: 8,
|
||
title: "常见问题",
|
||
content: "如果您在使用过程中遇到问题，可以查阅常见问题解答。我们整理了一些常见问题，以帮助您快速找到解决方案。",
|
||
url: "#faq"
|
||
},
|
||
{
|
||
id: 9,
|
||
title: "故障排除",
|
||
content: "在遇到问题时，您可以参考我们的故障排除指南。这些指南提供了详细的步骤，帮助您诊断和解决常见问题。",
|
||
url: "#troubleshooting"
|
||
},
|
||
{
|
||
id: 10,
|
||
title: "联系我们",
|
||
content: "如果您需要进一步的帮助，可以通过以下方式联系我们：电子邮件、电话、在线聊天。",
|
||
url: "#contact"
|
||
}
|
||
];
|
||
|
||
document.getElementById('search-input').addEventListener('input', function() {
|
||
const searchTerm = this.value.trim().toLowerCase();
|
||
|
||
if (searchTerm === '') {
|
||
document.getElementById('search-results').style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
const results = searchDocuments(searchTerm);
|
||
displaySearchResults(results);
|
||
});
|
||
|
||
function searchDocuments(term) {
|
||
return documents.filter(doc =>
|
||
doc.title.toLowerCase().includes(term) || doc.content.toLowerCase().includes(term));
|
||
}
|
||
|
||
function displaySearchResults(results) {
|
||
const resultsContainer = document.getElementById('search-results');
|
||
resultsContainer.style.display = 'block';
|
||
|
||
if (results.length === 0) {
|
||
resultsContainer.innerHTML = '<p>没有找到匹配的结果。</p>';
|
||
return;
|
||
}
|
||
|
||
let html = '';
|
||
results.forEach(result => {
|
||
html += `
|
||
<div class="search-result-item">
|
||
<div class="search-result-title">${result.title}</div>
|
||
<div class="search-result-desc">${getExcerpt(result.content, document.getElementById('search-input').value)}</div>
|
||
<div class="search-result-url">${result.url}</div>
|
||
</div>
|
||
`;
|
||
});
|
||
resultsContainer.innerHTML = html;
|
||
}
|
||
|
||
function getExcerpt(content, searchTerm) {
|
||
const words = searchTerm.split(' ');
|
||
let excerpt = content;
|
||
for (let word of words) {
|
||
if (word.trim() !== '') {
|
||
const regex = new RegExp(word, 'gi');
|
||
excerpt = excerpt.replace(regex, match => `<strong>${match}</strong>`);
|
||
}
|
||
}
|
||
const start = content.indexOf(searchTerm);
|
||
if (start !== -1) {
|
||
const end = start + searchTerm.length;
|
||
let excerptStart = Math.max(0, start - 30);
|
||
let excerptEnd = Math.min(content.length, end + 30);
|
||
excerpt = content.substring(excerptStart, excerptEnd);
|
||
if (excerptStart > 0) excerpt = '...' + excerpt;
|
||
if (excerptEnd < content.length) excerpt += '...';
|
||
const regex = new RegExp(searchTerm, 'gi');
|
||
excerpt = excerpt.replace(regex, match => `<strong>${match}</strong>`);
|
||
}
|
||
return excerpt;
|
||
}
|
||
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
document.querySelectorAll('.nav-link').forEach(item => {
|
||
item.classList.remove('active');
|
||
});
|
||
|
||
this.classList.add('active');
|
||
|
||
const section = this.getAttribute('data-section');
|
||
|
||
document.querySelectorAll('.content-body').forEach(content => {
|
||
content.style.display = 'none';
|
||
});
|
||
|
||
document.getElementById(`${section}-content`).style.display = 'block';
|
||
|
||
document.getElementById('current-section-title').textContent = this.textContent;
|
||
|
||
if (window.innerWidth <= 768) {
|
||
document.getElementById('sidebar').classList.remove('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
document.getElementById('sidebar-toggle').addEventListener('click', function() {
|
||
document.getElementById('sidebar').classList.toggle('active');
|
||
});
|
||
|
||
document.getElementById('mobile-nav-close').addEventListener('click', function() {
|
||
document.getElementById('sidebar').classList.remove('active');
|
||
});
|
||
|
||
window.onload = function() {
|
||
document.getElementById('getting-started-content').style.display = 'block';
|
||
};
|
||
</script>
|
||
</body>
|
||
</html> |