Use of the HTML template engine jade

Jade Syntax: #{xxx}//Embed Datap= xxx//Embed DataP #{xx}//Embed DataTag HTML//Translate to Div#test//<div id= "test" ></div>Div.bb-dd//<div class= "Bb-dd" ></div>div#bb.aa.cc//yes, like the Emmet syntax.#content. Item//<div id= "content" ><div class= "item" ></div></div>P AH Oh! //<p> Ah Oh! </p>P|Foo bar Baz|rawr rawr|Go Jade Go//output Large segment text content <p>foo bar Baz rawr.....</p>output #{} escape p \#{something}//<p>#{something}</p>output \ Use//Do not escape execute script-varhtml = "<script>console.log (' oo '); $ (function () {console.log (' ye ');}); </script> "|!{html}//Execute JSScript| Console.log (' yy ')); | Console.log (' DD '), or script. Console.log (' AA '); Console.log (' BB '); Console.log (' CC '); functionAdd (A, b) {returnA +b; } Add (1,3);//Introducing CSS FilesLink (rel= ' stylesheet ', href= '/stylesheets/style.css ') script (src= '/jquery.js ') Note://just some paragraphs single-line comment interpretation rendered as <!--just some paragraphs-comments that do not output to the final HTML file//-won't output within markup//Conditional output Note indent-varFriends = 10 CaseFriends when0P No pot friends when1p You have 1 pots of friends whendefaultp you have #{friends} a friend//or so-varArr = 0 CaseFriends when0: P No pot friend when1: P You have 1 pots of friends//element Multiple attributesInput (name= ' user[name] ' autofocus= ' autofocus ')//or with a comma input (type= "checkbox", checked)a label a (href= '/user/' + user.id) =User.Name or a (href= '/user/#{user.id} ') =The User.nameclass property is a special property that you can pass directly to an array, such as Bodyclasses= [' User ', ' authenticated ']: Body (class=bodyclasses) Document type!!! 5 or!!!HTML or DOCTYPE HTML code execution, logic control jade supports three types of executable code1. Prefix-, it's not going to be output.-varfoo = ' Bar ';- for(varKeyinchMB ()//Conditions or loopsp=Obj[key]-if(foo) ul Li yay li foo Li worked-ElseP Oh no!didnt work-if(ITEMS.LENGTH) UL-Items.foreach (function(item) {Li=Item- })2. Prefix of one =returns a value-varfoo = ' Bar ' =fooh1=Foo//= The code of the output is escaped by default, and if you want to output a value that is not escaped directly, you can use! =if,Else if,Else, Until, while, unless they are common JavaScript code and Jade still supports some special tags that make the template easier to understand, one of which is each loop: syntax each val[, KEY]inchOBJ-varItems = ["One", "one", "three"]each IteminchItems Li=Item//Bring the indexEach item, Iinchitems Li #{item}: #{i} Key-value pairs-varobj = {foo: ' Bar '}each Val, keyinchobj Li #{key}: #{val}-varFoo = {one:11,two:22,three:33}each Val,keyinchfoo P #{key} span #{val} forUserinchUsers forRoleinchUser.roles Li=role Condition statement: forUserinchUsersifUser.role = = ' admin 'P #{user.name} is an adminElseP=User.Name forUserinchUsers-if(User.role = = ' admin ') P #{user.name} is an admin-ElseP=user.name template inheritance: Block xxx in the child template implementation of the child template inheritance when using extends XXX Specifies that block block will be replaced by default when you use block append or block prepend in front of the block or Append included using include XXX/xxfor example:./layout.jade./includes/  ./head.jade./tail.jadeat this time layout.jadehtml include includes/headbody H1 My Site P Welcome to my super amazing Site. Include includes/footor given suffix extension HTML head//-CSS and JS has simple filters. Wrap them in<style> <script>tags, respectively include stylesheet.css

Use of the HTML template engine jade