7

我正在尝试使用 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>

目前，我得到一个编译器类型错误：

Cannot read property 'title' of undefined

我假设我收到此错误，因为 Jade 变量的范围可能仅适用于从模板到内容，反之亦然。

如何将页面变量从内容传递到页面布局？我发现 的所有StackOverflow 帖子都只显示了从页面布局到内容的变量。

4

1 回答 1

11

我看到Jeff已经在 Twitter 上为你回答了这个问题，但为了 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!

当你 render 时会发生什么index.jade，它会“看到”它扩展layout.jade（第 1 行），然后看到它block head后面跟着一些内容，所以它会搜索layout.jade并block head用它自己的内容替换它在那里找到的内容。

根据您的 Roots 项目的设置方式，这可能有效，也可能无效。当前的 Roots 稳定版本为默认的 Roots 模板提供了自己的包含系统，该模板与任何模板引擎无关。

这个默认的 Roots 模板是$ roots new projectname.

我不确定是否可以覆盖项目的当前模板，或者当前是否可以更改模板引擎的工作方式（无论是使用 Roots 包含系统还是它自己的），但我知道的是与一起使用的最小根模板$ roots new projectname --min将使块包含工作。

因此，您可以在此处执行以下两项操作之一：

  1. 与 Jeff 联系，看看是否可以将包含系统更改为 Jade
  2. 或使用重新创建项目$ 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}

看看这有多简单？:)

于 2014-01-04T02:33:57.073 回答