我在 Twitter 上看到 Jeff 已经为你回答了这个问题,但为了 StackOverflow 我会在这里再次为你回答。
Jade 提供对“块”的支持,其工作方式类似于包含,但允许您传递 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后面跟着一些内容,所以它会搜索@987654330 @ for block head 并用它自己的内容替换它在那里找到的内容。
根据您的 Roots 项目的设置方式,这可能有效,也可能无效。当前的 Roots 稳定版本为默认的 Roots 模板提供了自己的包含系统,该模板不受任何模板引擎的影响。
此默认根模板是 $ roots new projectname 使用的模板。
我不确定是否可以覆盖项目的当前模板,或者当前是否可以更改模板引擎的工作方式(无论是使用 Roots 包含系统还是它自己的),但我知道的是,与$ roots new projectname --min 一起使用的最小根模板将使块包含工作。
所以,你可以在这里做两件事之一:
- 与 Jeff 确认是否可以将包含系统更改为 Jade
- 或使用
$ roots new <projectname> --min 重新创建项目
仅供参考,Jeff 和我都使用 --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}
看看这有多简单? :)