Tuesday, February 21, 2017

node.js jade view engine tutorials

/*views/shared/root.jade*/
doctype html
html(lang="en")
    head
        block head
            block title
                title Default Title
            meta(name="viewport", content="width=device-width, initial-scale=1.0")
            link(href='/#{loader.theme_favicon("default")}', rel='icon', type='image/png')
            link(href='/#{loader.theme_static("css/styles.css")}', rel='stylesheet', type='text/css')
            script(src='/#{loader.theme_static("js/scripts.js")}')
    body
        #body-wrapper
            block body

/*views/shared/site.jade*/
 
extends root
block body
    block variables
    div okey=#{body_class}
    #content-wrapper
        block content
    #footer-wrapper
        block footer
            - var imageName = new Date().getFullYear();
            span Copyright #{imageName} <br>


/*views/home/index.jade*/

extends ../shared/site
block variables
    -var body_class = 'i-am-the-home-page'
block append head
    script(src='/#{loader.theme_static("js/scripts123.js")}')
block title
    title #{model.title}
block content
    h1 Post's Header
    p Here's a list of all blog posts
mixin list-item
block footer
    //block comment
    h1 hello world
    //-invisible block comment
    h2 how are you?
    mixin header(title)
        div.container&attributes(attributes)
            h3.sectionHeader #{title}
            div.content(style="display: block")
                block
    +header('footer')(style="text-align:center; display: block; width: 500px;")
        p this is a footers paragraph
    -var jade_obj = require('jade');   
    -var list_view = loader.view_filename('login/partial/list.jade', router.langdir);   
    -if (loader.file_exists(list_view)) {
        -var html_str = jade_obj.renderFile(list_view, {list: model.list});
        div !{html_str}
    -} else {
        include ./partial/list
    -}


/*views/home/partial/list.jade*/

-var items = (list !== undefined ? list : model.list);
ul
    mixin htmlli(liitem)
        li(id="#{liitem}")= '!' + liitem
    -each item, i in items
        -if (items.length > 0)
            +htmlli(i + '. ' + item)
        -else
            include ./item

/*views/home/partial/item.jade*/

li= item

No comments: