node.js - 是否可以将模板的某些部分放入其他文件中？

Question

我想将 Jade 模板的导航部分放在单独的文件 (navigation.jade) 中 - 这可行吗？

我有layout.jade，并且想做这样的事情:

mixin ie(condition, content)
  | <!--[!{condition}]>!{content}<![endif]-->

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    meta(name="description" content="")
    meta(name="author" content="")
    link(href="/stylesheets/bootstrap.css" rel="stylesheet")
    link(href="/stylesheets/style.css" rel="stylesheet")
    link(href="/stylesheets/responsive.css" rel="stylesheet")
    link(href="/stylesheets/layout-semiboxed.css" rel="stylesheet")
    link(href="/stylesheets/skin-red.css" rel="stylesheet")
    link(rel="shortcut icon" href="img/favicon.ico")
    +ie('if lt IE 9', '<script src="/javascripts/html5shiv.js"></script>')
    +ie('if lt IE 9', '<script src="/javascripts/respond.min.js"></script>')
    +ie('if lte IE 8', '<link href="/stylesheets/ie8.css" rel="stylesheet">')
  body(class="off")
    .wrapbox
        section.toparea
            .container
                .row
                    div(class="col-md-6 top-text pull-left animated fadeInLeft")
                    div(class="col-md-6 text-right animated fadeInRight" style="float: right;")
                        .social-icons
                            a(class="icon icon-facebook" href="#")
                            a(class="icon icon-twitter" href="#")
                            a(class="icon icon-linkedin" href="#")
                            a(class="icon icon-skype" href="#")
                            a(class="icon icon-google-plus" href="#")
        black navigation // <-- this is the part I am trying to add
        block content

我创建了navigation.jade，它看起来像这样:

extends layout

block navigation
    nav(class="navbar navbar-fixed-top wowmenu" role="navigation")
        .container
            .navbar-header
                a(class="navbar-brand logo-nav" href="index.html")
                    img(src="/images/mightywash.png" alt="logo")
                ul(id="nav" class="nav navbar-nav pull-right")
                    li(class="active")
                        a(href="/") Home
                    li
                        a(href="/locations") Locations
                    li
                        a(href="/charity") Charity
                    li
                        a(href="/washpackages") Wash Packages
                    li
                        a(href="/lubecenters") Oil Change / Lube Centers
                    li
                        a(href="/contact") Contact

如何将两者放在一起？

Answer 1

是的，jade 有一个包含指令。

如果您的导航栏位于很多页面中，请将其(或包含它)放入您扩展的布局中。所以每个人都明白。否则只包含在几页中。

语法是(例如，我在每个页面的底部放置页脚

include ../public/footer1.html

我怀疑“绝对路径”，例如/public/foo.html 也可以 - 尝试一下(我也是新手)。您可以在此处包含 .jade 而不是 .html 更多 Jade 示例:( http://jade-lang.com/reference/#includes ) 这是我的完整模板(呃，我的意思是布局)，用于在每个页面上放置页眉导航栏和页脚。 YMMV:

doctype 5
html
   head
      title= title
      link(rel='stylesheet', href='/stylesheets/nextq1.css')
      block head

   body
      include ../public/header1.html

      block content

      include ../public/footer1.html