I'm designing few pages in HTML using Jade. I've problem while compiling common areas of the pages. Header, Footer, Navs etc. How do I create a template files and include it the files or how do I create a layout to use in all files?
I'm very new to Jade and couldn't find something related to creating a layout or templates to use.
In PHP for example you create header.php, footer.php and nav.php and include those in the files. One change affects all the other files. How to accomplish something like that in Jade?
P.S. I'm not using Node.js or Express.
You should have a look at the extends function in jade, that will allow you to extend the different files. Like include in php.
http://jade-lang.com/reference/extends/
Related
I'm working on Webpack/Gulp enviroment, and I wanna add function to include HTML partials like header and footer inside other page views.
The best solution for this will be like in PHP, include file and it's fine.
I used html-webpack-plugin, html-loader and gulp-file-include but this not working for me or this build one file from this partials and on development mode on local server i can't look to results because this partial before build not working.
Someone maybe have a solution or think for this?
I'm using to grunt-compile-handlebars part of an email build.
I need to create different color variants of the same template, giving each compiled HTML file an appropriate name and inside a named directory.
For example the text will be a different color in each.
So an example result may be:
|-red
|-red-template.html
|-green
|-green-template.html
|-blue
|-blue-template.html
I can do this manually, but automation would be better. It doesn't look like grunt-compile-handlebars has the capability.
Are there any Grunt plugins that are able to do the job?
Maybe you can have a look to https://www.npmjs.com/package/grunt-file-creator ?
Try using a static site generator like Assemble.io. It breaks parts of your templates into partials, and you can use different colored partials for different templates.
I am learning Angular and I need advice on best practice, and a general direction for digging deeper in the subject:
I am trying to create a web app with Angular which is composed of a number of standalone widgets, and I decided to implemented them each as independent custom directives.
I would like to make these custom directives as reusable, movable, replaceable and cohesive as possible, and put all of their related html/css/js files in their own dedicated folders, with a folder structure of something like this:
What is the best practice for loading a separate CSS file for the template partial of a custom directive? (For example, should I load the CSS from the partial.html which will eventually appear in the html body? Should I look into merging my css files with Grunt upon build?)
You should build all of your CSS into a single file you. Without merging you require an additional request to the server and processing of the CSS which adds more time before the page can be rendered.
For additional loading performance you can combine all of your HTML fragments into a single file as well that you load up front.
<script type="text/ng-template" id="temp2.html">
<div class="view">
</div>
</script>
I got a realtive big project for what I have many plain HTML pages. All the pages have the same template, but when I change one value in the template I have to change all the other pages manually.
Is there a way to do it like less for CSS or CoffeeScript for JS?
Lg Knerd
If all you have are plain HTML pages you could use SSI although it is a bit dated and youll need to be running this on a web server like Apache.
http://en.wikipedia.org/wiki/Server_Side_Includes
Personally I would use php so I could just include the files with the php include function
How can I import an HTML file within my HTML file? I will prepare header.html and footer.html files separately and every file that I want to include them I want to import them into my HTML file.,
EDIT: I see that solution based on SSI technique. I use Ubuntu and Tomcat 7.0.11. How can I enable SSI at tomcat?
There are many solutions to this problem. You can write simple JavaScript code to include parts of your page on load, you can enable SSI on your web-server, and finally you can use any server-side language to dynamically include chunks of any page for output. Your choice depends on how dynamic your web-site is.
You can include html files using frames or iframes. If you're using a server side language such as PHP or ASP you can do this without frames using includes.
If you wanted to strictly use HTML (and assuming you are using JS too) I would do the following:
You could have a <div> for the header, I will call it <div id="header">.
Using jQuery we could say something like: $('#header').load(---html file---);. Aside from the pain it might be to include the JS file in all pages, it will allow you to make changes to the header globally throughout your application.