Pug template define attributes11/11/2022 pug Copy //- layout.pug html head title Some awesome site! body include menu.pug main block content pug Copy //- menu.pug nav ul li a ( href = "/" ) Home li a ( href = "/about" ) About html Copy Some awesome site! Home About Inline code □ To stop our pug files from growing out of control, we can split them into separate files and include them.Ĭonsider a layout where we "include" a menu section of markup. Giving us html Copy Awesome site Welcome to an awesome site! Includes pug Copy //- layout.pug html head title Awesome site body block content pug Copy //- home.pug extends layout.pug block content h1 Welcome to my awesome site! The common example is a layout extension. Pug supports template inheritance via extends and blocks. if ( isAwesome (pug ) ) return "Hell yeah!" Inheritance via extends and blocks If you need to include plain text within an element, suffix with. You can write comments with //(included in output) and //-(not included in output). If we wanted a div with the class flower, we only need pug Copy. Define attributes optionally comma-separated within the brackets.If no tag is defined, pug defaults to div Text at the start of a line with no special character prefix is treated as a tag.It uses an indent sensitive syntax allowing you to write clean markup with less code □įor those in camp TL DR, scroll down for demos! □ Jumping in □ Īn element follows this structure pug Copy input #check. The syntax for this is to append &attributes to the element tag, followed by the name of the collection in parentheses.A template engine for node and browser environments. To add a line of JavaScript to your pug file, start the line with a dash ( -) and write your JS code after it.įor example, as mentioned in the previous section, you can use JavaScript to create a collection of attributes which you can then apply to a given element. Pug: // Incorrect syntax for multi-line content In this example, Pug renders the p element as intended, but also renders the word "This" in the subline as an element of type This. If you don't use this syntax for multi-line content, Pug will interpret the lines underneath the element as separate elements. Pug: // Correct syntax for multi-line content To add multiple lines of content inside an element, put a period after the element's name and drop the content below, indenting each line. To put content inside an element, put a space after its tag name (on the same line) and add the content there. In this example, the head element is on an indented line underneath the html element, which renders it as a child of the html element. To create a child element, indent the line under the intended parent and create the child there. This is because Pug uses formatting elements (such as white space and indentation) to determine parent/child relationships between elements. Pug will automatically generate a closing tag for elements that require one, so you only have to write the opening tag. Note: Even if the file format you're rendering to doesn't necessarily require you to explicitly state the doctype, declare it so Pug knows what file type you want.Pug syntax uses non-bracketed element tags that are similar to their HTML counterparts. An IDE with an integrated terminal, like Visual Studio Code.Node.js installed on your computer (so you can use NPM). PUG TEMPLATE DEFINE ATTRIBUTES FULLPug can also be used to render a few other types of files (e.g., XML), but this tutorial will focus on HTML.īy the way, to reinforce your learning here (or if video is just more your style), I'd suggest checking out Pug Template Engine - Full Tutorial for Beginners by dcode on the FreeCodeCamp YouTube channel. If the idea of a template engine sounds intimidating (or you've tried to use one before and found yourself frustrated), there's no need to worry- As long as you have a solid understanding of HTML, you'll be able to pick-up on the basics of Pug pretty quickly. Pug (formerly known as Jade) is a template engine that allows you to dynamically manipulate the HTML and CSS that are ultimately rendered from the files that were written in it.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |