javascript - 有没有办法在 Harp.js 中使用 Jade block ?

标签 javascript pug harp

我正在使用 Harp 创建一个网站,我想知道是否有一种方法可以在正常的 != Yield 工作方式之外使用 Jade block 。基本上,对于页面特定的脚本,我想将一个 block 传递到我的布局中。目前,模板中 block 中的任何内容都会按原样传递到我的布局中。

例如:

// _layout.jade
html
  head
    title Hello, world
  body
    != yield
    div Random delimiter
    block scripts

// index.jade
h1 Hello, world
block scripts
  script(src='/some/script.js').
  div Not working

输出:

<html>
  <head>
    <title>Hello, world</title>
  </head>
  <body>
    <h1>Hello, world</h1>
    <div>Not working</div>
    <div>Random delimiter</div>
  </body>
</html>

有什么想法吗?

最佳答案

是的,你可以这样做:

// _custom_layout.jade
html
  head
    title Hello World
  body
    block main_content
      //- Default main content
    div Delimiter
    block scripts
      //- Default scripts here

还有

// index.jade
extends _custom_layout.jade
block main_content
  h1 Hello From Index
block scripts
  script(src='/some/script.js').

应该输出

<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello From Index</h1>
    <div>Delimiter</div>
    <script src="/some/script.js"></script>
  </body>
</html>
  • 要利用 jade 的 block 功能,请使用 _layout.jade 以外的其他内容,因为该文件名在 Harp 中已定义用途。您必须使用 _data.json 将自定义模板分配给页面。

我还没有测试过这段代码,如果有什么问题请评论,我会修复它。

关于javascript - 有没有办法在 Harp.js 中使用 Jade block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23815431/

相关文章:

node.js - 在jade中快速上传图片并查看

javascript - package.json 使用 npm 调用 Harp 和浏览器同步

javascript - 无法使用 jQuery 获取表单的选择元素值

javascript - 避免模​​板代码冗余

node.js - 我可以让我的 nodejs/express/jade 堆栈报告合理的语法错误吗?

javascript - Jade 包括检查实际页面的条件

web - 从 Harp.js 中的 EJS 模板调用另一个文件上的 javascript 函数

javascript - 有没有 Visustin 的(免费)替代品,我需要从现有的 JavaScript 代码创建流程图

javascript - 如何以 Angular 将数组插入数组?

javascript - 尽管响应成功,但 JQuery 数据表未从 AJAX 调用中填充