- PUG TEMPLATE DEFINE ATTRIBUTES INSTALL
- PUG TEMPLATE DEFINE ATTRIBUTES FULL
- PUG TEMPLATE DEFINE ATTRIBUTES CODE
Here we’ve set our index.pug file as the base template.
We want to keep our projects as organised as possible! A logical template system will define a base template, and then all the other templates extend from it. It can then override certain pre-defined blocks of content, using the block command. The extends keyword allows a template to extend a layout or parent template. Our files will compile merged into index.html like so: Headtitle My Sitescript(src='/js/jquery.js')script(src='/js/app.js') Lets now create the additions.pug file and add the following content: All you need to do is add an include directive into your main pug file, as follows:ĭoctype htmlhtml include additions.pugbodyh1 My Headingp Here goes the text. Includes allow you to insert the contents of one Pug file into another. What follows is a look at how we can organize our projects using both includes and extends. Structuring your Pug filesĪ well organized template system is a crucial part of any development process.
PUG TEMPLATE DEFINE ATTRIBUTES FULL
The features we’ve looked at here are really just the tip of the iceberg! For the full specs check out - Getting Started. Mixin city(name)li.city= nameul+city('Sydney')+city('Montreal')+city('New York') Mixins compile as functions, and therefore can take arguments! Declaration mixin listulli Sydneyli Montrealli New York Link(rel='stylesheet', href='css/main.css')īodya(href="") img(src="" alt="google logo")Ī(href="your-link", style=!else h2 Sign up! Lets take a look some syntax for setting attributes in pug.ĭoctype htmlhtmlhead//- Invisible comment.//Visible comment. Lets get pugging!I'm a paragraphI'm a multi-line paragraph!And this is the second line.This paragraph has class!A div with a class.A div with an id. When you save and open up ’ll see the complete HTML generated like so. Note the use of indentation! Make sure you tab your child elements. Type up the following in your index.pug.ĭoctype htmlhtmlheadbodyh1#title Lets get pugging!p I'm a paragraphp.I'm a multi-line paragraph!And this is the second line.p.para.This paragraph has class!.firstDiv A div with a class.#secondDiv A div with an id.
Lets get started on a basic HTML structure. Note: Once you’ve executed this command, keep your terminal running to continue the auto-compile! The Basics
PUG TEMPLATE DEFINE ATTRIBUTES CODE
P will make our HTML source code pretty printed, with indentation, line-breaks, etc. o ./html will set the output folder to html. The -w flag will watch our pug file for changes and re-compile automatically each time we save./ will watch everything in the current directory. When working on a larger project, you might want to use a more specific compile command, such as: It will of course convert to HTML as follows: We should now see our index.html generated in the root directory. Lets test this out! Add the following text to our file as follows:Īnd lets compile it to HTML with the following command: Now in our root directory, create a file called index.pug.
PUG TEMPLATE DEFINE ATTRIBUTES INSTALL
We install globally with -g as we’ll need access to Pug commands from terminal. To install pug run the following command from your terminal: Note: You’ll need NodeJS installed! Go ahead and install if you haven’t already. Additionally, the compiler will throw errors if we have any mistakes in our code – which makes for convenient error prevention. index.html Pug demo Welcome to Pug Life I'm a p that needs to be contained! īy comparison our pug code is much more concise. Note the use of indentation to nest our HTML as we require.
index.pugĭoctype html html(lang='en') head title Pug demo body h1 Welcome to Pug Life div.container p I'm a p that needs to be contained! Lets take a peek at some Pug syntax & compare it to regular HTML. The syntax is arguably a lot cleaner to read and it can be a real time-saver when working with a lot of HTML (especially frameworks such as Bootstrap, Foundation, etc). It also adds a ton of functionality, such as Javascript objects, conditionals, loops, mixins and templates. Pug (formerly known as Jade) is a preprocessor which simplifies the task of writing HTML.
0 kommentar(er)
