【问题标题】:Express & Jade - max Block NestingExpress & Jade - 最大块嵌套
【发布时间】:2013-05-19 13:50:45
【问题描述】:

我使用 Express 3x + Jade + bootstrap +..etc

我的块/扩展结构看起来像这样

.layout.jade(只有头部)
.topNav.jade(仅顶部导航)
.sideNav.jade(sideNav和控制中心界面)
.slidePrem.jade(实际内容)

现在我尝试重新渲染 slidePrem

-> 这会渲染 sidenav、topnav、布局(因此“extends”语句会从 slideprem 中读出)

但它不会显示 slidePrem 的任何内容

经过许多小时的重新编码、搜索、重新设计等
.我将结构重写为 slideprem -> sidenav -> 布局

-> 这会渲染幻灯片、sidenav、布局

->> 那么嵌套块实际上有限制吗?
-> 可以编辑吗?
-> 或者 cld 你想象其他地方的错误?

问候鼠兔

编辑:

//slidePrem.jade//

extends ../sideNav
block wall
    #bla (or alert or sth)


//sideNav.jade//

extends topNav
block content
#subHeader
#subHeadNav
#Content //doesnt conflict with "block content" 
    div.container
        div.row
            div.span9
                block wall
            div.span3
                                    // further code



//topNav.jade//

extends layout
block navigation
    div.topnav.....
        div...
            ...
    block content
    #modal


//layout.jade//

doctype 5
html
head
    title= title
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Titillium+Web&subset=latin,latin-ext', type='text/css')
    link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
    link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css', media="screen")
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/cCenter.css')

    script(src='/javascripts/jq.js')
    script(src='/bootstrap/js/bootstrap.min.js')
    script(src='/javascripts/core.js')
    script(src='/javascripts/ajax.js')
body
    block navigation

【问题讨论】:

  • 你能粘贴一些代码吗?至少你的结构?
  • 可以分享一下错误吗?
  • 根本没有错误——它只是忽略了我渲染出来的模板

标签: node.js express block pug nested


【解决方案1】:

您应该尝试使用 includes 而不是 extends

所以你可以试试你的 layout.jade :

html
  head
  (...)
  body
    block navigation

在你的 navigation.jade 块中

extends layout

block navigation
  .topnav (div aren't required in jade)
  (...)
  include content

你的 content.jade 只需要那么

#subHeader
#subHeadNav
#Content //doesnt conflict with "block content" 
 div.container
   div.row
      div.span9
        include wall
      div.span3

如果还不够清楚,你可以在项目的 GitHub 页面上找到所有的include documentation

希望对你有帮助。

【讨论】:

  • 在很多情况下需要深度扩展嵌套,所以这并不能回答是否有限制的问题。
猜你喜欢
  • 2012-07-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-14
  • 1970-01-01
  • 1970-01-01
  • 2014-05-11
相关资源
最近更新 更多