Bootstrap 渲染一个空白的白页-node js-express-jade答案

【问题标题】：Bootstrap rendering a blank white page - node js- express - jadeBootstrap 渲染一个空白的白页-node js-express-jade
【发布时间】：2015-01-13 05:16:17
【问题描述】：

我正在尝试使用 Jade 模板引擎让引导程序为 Node.js 工作。

当我尝试运行 index.jade 文件时，它只是呈现一个空白页面。

div.topbar
  div.fill
    div.container
      a.brand(href='#') #{title}
      ul.nav

      form.pull-right(method="post", id="loginForm")
        input.input-small(id="username", type="text", name="User", placeholder="Username")
        input.input-small(id="password", type="password", name="Password", placeholder="Password")
        input.btn.primary(type="submit", value="Sign In")
      p#loginPrompt.pull-right.login-prompt

当我运行它时，我会得到类似的东西。

但是当我尝试包含扩展布局（见下图）时，我定义了引导样式。我得到一个空白页。

谁能解释一下如何设置这个引导程序工作。我在 public 下的 stylesheets 文件夹中有 bottstrap css 文件，在 public 文件夹中有 javascripts 下的 js 文件。

layout.jade

doctype
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
    script(src='/javascripts/bootstrap.min.js')
  body
    block content

【问题讨论】：

标签： node.js twitter-bootstrap express pug

【解决方案1】：

确保您像这样包含block content：

extends ./layout.jade
block content
    div.topbar
      div.fill
        div.container
          a.brand(href='#') #{title}
          ul.nav

          form.pull-right(method="post", id="loginForm")
            input.input-small(id="username", type="text", name="User", placeholder="Username")
            input.input-small(id="password", type="password", name="Password", placeholder="Password")
            input.btn.primary(type="submit", value="Sign In")
          p#loginPrompt.pull-right.login-prompt

我测试了这适用于您展示的 layout.jade。

【讨论】：

我刚刚在另一个文件 aboutus.jade 中扩展了布局，该文件只有文本。该文件恰好显示在 UI 上，正是这个 index.jade 显示了一个空白页面
哦，好吧——block content 怎么样？那是在 layout.jade 中，但看起来不像您在 index.jade 中声明它
不，我尝试过扩展布局和块内容。它也不起作用
酷！我所做的只是写了两行，所以要么是第一行，你的路径不正确，要么是第二行，你忘了定义块。如果您没有定义该块，则不会为 layout.jade 提供任何要插入的内容。当然，缩进在 Jade 中很重要。
好的 Roman，再次感谢您！ :) 我应该更加小心缩进

【解决方案2】：

当您尝试引用您的翡翠布局时的简单错误。如果这不起作用，请使用 extends./layout.jade 这里是类似问题的链接Extending Jade Differently

【讨论】：