英文:
GitHub pages relative links not working as intended
问题
我正在工作在这个项目，仓库在这里。我正试图实现一个随机项目的按钮/链接，该按钮/链接旨在将查看者重定向到随机选择的页面。我在本地环境中已经实现了这一点（代码在nav.js中，链接数组在random-project-links-array.js中），但一旦我将其上传到GitHub，链接就不再起作用。我猜这可能与相对链接有关，但我不太知道如何修复它。
就我所能看到的情况而言，当单击链接时，它会被重定向到username.github.io/project.subfolder.name/index.html，而存储库文件夹名称缺失。结果，我得到了404错误。
当我从子文件夹/项目内单击它时，我会得到以下错误信息
加载模块时出现错误，来源为“https://username.github.io/nav.js”。
和
由于不允许的 MIME 类型（“text/html”），因此阻止从“https://username.github.io/nav.js”加载模块。
如果我手动更改浏览器中的URL，添加存储库名称到URL中，我会被重定向到正确的页面。
我想我需要一种在重定向到不同页面时将存储库名称放入链接的方法，但我不想将其硬编码，因为我希望它可以在本地环境和GitHub页面上都正常工作。
我了解了基础URL，但以前从未使用过它们，所以我不知道如何实现它。
我尝试连接window.location，尝试获取location.origin并添加链接，但出于某种原因，当获取源时，它会附加*/index.html*，这会创建一个链接，类似于host/index.html/link-which-ends-in-.html。
我还尝试添加一个*.nojekyll*文件到项目中 - 没有效果。
总之，我正在尝试找到一种生成链接的方法，以从username.github.io/{repo.name}开始，并添加链接的第二部分，重定向到特定项目的index.html页面。
英文:
I'm working on this project, repo here. I'm trying to implement a random project button/link which is meant to redirect a viewer to a randomly selected page. I got that working (code in nav.js, links array in random-project-links-array.js) on localhost, but once I upload it on GitHub the links stop working. I guess it's an issue with relative links but I don't quite know how to fix it.
As far as I was able to see, when clicking the link, it gets redirected to username.github.io/project.subfolder.name/index.html with the repository folder name missing. As a result I get a 404.
When I click it from within a subfolder/project I get
>Loading failed for the module with source “https://username.github.io/nav.js”.
and
>Loading module from “https://username.github.io/nav.js” was blocked because of a disallowed MIME type (“text/html”).
If I manually change the URL in the browser, by adding the repo name where it should be, I get redirected to the proper page.
I guess I need a way to put the repository name in the link when redirecting to a different page but I don't want to hard code it as I want it to work both on localhost and deployed on GitHub pages.
I read about base URLs but I've never used them before so I don't know how to implement one.
I tried concatenating a window.location, trying to get the location.origin and adding the link, but for some reason when fetching the origin I get it with /index.html which creates a link along the lines of host/index.html/link-which-ends-in-.html.
I also tried adding a .nojekyll file to the project - no effect.
Bottom line is I'm trying to find a way to generate a link that starts with username.github.io/{repo.name} and add the second half of the link which redirects to the index.html page of a particular project.
答案1
得分: 0
我成功找出问题所在。有两个问题 - 相对URL没有正确编写，而且我一直没有注意到项目比主要中心低一级。
因此，我检查了项目并重新编写了URL。此外，为了使项目在本地和GitHub上都能正常工作，我编辑了数组中的URL。我添加了一个检查本地主机/不同主机的选项，并根据情况更改了锚点href。我还在location.href长度的基础上为主中心添加了一个额外的检查，只有在添加URL的第二半部分时才向上移动一级。
这可能不是最佳解决方案，但它完成了工作，而无需重新制作整个项目。问题已解决！
英文:
I managed to figure it out. There were two issues - relative URLs weren't written properly and I kept missing the fact that projects were one level lower than the main hub.
As such, I combed the project and rewrote URLs. Furthermore, to make the project work on local as well as GitHub, I edited the URLs in the array. I added a check for local host/different host and changed anchor href based on that. I added an extra check for the main hub based on location.href length and went up only one level when adding the 2nd half of the URL.
It may not be the best solution but it got the job done without having to rework the entire project. Issue solved!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论