Add Header and Footer on all pages

Question

Add Header and Footer on all pages

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I am creating a new version of a city guide portal, there are several pages and currently the staff uses the .shtml include:

include virtual="../header.htm"

include virtual="../footer.htm"

Is there any other way to pull the header and footer on all pages without using .shtml include and PHP include? Since all pages need to be in .html, the site has to be static, I can not use wordpress or any cms ... I've already tried the jquery include:

$(function(){
  $("#header").load("header.html"); 

  $("#footer").load("footer.html"); 
});

But the final code does not appear the whole page in the source code, if I give a CTRL + U to see the source code, the header will be as div id="header" and /div , without appearing its content in the source code, this can cause some problem for SEO, right?

How do you include the header and footer on all the sites pages you develop?

Oh, and here in the company use windows ...

php html jquery header

asked by anonymous 01.07.2015 / 14:51

2 answers

Errors in a Multiway MergeSort-External in C Google maps v2 is returning "INVALID_REQUEST"

score 1 · Answer 1

include virtual is supported in IIS, but has cases that do not work in .php files, the php itself already has two functions to include files, include and require .

For example:

<?php
require '../header.htm';

require '../footer.htm';
?>

However I recommend you start thinking about the MVC (Model, View and Controller) architecture, read more at: What it is MVC (Model, View, Controller)?

Note: I do not recommend using jQuery to "include" for two reasons:

The page will resize what will cause a jump effect on the content and scroll

There will be 3 requests and depending on the server it may take almost 1 second to load each of them so it would seem like things are broken

score 0 · Answer 2

You could do this with jQuery. Put this code in index.html

<html>
   <head>
      <title></title>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script>
         $(function () {
            $("#header").load("header.html");
            $("#footer").load("footer.html");
         });
      </script>
   </head>
   <body>
      <div id="header"></div>
      <!--Remaining section-->
      <div id="footer"></div>
   </body>
</html>

Allysson, using this form does not cause any problem in%% of% since the page SEO and header.html is also indexed by search engines, and only this factor against this type of abortion using footer.html ?