• Jade学习笔记


      初学nodejs,折腾过用handlebars做模板,后来隔了一段重新学习,用了jade,真心简洁……记录一些学习笔记,以备复习。

      jade是基于缩进的,所以tab与space不能混用;

      属性的设置:link(rel='stylesheet', href='/stylesheets/style.css');

      变量的定义:- var users = ["Sally","Joseph","Sam","Mike"]  不要var也可以;

      内容赋值:p= user 或 p ${user} 前者常用于内容就是变量,后者常用于拼接'Hello ' + ${user} , p Hello World 则是后者直接为内容;

      条件语句:

    //case语句
    - num = 10
    case num
        when 0
            p you have no friends
        when 1 : p you have friends
        default
            p you have #{num} friends
    
    //if语句
    - 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 no description.
    
    - opts = { flag : false }
    #sum
    // ! 与 unless 同理
        if !opts.flag
            h2 Hello!
            p= options.description
        unless opts.flag
            h2 World!
            p= options.description

      循环语句:

    - 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}

      多行输出:

    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');

      注释:

    //
      注释块
      '//-'是服务器端注释
    

       转义 与 非转义 :

    //- 默认和!=是不转义,不安全(标签直接执行); = 则会转义 安全(标签转字符串)
    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条件注释:

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

      extends : 

    //- layout.jade
    doctype html
    html
      head
        block title
          title Default title
      body
        block content
    //- index.jade
    extends ./layout.jade
    
    block title
      title Article Title
    
    block content
      h1 My Article
    <!doctype html>
    <html>
      <head>
        <title>Article Title</title>
      </head>
      <body>
        <h1>My Article</h1>
      </body>
    </html>

      filters :

    filters是编译时候运行,所以不能使用动态内容,在服务器端编译。(需要先安装markdown模块)

    :markdown
      # Markdown
    
      I often like including markdown documents.
    script
      :coffee
        console.log 'This is coffee script'
    <h1>Markdown</h1>
    <p>I often like including markdown documents.</p>
    <script>console.log('This is coffee script')</script>

      include : 

    include ./includes/foot.jade 
    include:markdown article.md
    //可以是js css等文件 也可以是Filtered Text

      Mixins : 创建可重复使用的jade块

    mixin article(title)
        .article
            .article-wrapper
            h1= title
                    if block    //block关键字,就是块
                        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")

      直接输出文本: 前面加 |  例如:|Plian text can include <strong>html<strong> 否则会把Plian当做标签<Plian></Plian>

      子集标签除了缩进,还支持a: span: em 这种写法,冒号后面必须加空格。

        

  • 相关阅读:
    [Git]01 如何安装和配置
    [ext4]09 磁盘布局
    [ext4]磁盘布局
    [ext4]01 磁盘布局
    [工具技巧] SecureCRT使用技巧 V1.0
    [内存管理]管理图解v0.1 v0.2 v0.3
    内核源码目录结构
    共享内存删除的安全“陷阱”
    基于header的一些常用指令详解
    18、前端知识点--自定义指令
  • 原文地址:https://www.cnblogs.com/viccici/p/3964399.html
Copyright © 2020-2023  润新知