【问题标题】:passing jade variables from content to page title?将玉变量从内容传递到页面标题?
【发布时间】:2014-01-04 01:32:04
【问题描述】:

我正在尝试使用 Jade 将内容块中的变量包含到更大的页面布局中。 我想把页面的语义内容标题<title>标签。


我正在使用出色的 roots.cx 工具包在 Jade 和 Stylus 中构建网站。

我有 2 个文件:pagelayout.jadepage142.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 posts 只显示从页面布局到内容的变量。

【问题讨论】:

    标签: pug roots-toolkit


    【解决方案1】:

    我在 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 一起使用的最小根模板将使块包含工作。

    所以,你可以在这里做两件事之一:

    1. 与 Jeff 确认是否可以将包含系统更改为 Jade
    2. 或使用$ roots new &lt;projectname&gt; --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}
    

    看看这有多简单? :)

    【讨论】:

    • 我实际上只是尝试设置它,但不幸的是它仍然无法正常工作:gist.github.com/anonymous/8250758
    • 所以转换的方法是删除 app.coffee 中的 layouts 行 - 抱歉这有点混乱,我们正在开发的下一个版本会更清楚!
    • 我用一个巧妙的小技巧修改了这个答案,你可以用它来让你的项目变得漂亮和可维护
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-18
    • 1970-01-01
    相关资源
    最近更新 更多