如何确保javascript位于Jade模板中代码的底部?

如何确保javascript位于Jade模板中代码的底部?,javascript,pug,Javascript,Pug,我不熟悉玉模板。这是布局图。jade: html head meta(charset='UTF-8') title MyApplication meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport') link(href='/bootstrap/dist/css//bootstrap.min.css', rel=

我不熟悉玉模板。这是布局图。jade:

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')
html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
    script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

    block script
如您所见,模板文件末尾有两个javascript。我的另一个jade文件,主页。jade是:

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

script(type='text/javascript').
  $(function() {
     alert('here!');
  }

与此文件相关的javascript位于文件末尾。不幸的是,块内容被嵌入layout.jade中,因此这里的脚本是在jQuery之前加载的。代码永远不会被调用。有没有办法解决这个问题以确保在jQuery之后加载这里的javascript?谢谢

您可以在布局中定义更多要填充的块。甚至可以为块定义默认值:请参见

layout.jade:

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')
html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
    script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

    block script
home.jade:

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

block script
    script(type='text/javascript').
      $(function() {
        alert('here!');
      }
这将分别呈现内容、js库和脚本


在layout.jade中,缩进正文内的脚本标记。

您可以在布局中定义更多要填充的块。甚至可以为块定义默认值:请参见

layout.jade:

html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')
html
  head
    meta(charset='UTF-8')
    title MyApplication
    meta(content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no', name='viewport')
    link(href='/bootstrap/dist/css//bootstrap.min.css', rel='stylesheet', type='text/css')

  body
    block content

    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js')
    script(src='/bootstrap/dist/js/bootstrap.min.js', type='text/javascript')

    block script
home.jade:

extends layout

block content

        // Content Header (Page header)
        section.content-header
          h1= title

        // Main content
        section.content

block script
    script(type='text/javascript').
      $(function() {
        alert('here!');
      }
这将分别呈现内容、js库和脚本


在layout.jade中,缩进正文中的脚本标记。

我知道有一种愚蠢的方法可以解决这个问题。即在每个单独的jade中添加javascript文件。但是我希望会有一种更优雅的方法来解决这个问题。你可以将jQuery包含移到头部……我知道有一种愚蠢的方法可以克服这个问题。即在每个单独的jade中添加javascript文件。但我希望会有一种更优雅的方法来解决这个问题。你可以将jQuery包含移到头部…这完美地解决了我的问题。非常感谢。我希望我能投更多的票。这完美地解决了我的问题。非常感谢。我希望我能投更多的票。