将玉变量从内容传递到页面标题？

Question

我正在尝试使用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唯一!= 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 帖子只显示从页面布局到内容的变量。

Answer 1

我看到杰夫已经在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模板将使该块包括工作。

所以，你可以在这里做两件事之一：

与Jeff核实，看看是否可以将包含系统更改为Jade
或者使用$ 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在我们想要的任何布局中 但请注意，我们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}

看看有多简单？ :)

将玉变量从内容传递到页面标题？

问题描述

1 个解决方案

解决方案1
10 已采纳 2014-01-04 02:33:57

将玉变量从内容传递到页面标题？

问题描述

1 个解决方案

解决方案1 10 已采纳 2014-01-04 02:33:57

解决方案1
10 已采纳 2014-01-04 02:33:57