Jade HTML - 添加到layout.jade主体

时间:2012-11-21 19:47:23

标签: css html styling pug

我有以下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

在标题内。

理想情况下,我希望这个伪代码到位,并且只有在登录时才能显示注销文本,并且当您未登录时登录功能就位,因为最终我希望主登录容器在中间从按钮弹出。

1 个答案:

答案 0 :(得分:0)

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

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