CODEWITHSUNDEEP
javascripthtmltemplates
Cliff Stamp
Cliff Stamp

Reputation: 571

Dynamic templating

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 :

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?

Upvotes: 0

Views: 960

Answers (1)

eqwert
eqwert

Reputation: 507

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>

Upvotes: 1

Related Questions