Jade Study Notes

Source: Internet
Author: User
Tags case statement

I used handlebars as a template when I was a beginner in nodejs. Later I learned it again and used jade. It was really concise ...... Record some Study Notes for review.

Jade is based on indentation, so the tab and space cannot be mixed;

  Attribute settings:Link (rel = 'stylesheet ', href ='/stylesheets/style.css ');

  Variable definition:-Var users = ["Sally", "Joseph", "Sam", "Mike"] Do not use var;

  Content assignment:P = user or p $ {user}. The former is often used for content as a variable, while the latter is often used for splicing 'hello' + $ {user }, P Hello world is the content of the latter directly;

  Condition Statement:

// Case statement-num = 10 case num when 0 p you have no friends when 1: P you have friends default p you have # {num} friends // If statement-Options = {Description: 'reference conditionals '}-flag = false # user if options. description H2 description p. description = options. description else if flag H2 description p. description. user has no description, why not add one... else H1 description p. description user has n O description.-opts = {flag: false} # sum //! Similar to unless, if! Opts. Flag H2 hello! P = options. description unless opts. Flag H2 world! P = options. Description

  Loop statement:

- for (var i=0;i<3;i++)    li shit- var users = ["Sally","Joseph","Sam","Mike"];- each user in users    p= user- addrs = [‘BeiJing‘,‘GuangZhou‘,‘DongGuan‘]- for addr in addrs    p #{addr}- names = {xing:‘ye‘,ming:‘renming‘};- each val,key in names      li #{key} : #{val}

 Multi-row output:

p     | You are sleeping.    | No I just have a rest.p.    Second function.    Just for testing.    script.    console.log(‘Hello world‘);    console.log(‘Hello life‘);script    |console.log(‘Hello world‘);    |console.log(‘Hello life‘);

  Note:

// The comment block '//-' is a server-side comment

Escape and non-escape:

//-Default and! = It is not escaped, not safe (the tag is executed directly); = it will be escaped safe (the tag is converted to a string) P what's up <escaped> 1 p = 'what's '+ 'up <escaped> 2' p = 'what s up <escaped> 3 'p! = 'What s' + 'up <escaped> 4' p! = 'What s up <escaped> 5'

  IE condition note:

<!--[if IE 8]>    p This is IE 8<![endif]-->

  Extends:

//- layout.jadedoctype htmlhtml  head    block title      title Default title  body    block content//- index.jadeextends ./layout.jadeblock title  title Article Titleblock content  h1 My Article<!doctype html>

  Filters:

Filters is run during compilation, so dynamic content cannot be used and compiled on the server. (You need to install the markdown module first)

:markdown  # Markdown  I often like including markdown documents.script  :coffee    console.log ‘This is coffee script‘

  Include:

Include./Includes/foot. Jade include: markdown article. md // It Can Be a js css file or filtered text file.

 Mixins:Create reusable Jade Blocks

Mixin article (title ). article. article-wrapper H1 = title if block // block keyword, that is, block else p no content provide + Article ('Hello World') + Article ('Hello Dongguang ') P This Is My P hometown
mixin link(href, name)  //- attributes == {class: "btn"}  a(class!=attributes.class, href=href)= name+link(‘/foo‘, ‘foo‘)(class="btn")

  Directly output text:Prefix | example: | plian text can include <strong> HTML <strong> otherwise, plian is regarded as a tag <plian> </plian>

In addition to indentation, subset labels also support the expression A: Span: Em. spaces must be added after the colon.

 

Jade Study Notes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.