Add the same navigation bar and footer to multiple HTML views

Question

I've been asked to develop some simple views for an e-commerce website, but I can not use any framework, just raw HTML and CSS. My problem is that I do not want to repeat the navigation bar and footer code in each view. I am used to developing with Ruby on Rails, where I can solve this issue using partials.

Is there anything similar for this case or do I have to include the same code in each view (just because HTML is a static language)?

Thanks in advanced

Well if you can ONLY use HTML and CSS... then yes, you have to include the same code in each HTML file. — UltraSonja, Sep 11 '15 at 17:04

score 0 · Answer 1 · answered Sep 11 '15 at 17:08

0

This is where it can be useful to have a build script like gulp. Generally the process for things like static web pages is using a templating language like Jade or Handlebars. With Jade, you could just write something like this:

html
   body
      include ./includes/header.jade

Then compile it using gulp

var jade = require('gulp-jade');

gulp.task('templates', function() {
  var YOUR_LOCALS = {};

  gulp.src('./lib/*.jade')
    .pipe(jade({
      locals: YOUR_LOCALS
    }))
    .pipe(gulp.dest('./dist/'))
});

Other than a build step, however, there is no way to repeat static content using pure HTML and CSS.

answered Sep 11 '15 at 17:08

Jack Guy

8,346
8
55
86

So you are using JS too lol?! you are a clown! – Adam Buchanan Smith Sep 11 '15 at 17:12
A build script is different from client side JS.. – Jack Guy Sep 11 '15 at 17:13
You may want to look into JavaScript build tools - they're pretty amazing and in wide use http://www.sitepoint.com/introduction-gulp-js/ – Jack Guy Sep 11 '15 at 17:17
Still the same thing, just built for you. – Adam Buchanan Smith Sep 11 '15 at 17:18
Go ahead and argue that gulp.js is not javascript, just makes you sound ignorant. – Adam Buchanan Smith Sep 11 '15 at 17:19
I'm not arguing that. OP's specifications are that the *website itself* can only include HTML and CSS, but using JS to compile HTML and CSS is possible. What do you think [jekyll](https://jekyllrb.com/) is? – Jack Guy Sep 11 '15 at 17:21
Do you need a compilation tool? Is there not an inline JS version of php `include`? – Dhruv Ghulati Mar 23 '17 at 12:54

Adam Buchanan Smith · Answer 2 · 2015-09-11T17:06:13.270

-1

You can create a separate footer and header html file then include them on your pages using php include like this <?php include 'header.html';?> and <?php include 'footer.html';?>

Just and them inline your main.html page wherever you want to add them.

or you can use Jquery like this:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("footer.html"); 
    });
    </script> 
  </head> 

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

edited Sep 11 '15 at 17:06

answered Sep 11 '15 at 17:03

Adam Buchanan Smith

9,422
5
19
39

OP says they only have access to HTML and CSS. – Jack Guy Sep 11 '15 at 17:05
So then what would be wrong with the Jquery approach? – Adam Buchanan Smith Sep 11 '15 at 17:07
OP says they only have access to HTML and CSS. Not JS. – Jack Guy Sep 11 '15 at 17:08
That means that there is no HTML or CSS function that allows code modularization? – tulians Sep 11 '15 at 17:09
Yeah, J4G's approach is still using JS so I don's know why he is having issues with it. – Adam Buchanan Smith Sep 11 '15 at 17:11

Add the same navigation bar and footer to multiple HTML views

2 Answers2