CODEWITHSUNDEEP
javascripthtmlnode.jsexpress
Sid
Sid

Reputation: 53

How add common header and footer in html page for multi page website using Node js, ExpressJS,hbs or ejs

I want create common header(navbar) and footer page to be included in multipage/several page of website. Create dynamic Website using nodejs and expressjs

Putting code for navbar and footer in common header.html and footer.html and call or include this common header/navbar and footer html page in other html pages.

How to use templating engine like hbs or ejs for website creation using Nodejs and expressJs

I know that it can be do using php or jquery. 

<html>
<head>
<title>document</title>

</head>
<body>
<div id="header">navbar</div>

<!--Remaining section-->

<div id="footer">footer</div>
</body>
</html>

But not using the following way:

W3school w3-include

<div w3-include-html="content.html"></div>

PHP

<?php include 'header.php' ?>
    ''Page content''
    <?php include 'footer.php' ?>

Upvotes: 1

Views: 4362

Answers (2)

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

You can keep your html files like

  • header.html contains only header code
  • footer.html contains only footer code

  • content.html contains something like:

    Here Heading

    Content for page

  • in your .htaccess file

    AddType application/x-httpd-php5 .html .htm

So it will parse all html files as PHP files and include and execute all php code.

In case of loading via js/jquery.

Your html should be 

<header></header>
<div class="middle">page content here</div>
<footer></footer>

<script>
$(document).ready(function(){
    $('header').load("header.html");
    $('footer').load("footer.html");


});
</script>

Upvotes: 2

Bart Hofland
Bart Hofland

Reputation: 3905

You provided all (straightforward) solutions already. You can either use:

  1. PHP, ASP.NET, JSP, etc. functionality at the server side, or
  2. AJAX / XHR / Fetch API functionality in JavaScript at the client side.

As far as I know, there is no way to use something like "master pages" or "template pages" purely client-side (inside the browser) using just HTML and JavaScript. :-(

There used to be some functionality called HTML imports (as part of HTML web components), but it has been abandoned some time ago.

If there is a way to do what you want, I will be very happy to learn about it too. :-)

Upvotes: 0

Related Questions