我一直在使用github页面来运行我的网站。我目前正在尝试开发一个全局标头，可以在一个 js 文件中进行调整并反映在任何地方。问题是，当运行另一个子页面时，我在转到子页面时遇到 url 链接问题。我希望能够调用一个js文件，并且无论根是什么，链接都可以工作。
我的 html 标头代码：
<!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
<div id="header-bar"></div>
<!--Please note, on subpages the entered src is ../javascript/header-bar.js to adjust to location.-->
<script src="javascript/header-bar.js"></script>
js 标头条形码：
var headerbar = document.getElementById("header-bar");
//This sets each page/subpage to be the exact same header.
headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';
我相信正在发生的事情是，每当这些子页面之一上，我都会将自己链接到"nameGenerator/nameGenerator/index.html"而不是"nameGenerator/index.html"。
这是我的代码片段：
var headerbar = document.getElementById("header-bar");
headerbar.innerHTML = '<div class="dropdown"><button class="dropbtn">Games</button><div class="dropdown-content"><a href="universes/index.html">Universe Generator</a><a href="#">Coming soon...</a></div></div><div class="dropdown"><button class="dropbtn">Tools</button><div class="dropdown-content"><a href="nameGenerator/index.html">Name Generator</a><a href="#">Coming soon...</a></div></div>';.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 20px 20px 0px 0px;
min-width: 160px;
}
.dropdown {
position: relative;
display: inline-block;
padding: 0px 2px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
#header-bar {
background-color: #509b53;
}
#header-bar:hover {
background-color: #66ba69;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/global.css"/>
</head>
<body>
<!--Set the div for the header bar. Import a js file that runs a specific script to set a universal header amongst all the pages.-->
<div id="header-bar"></div>
<script src="javascript/header-bar.js"></script>
</body>
</html>我如何能够设置 href，以便无论我在链接上的哪个页面或子页面都能正常工作？我希望系统完全自动化，无需更改每个子页面/页面的根。我的猜测是我需要在每个网址前面有一个特殊的根符号，但是经过一个小时的stackoverflow和谷歌，我找不到任何东西。
提前感谢！
旁注：我不能只放置整个本地 url 文件，因为当我导入到 github 时，我必须将其从本地 url 更改为 github url。
在你的 href 上试试这个：
href="../universes/index.html"
这上升了一个级别(根文件夹)并到达 -> universes -> 索引.html
更新
根据您的进一步评论，这是一个可行的解决方案：
var href = document.location.href;
var current_dir = href.substr(0, href.lastIndexOf('/'));
这应该适用于任何目录：
headerbar.innerHTML = '<a href="'+current_dir+'/index.html">Universe Generator</a>