Display same content (header, nav bar, side bar, footer) on all pages without server-side scripting (PHP)
Question
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.
4 answers
solution1
1 2015-06-21 20:54:08
您可以使用静态网站生成器（例如Jekyll） ，在您的个人计算机上生成页面，然后将最终文件上传到网络托管服务器。
solution2
0 2015-06-21 20:24:44
You can use Underscore Javascript and its templating system :
Simple example:
var tpl = _.template("<h1>Some text: <%= foo %></h1>");
then tpl({foo: "Hello World"}) would be rendered to the string <h1>Some text: Hello World</h1>
solution3
0 2015-06-21 20:25:41
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.
solution4
0 2015-06-21 20:48:51
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.