如何在GitHub Pages上通过表单生成自定义下载URL？

完全可以实现，GitHub Pages支持静态HTML和JavaScript，不需要后端服务就能搞定这个需求。核心思路是用前端JS收集用户的功能选择，匹配预设的下载包映射，然后自动生成并触发下载。具体步骤如下：

1. 整理功能-下载包映射表 #

先把24个下载包的文件名和对应的功能组合一一对应起来，比如某个包对应「USB支持+网络功能」，另一个对应「自定义主题+USB支持」。把这些对应关系写成一个JavaScript对象，方便后续匹配。

2. 编写HTML表单 #

用复选框（或单选框，根据功能是否互斥）让用户选择需要的功能，再添加一个下载触发按钮。示例代码：

<form id="downloadForm">
  <h3>选择你需要的功能</h3>
  <label><input type="checkbox" name="feature" value="usb"> USB支持</label><br>
  <label><input type="checkbox" name="feature" value="network"> 网络功能</label><br>
  <label><input type="checkbox" name="feature" value="theme"> 自定义主题</label><br>
  <!-- 根据你的实际功能补充更多选项 -->
  <button type="button" id="downloadBtn">生成下载链接</button>
</form>

3. 编写JavaScript逻辑 #

监听按钮点击事件，收集用户选中的功能，匹配对应的下载文件名，最后拼接完整URL并触发下载。示例代码：

// 替换成你实际的功能组合-文件名映射
const featureToPackage = {
  "usb": "wLaunchELF_usb.zip",
  "usb+network": "wLaunchELF_usb_network.zip",
  "usb+theme": "wLaunchELF_usb_theme.zip",
  // 补充剩余21种组合的映射关系
};

document.getElementById('downloadBtn').addEventListener('click', function() {
  // 收集选中的功能并排序，避免选择顺序不同导致匹配失败
  const selected = Array.from(document.querySelectorAll('input[name="feature"]:checked'))
    .map(item => item.value)
    .sort()
    .join('+');
  
  const targetPackage = featureToPackage[selected];
  if (targetPackage) {
    // 拼接GitHub Releases的下载URL
    const downloadUrl = `https://github.com/israpps/wLaunchELF_ISR/releases/download/latest/${targetPackage}`;
    // 触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = targetPackage;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  } else {
    alert('没有匹配的下载包，请检查你的功能选择');
  }
});

注意事项 #

• 务必准确整理所有24种功能组合与文件名的映射，这是功能正常运行的核心
• 如果存在互斥功能（比如某些功能不能同时选），可以在JS里添加校验逻辑，阻止无效选择
• 直接把包含上述HTML和JS的文件上传到GitHub Pages托管即可，不需要额外配置

内容的提问来源于stack exchange，提问作者El_isra