部署GitHub Pages后页面无法接收跨页传递的数据求助

核心原因：GitHub Pages的路径解析差异 #

本地运行时网站根目录是本地服务器的根（如http://localhost:8000/），但部署到GitHub Pages后，网站根目录会变为https://<你的用户名>.github.io/<仓库名>/，相对路径的解析逻辑和本地完全不同，这是导致功能失效的最常见原因。

1. 修正页面跳转路径 #

当前跳转代码使用的相对路径在子路径环境下会解析错误，调整为适配GitHub Pages的路径：

$(document).ready(function() {
    $(".cardctn a").click(function(e) {
        e.preventDefault();
        const champdata = $(this).data('champ');
        // 动态获取当前网站的基础路径，适配本地和GitHub Pages环境
        const basePath = window.location.pathname.split('/').slice(0, -1).join('/');
        window.location.href = basePath + '/profile.html?data-champ=' + champdata;
    })
})

2. 修正JSON文件加载路径 #

同样，./json/这类相对路径在子路径环境下无法正确定位文件，修改为根相对路径：

function getQueryParam(name) {
    const urlparams = new URLSearchParams(window.location.search);
    return urlparams.get(name);
}
let datachamp = parseInt(getQueryParam('data-champ'));
// 动态拼接正确的JSON文件路径
const basePath = window.location.pathname.split('/').slice(0, -1).join('/');
let file = basePath + "/json/" + dataarray[datachamp] + ".json";

3. 确保jQuery加载正常 #

建议使用CDN链接引入jQuery，避免本地相对路径在部署后失效：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

4. 调试验证参数与路径 #

在profile.html中添加控制台打印，确认参数和路径是否正确：

console.log('获取到的参数:', datachamp);
console.log('JSON文件路径:', file);

打开浏览器控制台（F12）查看输出，排查参数是否传递成功、路径是否匹配GitHub Pages的实际文件结构。

5. 检查GitHub Pages部署状态 #

进入仓库的Settings -> Pages页面，确认部署状态为成功，且访问路径与代码中使用的路径一致。

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