css - Jade HTML - 添加到 layout.jade 主体

Question

我有以下 layout.jade 代码

!!!
html
    head
        title= title
        link(rel='stylesheet', href='/vendor/bootstrap.min.css')
        link(rel='stylesheet', href='/css/style.css')
        script(type='text/javascript')
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
    body!= body

登录后会出现以下页面:

div.navbar.navbar-fixed-top
    div.navbar-inner
        div.container-fluid
            ul#global-nav.nav.pull-left
                a(href='#').brand Control Panel
            button#btn-logout.btn.btn-primary
                i.icon-lock.icon-white
                | Sign Out

include account
include modals/alert
include modals/confirm

script(src='/js/views/home.js')
script(src='/js/controllers/homeController.js')

home.jade 页面上的 div 正在创建一个标题以放入控制面板标题和一个用于退出帐户的选项。即使您没有登录，我也想把这些 div 放在主屏幕上。我已经通过简单地将它们移动到 layout.jade 页面成功地做到了这一点。

我的问题是 Control Panel 出现在页眉之外。所以 home.jade 页面并没有像我想象的那样简单地添加到我的 layout.jade 页面正文中的代码，关于如何做到这一点的任何想法？

即

layout.jade
body
    div.header

home.jade
    p hello

我假设这种代码只会创建一个带有正文的主页

body
    div.header
        p hello

在页眉内。

理想情况下，我希望这个伪代码就位，并且注销文本仅在登录时出现，而登录功能在您未登录时就位，因为最终我希望主登录容器在中间从按钮弹出。

Answer 1

您需要查看 Jade block 。 Here is a good tutorial on the subject, thorough and short , 和 Jade Github readme关于此事。

您将结合使用“include”和“block”来创建可以按您希望的方式工作的混合文件。请注意确保您对包含的文件结构和目录相对于调用它们的文件保持警惕。