翡翠是如何工作的 - 玉

时间:2014-02-05 12:21:41

标签: pug

我正在尝试使用Jade块,但我的内容未显示。这是我的index.jade

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

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

它正在添加我期望的layout文件。这是该文件:

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

但它不包含我的main.jade

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

或其后的任何代码。这是我第一次使用Jade所以我正在努力。此外,当您加入-content时,block是什么?感谢。

1 个答案:

答案 0 :(得分:8)

一个块是"块"您希望插入到正在扩展它的模板的内容。

假设目录布局:

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

以下是使用模板的示例:

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

然后从layout.jade扩展的所有其他页面都可以将内容插入到该块中:

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

这将呈现(假设使用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