hexo-afdian-plugin

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hexo爱发电插件安装向导</title>  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">  <style> :root { --primary-color: #6200ee; --primary-light: #bb86fc; --primary-dark: #3700b3; --secondary-color: #03dac6; --secondary-dark: #018786; --background: #f5f5f5; --surface: #ffffff; --error: #b00020; --on-primary: #ffffff; --on-secondary: #000000; --on-background: #000000; --on-surface: #000000; --on-error: #ffffff; } body { background-color: var(--background); color: var(--on-background); font-family: 'Roboto', 'Noto Sans SC', sans-serif; min-height: 100vh; display: flex; flex-direction: column; } .wizard-container { max-width: 1200px; margin: 2rem auto; background-color: var(--surface); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); overflow: hidden; flex: 1; } .wizard-header { background-color: var(--primary-color); color: var(--on-primary); padding: 1.5rem; text-align: center; } .wizard-title { margin: 0; font-weight: 500; } .wizard-subtitle { margin: 0.5rem 0 0; font-weight: 300; opacity: 0.9; } .wizard-body { display: flex; min-height: 500px; } .wizard-nav { width: 280px; background-color: #f8f9fa; border-right: 1px solid #e9ecef; padding: 1.5rem 0; } .wizard-nav-item { padding: 1rem 1.5rem; display: flex; align-items: center; color: #495057; position: relative; cursor: pointer; transition: all 0.3s ease; } .wizard-nav-item.active { color: var(--primary-color); background-color: rgba(98, 0, 238, 0.05); font-weight: 500; } .wizard-nav-item.completed { color: var(--secondary-dark); } .wizard-nav-item.disabled { color: #adb5bd; cursor: not-allowed; } .wizard-nav-item:not(.disabled):hover { background-color: rgba(98, 0, 238, 0.03); } .wizard-nav-icon { width: 32px; height: 32px; border-radius: 50%; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; margin-right: 1rem; transition: all 0.3s ease; } .wizard-nav-item.active .wizard-nav-icon { background-color: var(--primary-color); color: var(--on-primary); } .wizard-nav-item.completed .wizard-nav-icon { background-color: var(--secondary-dark); color: var(--on-primary); } .wizard-nav-text { flex: 1; } .wizard-content { flex: 1; padding: 2rem; overflow-y: auto; } .wizard-step { display: none; } .wizard-step.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .wizard-step-title { margin-bottom: 1.5rem; color: var(--primary-dark); font-weight: 500; } .wizard-progress { height: 6px; margin: 0; border-radius: 0; } .wizard-progress .progress-bar { background-color: var(--primary-color); transition: width 0.5s ease; } .wizard-footer { display: flex; justify-content: space-between; padding: 1.5rem 2rem; background-color: #f8f9fa; border-top: 1px solid #e9ecef; } .btn-wizard { padding: 0.5rem 1.5rem; border-radius: 4px; transition: all 0.3s ease; } .btn-wizard-primary { background-color: var(--primary-color); color: var(--on-primary); border: none; } .btn-wizard-primary:hover:not(:disabled) { background-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .btn-wizard-secondary { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .btn-wizard-secondary:hover:not(:disabled) { background-color: rgba(98, 0, 238, 0.05); } .btn-wizard:disabled { opacity: 0.5; cursor: not-allowed; } .option-card { border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; transition: all 0.3s ease; cursor: pointer; position: relative; } .option-card:hover { border-color: var(--primary-light); box-shadow: 0 2px 8px rgba(98, 0, 238, 0.1); transform: translateY(-2px); } .option-card.selected { border-color: var(--primary-color); background-color: rgba(98, 0, 238, 0.05); } .option-card.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 1rem; right: 1rem; color: var(--primary-color); } .option-card-icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 1rem; } .option-card-title { font-weight: 500; margin-bottom: 0.5rem; } .option-card-description { color: #6c757d; font-size: 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--primary-light); box-shadow: 0 0 0 0.25rem rgba(98, 0, 238, 0.25); } .help-tooltip { color: var(--primary-color); cursor: pointer; margin-left: 0.5rem; } .help-collapse { background-color: #f8f9fa; border-radius: 4px; padding: 1rem; margin-top: 1rem; border-left: 4px solid var(--primary-light); } .preview-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed #dee2e6; } .preview-title { margin-bottom: 1rem; color: var(--primary-dark); font-weight: 500; } .preview-container { border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; min-height: 200px; background-color: #f8f9fa; } /* 响应式调整 */ @media (max-width: 992px) { .wizard-body { flex-direction: column; } .wizard-nav { width: 100%; border-right: none; border-bottom: 1px solid #e9ecef; padding: 0.5rem 0; overflow-x: auto; display: flex; } .wizard-nav-item { padding: 0.75rem 1rem; flex-direction: column; text-align: center; min-width: 100px; } .wizard-nav-icon { margin-right: 0; margin-bottom: 0.5rem; } } @media (max-width: 576px) { .wizard-container { margin: 0; border-radius: 0; box-shadow: none; } .wizard-content { padding: 1rem; } .wizard-footer { padding: 1rem; } .btn-wizard { padding: 0.5rem 1rem; } } /* 无障碍增强 */ .btn:focus, .option-card:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* 键盘导航焦点样式 */ .keyboard-focus:focus { box-shadow: 0 0 0 3px var(--primary-light); outline: none; } /* 动画过渡 */ .fade-transition { transition: opacity 0.3s ease, transform 0.3s ease; } /* 触摸反馈 */ @media (hover: none) { .option-card:active { background-color: rgba(98, 0, 238, 0.1); } .btn-wizard:active { opacity: 0.8; } } </style> </head> <body> <div class="wizard-container">  <div class="wizard-header"> <h1 class="wizard-title">Hexo爱发电插件安装向导</h1> <p class="wizard-subtitle">轻松配置并集成爱发电赞助功能到您的Hexo博客</p> </div>  <div class="progress wizard-progress"> <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>  <div class="wizard-body">  <div class="wizard-nav"> <div class="wizard-nav-item active" data-step="1" tabindex="0"> <div class="wizard-nav-icon"> <i class="fas fa-home"></i> </div> <div class="wizard-nav-text">欢迎使用</div> </div> <div class="wizard-nav-item" data-step="2" tabindex="0"> <div class="wizard-nav-icon"> <i class="fas fa-cog"></i> </div> <div class="wizard-nav-text">基本配置</div> </div> <div class="wizard-nav-item disabled" data-step="3" tabindex="0"> <div class="wizard-nav-icon"> <i class="fas fa-palette"></i> </div> <div class="wizard-nav-text">外观设置</div> </div> <div class="wizard-nav-item disabled" data-step="4" tabindex="0"> <div class="wizard-nav-icon"> <i class="fas fa-puzzle-piece"></i> </div> <div class="wizard-nav-text">集成方式</div> </div> <div class="wizard-nav-item disabled" data-step="5" tabindex="0"> <div class="wizard-nav-icon"> <i class="fas fa-check-circle"></i> </div> <div class="wizard-nav-text">完成安装</div> </div> </div>  <div class="wizard-content">  <div class="wizard-step active" id="step1"> <h2 class="wizard-step-title">欢迎使用Hexo爱发电插件安装向导</h2> <div class="alert alert-info"> <i class="fas fa-info-circle me-2"></i> 本向导将帮助您配置爱发电插件，并将其集成到您的Hexo博客中。 </div> <p>通过这个插件，您可以在Hexo博客中展示爱发电的赞助信息，包括：</p> <ul class="mb-4"> <li>展示赞助者头像、名称、金额和时间</li> <li>高亮显示超过设定金额的赞助</li> <li>支持多种展示样式和集成方式</li> <li>自动缓存数据，减少API调用</li> </ul> <p>在开始之前，请确保您已经：</p> <div class="option-card mb-3"> <div class="option-card-icon"> <i class="fas fa-download"></i> </div> <h3 class="option-card-title">安装Hexo爱发电插件</h3> <p class="option-card-description"> 在Hexo博客根目录下执行 <code>npm install hexo-plugin-afdian --save</code> </p> </div> <div class="option-card mb-3"> <div class="option-card-icon"> <i class="fas fa-key"></i> </div> <h3 class="option-card-title">准备爱发电API凭据</h3> <p class="option-card-description"> 在爱发电开发者页面获取用户ID和Token </p> </div> <p class="mt-4">准备好了吗？点击"下一步"开始配置！</p> </div>  <div class="wizard-step" id="step2"> <h2 class="wizard-step-title">基本配置</h2> <p>请填写您的爱发电API凭据和基本配置信息：</p> <form id="configForm"> <div class="mb-3"> <label for="userId" class="form-label"> 爱发电用户ID <i class="fas fa-question-circle help-tooltip" data-bs-toggle="collapse" data-bs-target="#userIdHelp" aria-expanded="false"></i> </label> <input type="text" class="form-control" id="userId" required> <div class="collapse help-collapse" id="userIdHelp"> <p class="mb-0"> <i class="fas fa-info-circle me-1"></i> 您可以在爱发电开发者页面 <a href="https://afdian.com/dashboard/dev" target="_blank">https://afdian.com/dashboard/dev</a> 获取用户ID。 </p> </div> </div> <div class="mb-3"> <label for="token" class="form-label"> 爱发电Token <i class="fas fa-question-circle help-tooltip" data-bs-toggle="collapse" data-bs-target="#tokenHelp" aria-expanded="false"></i> </label> <input type="text" class="form-control" id="token" required> <div class="collapse help-collapse" id="tokenHelp"> <p class="mb-0"> <i class="fas fa-info-circle me-1"></i> 您可以在爱发电开发者页面 <a href="https://afdian.com/dashboard/dev" target="_blank">https://afdian.com/dashboard/dev</a> 获取Token。 </p> </div> </div> <div class="mb-3"> <label for="sponsorUrl" class="form-label">赞助链接</label> <input type="url" class="form-control" id="sponsorUrl" placeholder="https://afdian.com/你的用户名"> <div class="form-text">访问者点击赞助按钮时跳转的链接</div> </div> <div class="mb-3"> <label for="cacheTime" class="form-label">缓存时间（分钟）</label> <input type="number" class="form-control" id="cacheTime" value="60" min="1"> <div class="form-text">数据缓存时间，减少API调用频率</div> </div> </form> </div>  <div class="wizard-step" id="step3"> <h2 class="wizard-step-title">外观设置</h2> <p>选择爱发电组件的显示样式和自定义文本：</p> <div class="mb-4"> <label class="form-label">选择主题样式</label> <div class="row g-3"> <div class="col-md-6"> <div class="option-card" data-theme="1" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-list"></i> </div> <h3 class="option-card-title">默认列表样式</h3> <p class="option-card-description"> 简洁的列表布局，展示赞助者信息 </p> </div> </div> <div class="col-md-6"> <div class="option-card" data-theme="2" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-image"></i> </div> <h3 class="option-card-title">顶部图片样式</h3> <p class="option-card-description"> 带有顶部大图的展示方式 </p> </div> </div> <div class="col-md-6"> <div class="option-card" data-theme="3" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-scroll"></i> </div> <h3 class="option-card-title">滚动样式</h3> <p class="option-card-description"> 赞助者信息以滚动方式展示 </p> </div> </div> <div class="col-md-6"> <div class="option-card" data-theme="4" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-store"></i> </div> <h3 class="option-card-title">商品展示样式</h3> <p class="option-card-description"> 以商品卡片形式展示赞助选项 </p> </div> </div> </div> </div> <div class="mb-3"> <label for="title" class="form-label">标题</label> <input type="text" class="form-control" id="title" value="赞助名单"> </div> <div class="mb-3"> <label for="description" class="form-label">描述</label> <textarea class="form-control" id="description" rows="2">感谢您的赞助！</textarea> </div> <div class="mb-3"> <label for="buttonText" class="form-label">按钮文本</label> <input type="text" class="form-control" id="buttonText" value="赞赏作者"> </div> <div class="mb-3"> <label for="sponsorNumber" class="form-label">高亮显示金额阈值</label> <input type="number" class="form-control" id="sponsorNumber" value="66"> <div class="form-text">超过此金额的赞助将高亮显示</div> </div> <div class="preview-section"> <h3 class="preview-title">预览效果</h3> <div class="preview-container" id="themePreview"> <div class="text-center py-4 text-muted"> <i class="fas fa-folder-open fa-3x mb-3"></i> <p>请查看demo文件夹下的HTML文件以预览各种样式效果</p> <div class="mt-3"> <a href="#" id="demoLink" class="btn btn-primary" target="_blank"> <i class="fas fa-external-link-alt me-2"></i>查看当前样式演示 </a> </div> <p class="mt-3 small"> 可用的演示文件：<br> - demo/index.html (默认列表样式)<br> - demo/style-top-image.html (顶部图片样式)<br> - demo/style-scroll.html (滚动样式)<br> - demo/style-shop.html (商品展示样式) </p> </div> </div> </div> </div>  <div class="wizard-step" id="step4"> <h2 class="wizard-step-title">集成方式</h2> <p>选择如何将爱发电组件集成到您的Hexo博客中：</p> <div class="mb-4"> <div class="option-card selected" data-integration="page" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-file"></i> </div> <h3 class="option-card-title">独立页面</h3> <p class="option-card-description"> 创建一个独立的赞助页面，可通过 /afdian/ 路径访问 </p> </div> <div class="option-card" data-integration="sidebar" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-columns"></i> </div> <h3 class="option-card-title">侧边栏组件</h3> <p class="option-card-description"> 在博客侧边栏添加爱发电赞助组件 </p> </div> <div class="option-card" data-integration="post" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-paragraph"></i> </div> <h3 class="option-card-title">文章底部</h3> <p class="option-card-description"> 在每篇文章底部添加爱发电赞助组件 </p> </div> <div class="option-card" data-integration="about" tabindex="0"> <div class="option-card-icon"> <i class="fas fa-user"></i> </div> <h3 class="option-card-title">关于页面</h3> <p class="option-card-description"> 在关于页面添加爱发电赞助组件 </p> </div> </div> <div class="alert alert-warning"> <i class="fas fa-exclamation-triangle me-2"></i> 不同的集成方式可能需要对主题文件进行修改，请根据实际情况选择。 </div> <div id="integrationDetails" class="mt-4"> <h4>独立页面集成说明</h4> <p>这是最简单的集成方式，无需修改主题文件：</p> <ol> <li>完成配置后，可通过 <code>/afdian/</code> 路径访问赞助页面</li> <li>在导航菜单中添加链接： <pre class="bg-light p-2 mt-2"><code># 在主题的_config.yml中 menu: 赞助: /afdian/</code></pre> </li> </ol> </div> </div>  <div class="wizard-step" id="step5"> <h2 class="wizard-step-title">完成安装</h2> <div class="alert alert-success mb-4"> <i class="fas fa-check-circle me-2"></i> 恭喜！您已完成Hexo爱发电插件的配置。 </div> <p>以下是您的配置信息：</p> <div class="bg-light p-3 rounded mb-4"> <pre id="configOutput" class="mb-0"></pre> </div> <p>接下来，请将以上配置添加到您的Hexo博客的<code>_config.yml</code>文件中。</p> <div class="mb-4"> <button id="copyConfig" class="btn btn-wizard btn-wizard-secondary"> <i class="fas fa-copy me-2"></i>复制配置 </button> </div> <p>完成配置后，请执行以下命令重新生成您的博客：</p> <div class="bg-light p-3 rounded mb-4"> <pre class="mb-0">hexo clean hexo generate</pre> </div> <p>然后您就可以通过选择的集成方式访问爱发电赞助功能了！</p> <div class="alert alert-info"> <i class="fas fa-info-circle me-2"></i> 如果您有任何问题，请参考<a href="https://github.com/yourusername/hexo-plugin-afdian" target="_blank">插件文档</a>或提交Issue。 </div> </div> </div> </div>  <div class="wizard-footer"> <button id="prevBtn" class="btn btn-wizard btn-wizard-secondary" disabled> <i class="fas fa-arrow-left me-2"></i>上一步 </button> <button id="nextBtn" class="btn btn-wizard btn-wizard-primary"> 下一步<i class="fas fa-arrow-right ms-2"></i> </button> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>  <script> document.addEventListener('DOMContentLoaded', function() { // 初始化变量 let currentStep = 1; const totalSteps = 5; const progressBar = document.querySelector('.progress-bar'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); // 主题预览信息 const themePreviewInfo = { 1: { title: '默认列表样式', description: '简洁的列表布局，展示赞助者信息', demoPath: '../demo/index.html' }, 2: { title: '顶部图片样式', description: '带有顶部大图的展示方式', demoPath: '../demo/style-top-image.html' }, 3: { title: '滚动样式', description: '赞助者信息以滚动方式展示', demoPath: '../demo/style-scroll.html' }, 4: { title: '商品展示样式', description: '以商品卡片形式展示赞助选项', demoPath: '../demo/style-shop.html' } }; // 集成方式说明 const integrationDetails = { page: `<h4>独立页面集成说明</h4> <p>这是最简单的集成方式，无需修改主题文件：</p> <ol> <li>完成配置后，可通过 <code>/afdian/</code> 路径访问赞助页面</li> <li>在导航菜单中添加链接： <pre class="bg-light p-2 mt-2"><code># 在主题的_config.yml中 menu: 赞助: /afdian/</code></pre> </li> </ol>`, sidebar: `<h4>侧边栏组件集成说明</h4> <p>在博客侧边栏添加爱发电赞助组件：</p> <ol> <li>根据您使用的主题，修改相应的侧边栏模板文件</li> <li>在适当位置添加以下代码： <pre class="bg-light p-2 mt-2"><code><%- afdian_widget() %></code></pre> </li> <li>在主题配置文件中启用侧边栏组件</li> </ol> <p>详细的主题集成方法请参考文档。</p>`, post: `<h4>文章底部集成说明</h4> <p>在每篇文章底部添加爱发电赞助组件：</p> <ol> <li>修改主题的文章模板文件</li> <li>在文章底部适当位置添加以下代码： <pre class="bg-light p-2 mt-2"><code><%- afdian_widget() %></code></pre> </li> </ol> <p>详细的主题集成方法请参考文档。</p>`, about: `<h4>关于页面集成说明</h4> <p>在关于页面添加爱发电赞助组件：</p> <ol> <li>编辑 <code>source/about/index.md</code> 文件</li> <li>在适当位置添加以下代码： <pre class="bg-light p-2 mt-2"><code>{% raw %} <%- afdian_widget() %> {% endraw %}</code></pre> </li> </ol>` }; // 更新进度条 function updateProgress() { const progress = (currentStep / totalSteps) * 100; progressBar.style.width = `${progress}%`; progressBar.setAttribute('aria-valuenow', progress); } // 显示当前步骤 function showStep(step) { // 隐藏所有步骤 document.querySelectorAll('.wizard-step').forEach(el => { el.classList.remove('active'); }); // 显示当前步骤 document.getElementById(`step${step}`).classList.add('active'); // 更新导航项 document.querySelectorAll('.wizard-nav-item').forEach(el => { el.classList.remove('active', 'completed'); const itemStep = parseInt(el.dataset.step); if (itemStep < step) { el.classList.add('completed'); el.classList.remove('disabled'); } else if (itemStep === step) { el.classList.add('active'); el.classList.remove('disabled'); } else if (itemStep <= step + 1) { el.classList.remove('disabled'); } else { el.classList.add('disabled'); } }); // 更新按钮状态 prevBtn.disabled = step === 1; if (step === totalSteps) { nextBtn.innerHTML = '完成 <i class="fas fa-check ms-2"></i>'; generateConfig(); } else { nextBtn.innerHTML = '下一步 <i class="fas fa-arrow-right ms-2"></i>'; } // 更新进度条 updateProgress(); } // 生成配置输出 function generateConfig() { const userId = document.getElementById('userId').value || '您的爱发电用户ID'; const token = document.getElementById('token').value || '您的爱发电Token'; const sponsorUrl = document.getElementById('sponsorUrl').value || 'https://afdian.com/你的用户名'; const title = document.getElementById('title').value || '赞助名单'; const description = document.getElementById('description').value || '感谢您的赞助！'; const buttonText = document.getElementById('buttonText').value || '赞赏作者'; const cacheTime = document.getElementById('cacheTime').value || '60'; const sponsorNumber = document.getElementById('sponsorNumber').value || '66'; let theme = '1'; document.querySelectorAll('[data-theme]').forEach(el => { if (el.classList.contains('selected')) { theme = el.dataset.theme; } }); const config = `# 爱发电插件配置 afdian: # 必填项 userId: '${userId}' token: '${token}' # 可选项 sponsorUrl: '${sponsorUrl}' title: '${title}' description: '${description}' buttonText: '${buttonText}' cacheTime: ${cacheTime} sponsorNumber: ${sponsorNumber} theme: ${theme}`; document.getElementById('configOutput').textContent = config; } // 下一步按钮点击事件 nextBtn.addEventListener('click', function() { if (currentStep === totalSteps) { // 完成安装 alert('配置已完成！请将配置添加到您的Hexo博客的_config.yml文件中。'); return; } // 表单验证 if (currentStep === 2) { const userId = document.getElementById('userId').value.trim(); const token = document.getElementById('token').value.trim(); const sponsorUrl = document.getElementById('sponsorUrl').value.trim(); const cacheTime = document.getElementById('cacheTime').value.trim(); let errorMessage = ''; if (!userId) { errorMessage += '- 爱发电用户ID不能为空\n'; } if (!token) { errorMessage += '- 爱发电Token不能为空\n'; } if (!sponsorUrl) { errorMessage += '- 赞助链接不能为空\n'; } else if (!sponsorUrl.startsWith('http://') && !sponsorUrl.startsWith('https://')) { errorMessage += '- 赞助链接必须以http://或https://开头\n'; } if (!cacheTime) { errorMessage += '- 缓存时间不能为空\n'; } else if (isNaN(cacheTime) || parseInt(cacheTime) < 1) { errorMessage += '- 缓存时间必须是大于0的数字\n'; } if (errorMessage) { alert('请修正以下错误：\n' + errorMessage); return; } } currentStep++; showStep(currentStep); }); // 上一步按钮点击事件 prevBtn.addEventListener('click', function() { if (currentStep > 1) { currentStep--; showStep(currentStep); } }); // 导航项点击事件 document.querySelectorAll('.wizard-nav-item').forEach(el => { el.addEventListener('click', function() { if (this.classList.contains('disabled')) { return; } const targetStep = parseInt(this.dataset.step); // 如果是向前导航，需要验证当前步骤 if (targetStep > currentStep) { // 验证步骤2的表单 if (currentStep === 2) { const userId = document.getElementById('userId').value.trim(); const token = document.getElementById('token').value.trim(); const sponsorUrl = document.getElementById('sponsorUrl').value.trim(); const cacheTime = document.getElementById('cacheTime').value.trim(); let errorMessage = ''; if (!userId) { errorMessage += '- 爱发电用户ID不能为空\n'; } if (!token) { errorMessage += '- 爱发电Token不能为空\n'; } if (!sponsorUrl) { errorMessage += '- 赞助链接不能为空\n'; } else if (!sponsorUrl.startsWith('http://') && !sponsorUrl.startsWith('https://')) { errorMessage += '- 赞助链接必须以http://或https://开头\n'; } if (!cacheTime) { errorMessage += '- 缓存时间不能为空\n'; } else if (isNaN(cacheTime) || parseInt(cacheTime) < 1) { errorMessage += '- 缓存时间必须是大于0的数字\n'; } if (errorMessage) { alert('请修正以下错误后再继续：\n' + errorMessage); return; } } // 验证步骤3的表单（确保选择了主题） if (currentStep === 3) { let themeSelected = false; document.querySelectorAll('[data-theme]').forEach(item => { if (item.classList.contains('selected')) { themeSelected = true; } }); if (!themeSelected) { alert('请选择一个主题样式后再继续'); return; } } // 验证步骤4的表单（确保选择了集成方式） if (currentStep === 4) { let integrationSelected = false; document.querySelectorAll('[data-integration]').forEach(item => { if (item.classList.contains('selected')) { integrationSelected = true; } }); if (!integrationSelected) { alert('请选择一个集成方式后再继续'); return; } } } currentStep = targetStep; showStep(currentStep); }); }); // 主题选项卡点击事件 document.querySelectorAll('[data-theme]').forEach(el => { el.addEventListener('click', function() { document.querySelectorAll('[data-theme]').forEach(item => { item.classList.remove('selected'); }); this.classList.add('selected'); // 更新预览链接 const themeId = this.dataset.theme; const demoInfo = themePreviewInfo[themeId]; const demoLink = document.getElementById('demoLink'); demoLink.href = demoInfo.demoPath; demoLink.textContent = `查看${demoInfo.title}演示`; }); }); // 集成方式选项卡点击事件 document.querySelectorAll('[data-integration]').forEach(el => { el.addEventListener('click', function() { document.querySelectorAll('[data-integration]').forEach(item => { item.classList.remove('selected'); }); this.classList.add('selected'); // 更新集成说明 const integrationType = this.dataset.integration; document.getElementById('integrationDetails').innerHTML = integrationDetails[integrationType]; }); }); // 复制配置按钮点击事件 document.getElementById('copyConfig').addEventListener('click', function() { const configText = document.getElementById('configOutput').textContent; navigator.clipboard.writeText(configText).then(() => { this.innerHTML = '<i class="fas fa-check me-2"></i>已复制'; setTimeout(() => { this.innerHTML = '<i class="fas fa-copy me-2"></i>复制配置'; }, 2000); }); }); // 键盘导航 document.addEventListener('keydown', function(e) { if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { if (currentStep < totalSteps) { nextBtn.click(); } } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { if (currentStep > 1) { prevBtn.click(); } } }); // 为可聚焦元素添加键盘焦点样式 document.querySelectorAll('.option-card, .btn-wizard').forEach(el => { el.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); el.addEventListener('focus', function() { this.classList.add('keyboard-focus'); }); el.addEventListener('blur', function() { this.classList.remove('keyboard-focus'); }); }); // 初始化 updateProgress(); }); </script> </body> </html>