-2

I want to add a common footer for all my html pages, but the footer has links to different pages in different folders, how can I do this? The problem is, I can write the footer with respect to one page, where the links point to, but what about other pages? I want a reusable footer with access to all the correct folder locations in each page I call the footer in.

I tried using a js page for the footer and bringing all the html pages under one main folder, but that isnt the right way to do it. Any alternate solutions?

Rakshitha M
  • 1
  • Please show what you've attempted, but I think you need to use your links with respect to the web root. – mykaf Nov 23 '22 at 14:37
  • Please provide enough code so others can better understand or reproduce the problem. – Jagroop Nov 23 '22 at 15:30
  • [jquery](https://jquery.com/) – Nijat Mursali Nov 23 '22 at 23:35
  • @mykaf let id = path.match(/([^\/]*)\/*$/)[1]; console.log(id); const dataInd = footer_link.data.findIndex((ele) => ele.key === id); I have used this to extract the folder location so I can pass it as a key and have created a json with respective links. – Rakshitha M Nov 24 '22 at 09:27

1 Answers1

-1

The way I usually do this is to create an empty placeholder div for the footer (and header, normally), and use a header-footer.js file to write code into those divs. For large nav structures, I build the nav as a data structure stored in a variable, usually via nested objects, then iterate through that with a function that generates the HTML and places it into the placeholder div.

You can check out my implementation at https://github.com/sdcervi/Reference if you want to see the specifics.

RiverTam
  • 304
  • 1
  • 9