Designing Website With Multiple Similar Webpages

I would like to have several webpages in a website with very similar characteristics. They would have the same layout made up of the same divs, with only the content different. (There would be a home page with buttons; each button would link to a different one of these pages). I would want them to be different webpages because I would want different links for each; I believe this also means I would need different HTML files for each though. I would not want to copy the same code for each file of course. I was thinking of writing a module which would have function(s) to create the webpage in JavaScript. Each webpage would import the module and run the function(s). Is there a better/more common approach to going about this though? Thank you!

1 Like

@ebryski If all the webpages has same format but the data changes I would store all data in some JSON file and use React to change content of an HTML element.

Learn react.


I would change the content of an element with
document.getElementById("<id of element to change >").innerHTML = <JSON value>

1 Like

One thing I should clarify though is that the layout is very specific for my application. It’s a page which would allow to step through different interactive 3D graphical displays. It would have a div on the left for text and a div on the right for graphics, buttons on the bottom to step through different graphical displays. Would React still be useful in this case?

EDIT: I looked at React a bit more carefully, and it seems to me to be a way of easily creating HTML elements in JavaScript, in which case I think it would be useful for me. However, it seems to me like I would still use a module and the function in the module would use React. Is this correct?

I should also clarify that it’s not just the data which is different. Each webpage would have different 3D graphical displays and different user interactions, so I think different functions. I’m thinking of also importing a module which would have the functions to create the graphics for each page.