How to make an href dynamic using Custom Elements-CodePudding

I wanted to make a header with navs (local website) , and the same header will be repeated in all pages. So instead of copy pasting it, i made a custom element in js. The problem is that the hrefs in the main page will be different than the other pages.

This is how it should be in the main page

<a href="pages/somepage.html">

And this is how it should be in other pages who are in the same folder

<a href="somepage.html">

Using a custom element will make them all have the same href.

Is there a solution to this or am i missing something really obvious ? I could just have them all in the same folder but that will get messy the more pages i add.

CodePudding user response：

Make your href absolute by putting a / at the front.

<a href="/pages/somepage.html">

CodePudding user response：

Maybe you make links following:

<a href="/pages/somepage.html">

if you add / to front link browser search the folder.