0

I'm creating a static site built with HTML and Javascript. I'd like to maintain a reusable html structure for the site for a subset of the pages. Similar to how Yelp organizes their file structure. For example, the user can search for different auto shops in their area. The paths will look like this:

yelp.com/biz/auto-shop-san-francisco-1

yelp.com/biz/auto-shop-san-francisco-2

Yelp's content changes but the overall structure remains the same. I'd like to implement a similar file structure hierarchy.

In order to replicate the structure I have designed something like this

--> index.html (Home page)
--> /auto-shop
    --> /valvoline
        --> index.js
        --> index.html      
    --> /jiffy-lube
        --> index.js
        --> index.html    
    --> /midas
        --> index.js
        --> index.html

The problem is that each path /auto-shop/ will have their own custom html and javascript. How can I implement reusability so that I only have a single html to load many different auto shop pages?

tariq anees
  • 1
  • The only thing I can think of if you are only "allowed" to use html and js is to create reusable components via js and let all html files reference this single js file to load them into the DOM. If you have control over the backend another way is to combine html templates to generate html files and send to frontend. The modern way, though, is to use a frontend framework/library to generate the views, like React, Vue, Angular, Svelte. – Bqardi Oct 29 '22 at 21:28
  • @Bqardi The site I'm working on is static. So I don't have a backend. Essentially, all the data I need is stored as json files within in the application. Based on your suggestion I take that every folder will need it's own html but I can share the javascript file. I cant deal with that. Thanks for the response! – tariq anees Oct 30 '22 at 03:26
  • You should look into using a static site generator instead – Bergi Oct 30 '22 at 03:38

0 Answers0