Geek asks and answers

How jade blocks work - Jade

I am trying to use a block Jadeand my content is not showing. Here is mine index.jade:

//index.jade
extends ../includes/layout

block main-content
  section.content
    div(ng-view)

It adds the file layoutas I expect. Here is the file:

//layout.jade
doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    include scripts

But it does not include mine main.jade:

// main.jade
h1 This is a Partial
h2 {{ myVar }}

or any of the code after it. This is my first time using Jade, so I'm scared. Also, what is -contentit when you turn it on block? Thank.

+3
source share
1 answer

A block is a “block” of content that you want to insert into the template from which you extend it.

Assuming a catalog layout:

|--views  
   |--layout.jade  
   |--index.jade  
   |--main.jade

Here is an example of using your templates:

//layout.jade

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    block content
    include scripts

Then, all other pages that extend from layout.jade can insert content into this block:

//index.jade

extends layout
block main-content
  section.content
    div(ng-view)

//main.jade

extends layout
block content
  h1 This is a Partial
  h2 {{ myVar }} // which should be: h2= myVar

This will display (when using Express):

//index.html

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    section.content
      div(ng-view)
    include scripts

//main.html

doctype html
html
  head
    link(href="/favicon.ico", rel="shortcut icon",type="image/x-icon")
    link(rel="stylesheet", href="/css/bootstrap.css")
    link(rel="stylesheet", href="/vendor/toastr/toastr.css")
    link(rel="stylesheet", href="/css/site.css")
  body(ng-app="app")
    h1 Hello Worldd
    h1 This is a Partial
    h2 {{ myVar }} // which should be: h2= myVar
    include scripts
+6
source

More articles:


All Articles