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指令。

如果您的导航栏位于很多页面中，请将其（或包含它）放入您扩展的布局中。所以每个人都能得到它。其他只包括几页。

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

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

Answer 2

包括有时可能还需要包括标签.. 例如：

include includes/footer.jade

其中footer.jade是与当前jade文件相同的文件夹... 你不能在脚本部分包含“包含”

Answer 3

你的代码看起来很好......应该可以工作!!除非您使用的是black navigation而不是block navigation。

如果它不起作用你可以尝试这种方式..

最简单的方法是使用include。

您有navigation.jade文件。要将此文件包含为layout.jade的一部分，只需添加

include ./navigation.jade

并删除block navigation行。

如果使用此方法，请从extends layout文件的顶部删除navigation.jade行。

是否可以将我的模板的某些部分放在其他文件中？

3 个答案: