Search code examples
javascripthtmlcssadd-onboilerplate

Is there a way to reduce copy pasting in html/css for content which every page contains?


What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.

The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.

Any suggestions?


Solution

  • In Html5 you can use the object tag to include a file.

    Basically you create a single file containing your header and the common code that goes on each page.

    Then on every page of your site you add

    <object name="includedfile" type="text/html" data="page.inc"/>
    

    where you need the content to appear.

    Edit:

    Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:

    $.get('test.html')
     .success(function(data) {
         $('div.content').html(data);
     });
    

    Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.