当顶部有一个固定菜单时,如何使页面的相对路径在 html 中工作?

How do you make relative paths to pages work in html when you have a persistent menu at the top?

我似乎能够找到关于持久菜单或使用相对路径但不是同时的问题。

其实我不是前端开发,但是我知道怎么用markdown。我为我写的代码写了一些文档,我的老板让我把它添加到我们的网站上。到目前为止,一切都很好。但是因为我们的网站很小,目录结构中没有任何内容(我的意思是,我们的图像在图像文件夹中,我们的布局在 _layouts 文件夹中,但我们所有的页面本身都位于顶级目录中。现在我有 5 或 6 页在那里,我的老板让我将它们重新组织到它们自己的子目录中。让我们将该目录称为 /myfiles/。到目前为止一切顺利。我将所有文件重构到该目录中,并更改了对它们的引用从“fileone.html”“filetwo.html”到“/myfiles/fileone.html”“/myfiles/filetwo.html”等

但是,我们所有页面的顶部都有一个固定菜单(为了争论,我们只说它们是“主页”、“文档”、“关于我们”,现在是“我的文件”)。所以发生的事情是,从主页导航时一切正常。但是当我转到“myfiles”中的任何内容然后尝试单击菜单项(例如“docs”)时,它会尝试将我发送到 myfiles/docs/thispage .html.这显然是不可取的.

我理解相对路径和绝对路径的概念。主页 link 始终是顶级网站的实际 url,因此始终有效,但现在每个其他页面都试图从 myfiles 内部导航,这是错误的。

如何在不更改每个其他菜单项的代码的情况下解决此问题?

也许这很愚蠢,但考虑到我对自己的前端技能缺乏信心,除了我自己的代码之外,我一般不想更改任何代码。我不想四处重组整个网站,只是我的文件。

有没有一种方法可以在我们的网站中容纳我的新目录,因为我们的持久菜单无需更改每个其他菜单项的路径以具有与根目录的相对路径?

同样,我发现很多问题都包含各个部分,而不是全部。

我不会给出整个网站的全部代码,但相关部分位于适用于网站上每个“页面”的“page.html”布局中。特别是这一行:

<a class="menu-item" style="..." href="{{site.baseurl}}/"<img src="https://coolwebsite.gov/content/uploads/2021/10/sitelogo.png" id="SiteLogo" alt=Spashimage" height="40"></a> < class="menu-item" href="aboutus.html">About us</a> <a class="menu-item" href= "docs.html">Docs</a> <a class="menu-item" href="/myfiles/thisfile.html">thisfile</a>

任何帮助将不胜感激

最简单的解决方案可能是在文档每一页的 <head> 中包含一个 <base> element。希望 <head> 在某个模板中,这样您实际上只有一个地方可以更新。

这将允许您指定相对 URL 从中起作用的基本路径。

可能你会 <base href="/" />。然后所有相关链接都将作为您当前在浏览器中查看的文档存在于您的根目录中,即使它不存在。