0

I am working on an HTML theme that contains several HTML templates with the same navigation panel, footer and assets. The problem is when I modify something in a footer, for example, I have to edit all other templates one by one to bring them into line. Is there any tools to automate this procees? Thanks in advance.

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • Can you provide some code? –  Mar 21 '14 at 07:01
  • I am talking about standard HTML templates with , and
    parts. So what I want is to put those sections into different files and combine them on the fly like they do in PHP with includes.     – sdvnksv Mar 21 '14 at 07:06
  • Give your footers the same class and edit the class, or set a div in all the footers and load an external html 'template.html' file into the divs innerHtml dynamically using javascript, and edit that file – Banana Mar 21 '14 at 07:06
  • possible duplicate of [What are the new frames?](http://stackoverflow.com/questions/9466265/what-are-the-new-frames) – Quentin Mar 21 '14 at 09:30

1 Answers1

2

EDIT: I'm not aware if you can do this in normal HTML, but if you don't like my suggested method, you can check out .load() from Jquery: $(“#header”).load(“header.html”);

Sure. You can use something like Middleman or Jekyll for simple websites. It's very easy to learn and you can have a general layout, multiple layouts and even partials. Basically you're going to make a _footer.erb and render it in the layout.

If you have multiple pages like about, contact etc, and the structure of your website is not going to change (only content), I suggest you to use one layout and create some views that are yielded in there. It's a easy concept, you can learn it with middleman in few hours.

EDIT2: How to use this

layout.haml:

%body
  %header
    %nav
      = link_to 'index', '/index.html'
      = link_to 'about', '/about.html'
      = link_to 'contact', '/contact.html'

  %section#wrapper
    = yield

  %footer
    Something here

about.html.haml

%h2
  About Us
%p
  ............

contact.html.haml

%h2
  Contact
%p
  Constact us at Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Donec sit amet placerat nisi.
  Maecenas sollicitudin ut nisl a faucibus. Etiam et cursus eros.
  Nulla ut tortor aliquam, rutrum diam vitae, posuere ante.

Basically you create a layout that goes for all pages and yield the content from other pages into it. Of course you can have multiple layouts and invoke different headers and footers from partial files but this is not the case you asked.

This is haml, middleman by default uses erb. You can convert this here if you need it.

I hope is clear enogh

radubogdan
  • 2,744
  • 1
  • 19
  • 27
  • -- If you have multiple pages like about, contact etc, and the structure of your website is not going to change (only content) -- That's exactly my case. Thanks for your answer, I will try it right now. – sdvnksv Mar 21 '14 at 07:11
  • Both generators have a really good docummentation. I'm pretty sure you are going to love them :) – radubogdan Mar 21 '14 at 07:14
  • Check my edited answer if you have problems understanding how it works. – radubogdan Mar 21 '14 at 09:29