0

I am not sure what to call this, dynamic templating is likely not the right term, but here is what I want to know if I can do :

  • have a template which is used by many pages
  • if I change that template, the webpages will auto update

For example, imagine I have a bunch of webpages which just display this on a page :

title: Guardians of the Galaxy

first impressions: awesome

Now I then want to change first impressions to "first thoughts" for every webpage which uses this template, so I go to the source template and change it there and every webpage which is generated from that template updates. I would also like it to be able to add sections (like say a date or whatever).

The template would just basically lay out the page, the display, etc. and in the actual pages they would just load this template and then add in the data to each section. Now obviously if I add a new section then each page lacking it would have to be individually edited.

I did a few searches, and they all seem to recommend php or similar. I think I can figure out how to do it with php, but is there a javascript/html only solution?

Community
  • 1
  • 1
Cliff Stamp
  • 531
  • 5
  • 11
  • [there is a thing called google](https://www.google.com/search?q=html+templating+js&oq=html+templating+js&aqs=chrome..69i57j69i64.5478j0j1&sourceid=chrome&ie=UTF-8) – yaakov Jul 20 '17 at 01:30
  • 1
    You are actually asking something like: _I want to build a vehicle which is moving forwards and it will be good, if I could add also some additional features, like seats and a microwave. I googled a bit and everybody is recommending steel, but is there also a solution with aluminium?_ – Armin Šupuk Jul 20 '17 at 01:42
  • I think the term you can use for googling is "Single Page Application". Try to understand it, and the difference to a server side application. Then you can do this with any JS framework like ember, react, angular, and so on. – Lux Jul 20 '17 at 02:00

1 Answers1

1

There are many libraries out there that have been mentioned, but sometimes, you don't need the whole page to fit into them. Occasionally, if there is an element or two that are shared between all pages (such as a navbar), you can create a common Javascript or HTML file that you can load into each page.

Lets use your example:

index.html

<title> I'm an Index Page </title>
...
<h1> This is my own unique content </h1>
<div id="container>
</div>
...

about.html

<title> I'm an About Page </title>
...
<h1> This is different content </h1>
<div id="container>
</div>
...

common.html 

<h1> Guardians of the Galaxy </h1>
<p> first impressions: awesome </p>

So while there might be little differences in each one of these files, you know you want to put common.html into both of them. To make this happen, we add a <div id="container"></div>, or some other equivalent wrapper. Now we can use Javascript to load common.html into each container. There is a way to do this in plain Javascript, but I would highly recommend JQuery.

common.js

$(function() {
    $( "#container" ).load( "common.html" );
});

Now all that's left is to include this script in all files we want to have the contents of common.html (add this into index.html, about.html)

<script type="text/javascript" src="common.js"></script>
eqwert
  • 507
  • 6
  • 15