I would like to keep my header, nav bar, side bar, and footer in sync among all the pages, only with the content/container differentiating. I know there is a PHP command for this (include: http://www.w3schools.com/php/php_includes.asp), but my web hosting doesn't support server-side scripting, only static webpages. I am specifically looking for ways with JavaScript and jQuery.
Display same content (header, nav bar, side bar, footer) on all pages without server-side scripting (PHP)
996 views Asked by Paraney At
4
There are 4 answers
0
On
If you do need to keep this limitation and not use server-side rendering, I'd suggest you look into something like jade templates. http://jade-lang.com/
You don't need much to get started, you just install the npm (https://www.npmjs.com/ - if you want to do something more with the web in the future, you'll probably need it anyway) and a commandline jade tool.
Then in your templates you can do something like:
// homepage.jade
include 'header.jade'
…
include 'footer.jade'
and you'll end up with nice html file(s).
The plus side is you really have solid html files in the end, so their source will be a complete, proper html document, and the user won't need to load some javascript library before only for it to download and somehow attach partial htmls into your main document.
He'll have the whole document at once.
0
On
As @chris85 said in the comments, I think that the best way is to switch the hosting company. Have in mind that without server-side scripts, you cannot store any information in a database for further use neither have some basic functionalities of a website, like a contact form.
That said, if you really want to do a website reusing the header and etc, I would make a single page for all requests and handle all the link clicks by JavaScript & jQuery.
Be aware, however, that this approach quickly became hard to maintain as your website gets bigger.
Let's make a simple example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Awesome single-page Website</title>
</head>
<body>
<header>
<ul>
<li><a class="menu-link" href="home.html">Home</a></li>
<li><a class="menu-link" href="about.html">About</a></li>
<li><a class="menu-link" href="contact.html">Contact</a></li>
</ul>
</header>
<div id="main">
<!-- let JavaScript handle the magic -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="file.js"></script>
</body>
</html>
file.js
$(function(){
$('.menu-link').click(function() {
$.get($(this).attr('href'), "", function(data){
$('#main').html(data);
});
});
})
home.html
<div>
Be welcome!
</div>
about.html
<div>
About page
</div>
contact.html
<div>
Ouch, I do <b>not</b> have a contact page :(
</div>
1
On
You can use a static site generator like Jekyll, generate the pages on your personal machine and upload the final files to the webhosting server.
You can use Underscore Javascript and its templating system:
Simple example:
then
tpl({foo: "Hello World"})would be rendered to the string<h1>Some text: Hello World</h1>