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

I seem to be able to find either questions about persistent menus, or using relative paths but not at the same time.

I'm actually not a front end dev, but I know how to use markdown. I wrote some documentation to code I wrote and my boss has me add it to our website. So far so good. But because our site is so small, nothing is in a directory structure (I mean, our images are in an images folder, our layouts are in a _layouts folder, but all of our pages themselves just sit in the top level directory. Now that I have 5 or 6 pages sitting there, my boss asked me to reorganize them into their own sub-directory. Lets just call that directory /myfiles/. So far so good. I refactored all of my files into that directory, and changed the references to them from "fileone.html" "filetwo.html" to "/myfiles/fileone.html" "/myfiles/filetwo.html" etc etc.

However, we have a persistent menu at the top of all of our pages (for the sake of arguing, lets just say they're "home" "docs" "about us" and now "myfiles". So what happens is, everything works fine when navigating from the home page. but when I go to anything inside "myfiles" and then try to click a menu item (for example, "docs") it tries sending me to myfiles/docs/thispage.html. That's obviously not desirable.

I understand the concept of relative and absolute paths. The home page link is always the actual url to the top level website so that always works, but every other page tries to navigate from inside of myfiles now which is wrong.

How can I fix this without changing the code of every single other menu item?

Maybe this is silly, but given my lack of confidence in my front-end skills, I generally don't want to change any code other than my own. I don't want to go around restructuring the entire site, just my files.

Is there a way to accommodate my new directory in our website given our persistent menu without having to change the paths of every other menu item to have a relative path from the root directory?

Again, I found lots of questions with the individual parts included, but not the whole thing together.

I won't give the entire code for the whole website, but the relevant part is in the "page.html" layout that applies to every "page" on the site. Particularly this line:

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

any help would be very appreciated

CodePudding user response：

Easiest solution is probably to include a <base> element in the <head> of your document on every page. Hopefully the <head> is in some template so you only really have one place to update.

That'll allow you to specify the base path that relative URLs will work from.

Probably you would just do <base href="/" />. Then all relative links will act as if the document you're currently looking at in the browser lived in your root directory, even if it doesn't.