javascript - Create pages with pre-compiling the templates -
in current project, work html , css (html skinning). there many pages have repeated sections header, footer, sharing links etc.
i don't want repeat common sections again , again in each page. want these repeated sections call somehow using gulp or other task runner.
something example (using lodash)
index.html
<!doctype html> <html> <%= _.template(templates['head'])() %> <body> <%= _.template(templates['header'])() %> <!-- unique content here --> <%= _.template(templates['footer'])() %> </body> </html> and using gulp-template rendering in each page. preferring lodash because had worked it.
as can see, assuming if somehow keep repeating sections in javascript object (with name templates), can call in 1 line code. , if change in repeating section, change occur in pages.
to make possible, first need generate javascript object repeating html string in it.
can please tell me how this? or there better way this?
you can use jade - node template engine
it gives option include external jade files, in allows insert contents of 1 jade file another
index.jade:
doctype html html include ./includes/head.jade body h1 site p welcome super lame site. include ./includes/foot.jade head.jade
//- includes/head.jade title site script(src='/javascripts/jquery.js') script(src='/javascripts/app.js') foot.jade
//- includes/foot.jade #footer p copyright (c) foobar compiles to:
index.html
<!doctype html> <html> <head> <title>my site</title> <script src='/javascripts/jquery.js'></script> <script src='/javascripts/app.js'></script> </head> <body> <h1>my site</h1> <p>welcome super lame site.</p> <div id="footer"> <p>copyright (c) foobar</p> </div> </body> </html>
Comments
Post a Comment