我正在尝试使用Jade将内容块中的变量包含到更大的页面布局中.我想为页面<title>标记添加语义内容标题.
我正在使用优秀的roots.cx工具包在Jade和Stylus中构建一个网站.
我有2个文件:pagelayout.jade和page142.jade.
该pagelayout文件包含一个基本的Jade页面模板(为简单起见而编辑):
!!!
html
head
title #{page.title} | My Great Site
body
!= content
该page142文件包含一些将包含在以下内容中的唯一内容!= content:
- var page = { title: 'Page 142' }
h1 Content header of page 142
我希望最终的HTML看起来像什么:
<html><head><title>Page 142 | My Great Site</title></head>
<body><h1>Content header of page 142</h1></body></html>
目前,我得到一个编译器TypeError:
Cannot read property 'title' of undefined
我假设我得到了这个错误,因为Jade变量的范围可能仅适用于从模板到内容,反之亦然.
如何将页面变量从内容传递到页面布局？我发现的 所有StackOverflow 帖子只显示从页面布局到内容的变量.
raz*_*ard 10
我看到杰夫已经在Twitter上为你解答了这个问题,但是为了StackOverflow,我会在这里再次为你解答.
Jade提供对"blocks"的支持,它类似于包含,但允许你传递Jade块.将块视为"块级包含",只需使用独特的语法即可生成传递给它的块块的内容.
在你的layout.jade,你可以这样做:
html
head
block head
title My Website
body
block content
在你的index.jade,你可以做到这一点:
extends layout
block head
title A Specific Page of My Website
block content
p Hello World!
当渲染会发生什么index.jade,是它会"看到"它延伸layout.jade(1号线),然后看它已block head其次是一些内容,所以它会搜索layout.jade的block head,并取代它与它自己中找到的内容.
根据您的Roots项目的设置方式,这可能有效,也可能无效.Roots的当前稳定版本为默认的Roots模板提供了自己的包含系统,该模板与任何模板引擎无关.
此默认根模板是使用的模板$ roots new projectname.
我不确定是否有可能覆盖项目的当前模板,或者当前是否可以更改模板引擎的工作方式(无论是使用Roots包含系统还是自己的),但我所知道的是使用的最小根模板$ roots new projectname --min将使块包括工作.
所以,你可以在这里做两件事之一:
$ roots new <projectname> --min仅供参考,杰夫和我都使用--min我们的首选模板,除了我已将其扩展到包括各种跨浏览器的polyfill.
编辑:
现在,您可能想知道是否更换整个块只是为了更改块中某处的标签内容效率有点低 - 从维护角度看它效率低 - 我无法真正评论处理速度.但是如果你记得在Jade中你可以定义变量,那么在Jade中,你可以将任何东西放在一个块中 - 并且你将这两个结构组合起来 - 它们会变得更有用.
例如,如果我知道我将在项目中广泛使用Jade,我将创建一个configuration.jade文件,其中我将所有配置/设置变量列为块.然后我将在我的主要布局中包含该文件(这只是为了简单起见,包括设置标题):
config.jade:
- var siteTitle = "My Cool Website";
layout.jade:
block config
include config
html
head
title #{siteTitle}
body
block content
p Hello World
include我们配置文件而不是仅仅在新布局的顶部定义的原因仅仅是因为某些项目需要多个布局,因此将配置变量存储到不同文件的责任卸载是有意义的,这样我们就可以include了我们想要的任何布局.但请注意,我们include的配置文件位于一个block config.这允许我们用我们文件中的配置变量替换那个块,所以 - 如果我有一个博客页面layout,我可以扩展,我可以像这样写:
blog.jade
extends layout
block config
- var siteTitle = "Blog - My Cool Website";
block content
each post in posts
p #{post.content}
看看有多简单？:)
| 归档时间： |
|
| 查看次数： |
4890 次 |
| 最近记录： |