When using modern CSS frameworks like Bootstrap and Foundation, most of the development becomes entirely about producing HTML, which brings out the power of Pug.
#PUG TEMPLATE ENGINE EXAMPLE FREE#
It provides the ability to write dynamic and reusable HTML documents, its an open source HTML templating language for Node.js (server-side JavaScript), totally free to use and provides fast, easy, and fun HTML. Just like SASS, Pug is a prepocessor and, as such it helps you accomplishing tasks like wrapping away repetitive work by providing features not available in plain HTML. Simply put, Pug is a clean, white space/indentation sensitive syntax for writing html. Well with Pug, formerly known as “Jade” (a registered trademark, and as a result a rename was needed) it’s a high performance and feature-rich templating engine that’s easy to achieve. (Unbuffered Pug comments, however, can still go anywhere.Clean and organize HTML, that’s what we as Front-end Developers always aim for. Extending templates must have at least one block, or it would be empty - just define your variables there.įor the same reason, Pug’s buffered comments cannot appear at the top level of an extending template: they produce HTML comments which would have nowhere to go in the resulting HTML.
#PUG TEMPLATE ENGINE EXAMPLE CODE#
Add the variables to the Pug options object, or define them in unbuffered code in a parent template.
If you need to define variables for use in a child template, you can do so a few different ways: This includes unbuffered code, which can also contain markup. If a child template tried to add content outside of a block, Pug would have no way of knowing where to put it in the final page. This is important! Parent templates define a page’s overall structure, and child templates can only append, prepend, or replace specific blocks of markup and logic. Note that only named blocks and mixin definitions can appear at the top (unindented) level of a child template. However, if you chain many, many templates together, you can make things a lot more complicated for yourself. Pug’s template inheritance is a powerful feature that allows you to split complex page template structures into smaller, simpler files. When using block append or block prepend, the word “ block” is optional: //- page.pug extends layout append head script ( src = '/vendor/three.js' ) script ( src = '/game.js' ) Common mistakes ¶ You can simply append the block: //- page.pug extends layout.pug block append head script ( src = '/vendor/three.js' ) script ( src = '/game.js' ) You want some game related scripts as well as these defaults. Now, consider a page of your JavaScript game. You might do this: //- layout.pug html head block head script ( src = '/vendor/jquery.js' ) script ( src = '/vendor/caustic.js' ) body block content Suppose you have default scripts in a head block that you wish to use on every page. Pug allows you to replace (default), prepend, or append blocks. primary block primary p nothing Block append / prepend ¶ primary block primary p nothing //- page-b.pug extends sub-layout.pug block content. (Alternatively, the child template could override content altogether.) //- sub-layout.pug extends layout.pug block content. As it shows, content now exposes a sidebar and primary block for overriding. It’s also possible to override a block to provide additional blocks, as shown in the following example. - page-a.pug extends layout.pug block scripts script ( src = '/jquery.js' ) script ( src = '/pets.js' ) block content h1 = title - var pets = Įach petName in pets include pet.pug //- pet.pug p = petName
pug is automatically appended to the file name.) Then, define one or more blocks to override the parent block content.īelow, notice that the foot block is not redefined, so it will use the parent’s default and output “some footer content”. To extend this layout, create a new file and use the extends directive with a path to the parent template. - layout.pug html head title My Site - # block scripts script ( src = '/jquery.js' ) body block content block foot #footer p some footer content The example below defines block scripts, block content, and block foot. Providing default content is purely optional, though. Pug blocks can provide default content, if appropriate. In a template, a block is simply a “block” of Pug that a child template may replace. Template inheritance works via the block and extends keywords.
0 kommentar(er)
