將玉變量從內容傳遞到頁面標題？

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