HTML Templates -- php?

php html templates templating

43,064

Solution 1

Using php includes:

Save this as top.php

<html>
<head>
<title><?php echo $title; ?></title>
<script src="modernizr-1.5.js"></script>
<link href="styles.css" type="text/css" rel="stylesheet" />
<meta charset="utf-8" />

</head>
<body>
<div id="container">
<header>
<img src="images/banner.png" alt="World War I" style="border: none"/>
<nav>
    <ul>
    <a href="index.htm"><li><span>Home</span></li></a>
    <a href="1914.htm"><li><span>1914</span></li></a>
    <a href="1915.htm"><li><span>1915</span></li></a>
    <a href="1916.htm"><li><span>1916</span></li></a>
    <a href="1917.htm"><li><span>1917</span></li></a>
    <a href="1918.htm"><li><span>1918</span></li></a>
    </ul>
</nav>
</header>
<section>

Save this as bottom.php

<aside>
</aside>
</section>
<footer style="font-weight: bold; letter-spacing: .1em">
<a href="citations.htm">Citations</a> &bull;
<a href="about.htm">About</a>
</footer>
</div>
</body>
</html>

Then your individual pages would be like this:

<?php $title = '1914'; include("top.php");?>
//This would be where you would make the changes that need to be made on each page.

<article>
<br style="clear: both" />
</article>

<?php include("bottom.php");?>

Solution 2

You could consider one of these popular template engines :

Smarty (becoming outdated)
Latte (used mostly by the Nette community)
Twig (used mostly by the Symfony community)
Mustache (official implementations of this templating engine exist in more than two dozen proramming/scripting languages)

I tend to favor Mustache, mostly because it has an official JS version, an official Ruby version, an official Java version, etc. It allows you to use the same templates frontend and backend, which is very useful for widgets that are first rendered in background and rerendered in foreground at updates.

Solution 3

Put the content in a file abc.php

and then add this to each page you want the desired content in :

<?php
include("abc.php");
?>

So if your code is :

<nav>
        <ul>
        <a href="index.htm"><li><span>Home</span></li></a>
        <a href="1914.htm"><li><span>1914</span></li></a>
        <a href="1915.htm"><li><span>1915</span></li></a>
        <a href="1916.htm"><li><span>1916</span></li></a>
        <a href="1917.htm"><li><span>1917</span></li></a>
        <a href="1918.htm"><li><span>1918</span></li></a>
        </ul>
    </nav>
    </header>
    <section>
    <article>
    <br style="clear: both" />
    </article>
    <aside>
    </aside>
    </section>

And you want the part inside <nav> to be repeated in each page, you can put the content between <nav> and </nav> (including the tags) inside abc.php and include abc.php in your file like this :

<?php
    include("abc.php");
?>
    </header>
    <section>
    <article>
    <br style="clear: both" />
    </article>
    <aside>
    </aside>
    </section>

43,064

Author by

Code Monkey

Updated on July 05, 2022

Comments

Code Monkey almost 2 years

So, I'm making a site about WWI as a school assignment, and I want this to appear in every document:

<!DOCTYPE html>

<html>
<head>
    <title>1914</title>
    <script src="modernizr-1.5.js"></script>
    <link href="styles.css" type="text/css" rel="stylesheet" />
    <meta charset="utf-8" />

</head>
<body>
  <div id="container">
    <header>
    <img src="images/banner.png" alt="World War I" style="border: none"/>
    <nav>
        <ul>
        <a href="index.htm"><li><span>Home</span></li></a>
        <a href="1914.htm"><li><span>1914</span></li></a>
        <a href="1915.htm"><li><span>1915</span></li></a>
        <a href="1916.htm"><li><span>1916</span></li></a>
        <a href="1917.htm"><li><span>1917</span></li></a>
        <a href="1918.htm"><li><span>1918</span></li></a>
        </ul>
    </nav>
    </header>
    <section>
    <article>
    <br style="clear: both" />
    </article>
    <aside>
    </aside>
    </section>
    <footer style="font-weight: bold; letter-spacing: .1em">
    <a href="citations.htm">Citations</a> &bull;
    <a href="about.htm">About</a>
    </footer>
  </div>
</body>
</html>

I think it's kind of stupid to copy-paste all this into each document, and painstakingly go in and change each page separately if I just want to change one word or tag. Is there a way I can put this in template.htm (or something similar) and have php or javascript code take this and insert everything from the requested file inside of the <article> tag? I don't know a lot of php, so this is probably a piece of cake for you gurus, but I would appreciate the help.