我正在尝试使用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
是什么?感谢。
答案 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