I'm a front-end developer. When I write a html code I repeat my self a lot by copy and paste (header section, footer section, etc).
How I can write modularize my html files? Like separate header.html and footer.html, and after that call both in index.html... same as erb in Ruby on rails? (I don't like jade lang)
I'm a front-end developer. When I write a html code I repeat my self a lot by copy and paste (header section, footer section, etc).
How I can write modularize my html files? Like separate header.html and footer.html, and after that call both in index.html... same as erb in Ruby on rails? (I don't like jade lang)
- Well you can use ajax for that, but it will require a http server for ajax calls. So you can install a simple http server. – st. Commented Jan 3, 2016 at 14:27
- @st. i use gulp, and i want tools for compile file to standard html file. like jade. – Dark star Commented Jan 3, 2016 at 14:30
- 1 I know you said front-end development. But your problem is best resolved with server-side languages such as PHP (eg. Include and Require functions) which will allow for you to re-use different elements (header, footer, menu...) dynamically in an html document (generated by PHP). – BMM Commented Jan 3, 2016 at 14:31
4 Answers
Reset to default 9In PHP we would do something like this:
index.php
<?php
include 'inc/head.inc.php'; //DOCTYPE and <head> stuff
include 'inc/header.inc.php'; //NAV or other top-of-page boilerplate
?>
<div id="uniqueDIV">
//Your unique page-specific divs can go here
</div>
<?php include 'inc/footer.inc.php'; ?>
So, in your head.inc.php file, you just have the usual DOCTYPE and <head> portion of your page file.
In Ruby, it appears the equivalent instruction is something like:
load "inc/head_inc.rb" -- OR --
require_relative "inc/head_inc.rb"
https://practicingruby.com/articles/ways-to-load-code
Another option is to use a bit of js/jQuery to populate parts of the document. If you don't have PHP, this is 2nd best option. It's less optimal than PHP because the js/jQ code will run after the page is fully rendered, which may cause a minuscule (but noticeable) lag before the code appears.
For example:
html
<div id="navbarDIV"></div>
js/jQuery:
<script type="text/javascript">
$(function(){
$('#navbarDIV').load( 'inc/navbar.inc.html' );
});
</script>
Note that you will need jQuery loaded to use the above code. Simple as this line in your <head>:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
jsFiddle demo
Final note: the script tag can be included in your <head> as an external file, or it can be plopped anywhere in your document with the rest of the html. Whatever works. But <head> as external file, or last element in body (also as an external file) are preferred.
Final final note: the ".inc." naming convention is not required, it's just my own practice. Include file could be named head.html or head.php or etc.
You could consider using something like Swig, which doesn't require a server (you can compile your templates locally).
Swig's syntax is much like Mustache or Handlebars, it uses braces and works inside of normal HTML, so you can retain the HTML syntax you want (unlike Jade).
For separating HTML into files to be reused, you can check out Template Inheritance. You can also see File Inclusion and File Imports.
Here is a small example:
{% include "./header.html" %}
<div id="body">Hello world</div>
{% include "./footer.html" %}
i use gulp, and i want tools for compile file to standard html file. like jade. – Sajad Abedi
For this you can use gulp-swig and build your templates locally in a task.
I have used EJS, which is convenient. You can have a try.
For HTML files there is no standard way for reusing HTML parts. You have to use into a templating system.
But erb is a templating system and can handle that. See this Stack Overflow answer about "Including one erb file into another".