jade Getting started with jade - RIP Tutorial

Learn jade - Pug (formerly known as jade) is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and. Downloadjade(PDF) jade Gettingstartedwithjade Attributes Case harpjs jade Gettingstartedwithjade Attributes Case harpjs jade Gettingstartedwithjade Remarks Pug(formerlyknownasjade)isahighperformancetemplateengineheavilyinfluencedbyHamlandimplementedwithJavaScriptforNode.jsandbrowsers. ProducesHTML Supportsdynamiccode Supportsreusability(DRY) Homepage RepositoryonGitHub Versions versionreleasedate0.0.22010-07-031.0.02013-12-221.11.02015-06-12 InstallationorSetup BeforetolaunchyoutocodewithPug,youneedtohavesomeprerequisits. Youwillneedtoinstall: NodeJSwithNPM ExpressJS(optional) AfterinstallingNodeJS,youcancheckinyourterminalthecorrectinstallationdoing: $node-v Ifsuccessful,itwillprintthenumberofNode'sversion. ToinstallPugintoyourproject,thepreferredandeasywayisthroughNPM(NodePackageManager).Ifyouarefamiliarwiththat,simplyexecutethislineofcodeinyourTerminal: $npminstallpug Ifyouwanttoinstallglobally,youcantype: $npminstallpug-cli-g andrunwith $pug--help Syntax Pug(oldnameisJade)isaclean,whitespacesensitivesyntaxforwritingHTML.Hereisasimpleexample: doctypehtml html(lang="en") head title=pageTitle script(type='text/javascript'). if(foo)bar(1+5) body h1Pug-nodetemplateengine #container.col ifyouAreUsingPug pYouareamazing else pGetonit! p. Pugisaterseandsimpletemplatinglanguagewitha strongfocusonperformanceandpowerfulfeatures. ProducesfollowingoutputasHTML if(foo)bar(1+5)

Pug-nodetemplateengine

HerearetherulestorenderPugtoHTMLcode: Byindentingthetext,theHTMLtreewillbebuild.indentingcouldbeusedwithspacesortabs.Thiscouldnotbemixed! HTMLtagsarewrittenwithout.Attributesareplacesbetweenroundbrackets. Commentcouldbemadewith//or.Commentswith//-arenotvisibleintherenderedHTML. With#{}willanofferedmodelgenerated:#{header}#{user.username}. The#(hashtag)withoutbraceswilladivelementcreatedwiththetextasID.Example#myIDwillberenderedas. Witha.(point)willadivgeneratedwithaclassattribute.Example:.myClasswillberenderedas With= (equalitysignfollowedbyaspace),avariablewillberetrieved.Exaple:h1=title A!=(notequalto)retrievedavariablewithoutescaping. A-(hyphen)allowsyoutowriteJavaScript.Example:-console.log("foo"); Linkingtoanexternalfilecanasfollow:script(src="/js/chat.js") Inlinescriptcouldbyusingthisscript.. Adirectiveforaddingthebasiclayout:extends../layout. Atlayout.pughappenstheinsertingbyusingblockcontent Useofpartialscouldontwoways: bypartial:!=partial(templatefilename/options). Byinclude:include../includes/footer Theinverseofincludeisextend.Thisallowsfromapage"htmlblockparts"tosendtoalayoutpageforexample:extendlayout Concatenatinghappenswiththe+(plus)or#(hashtag)char.TheplusisusedatJavaScriptcode.ThehashtaginHTMLandrendersthecontent:`pThenameis:#{myName} UsingpugwithNode.js varpug=require('pug'); //compile varfn=pug.compile('stringofpug',options); varhtml=fn(locals); //render varhtml=pug.render('stringofpug',merge(options,locals)); //renderFile varhtml=pug.renderFile('filename.pug',merge(options,locals)); Options filenameUsedinexceptions,andrequiredwhenusingincludes compileDebugWhenfalsenodebuginstrumentationiscompiled prettyAddpretty-indentationwhitespacetooutput(falsebydefault) PDF-Downloadjadeforfree Previous Next ThismodifiedtextisanextractoftheoriginalStackOverflowDocumentationcreatedbyfollowingcontributorsandreleasedunderCCBY-SA3.0 ThiswebsiteisnotaffiliatedwithStackOverflow SUPPORT&PARTNERS Advertisewithus Contactus PrivacyPolicy STAYCONNECTED Getmonthlyupdatesaboutnewarticles,cheatsheets,andtricks.  Subscribe