Nodejs jade模板引擎怎么extend block ?

Nodejs jade模板引擎怎么extend block ?

比如layout.jade代码如下:

doctype 5
html
   head
     title
       block title
       | My Site
   link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap.min.css")
   link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap-responsive.min.css")
   link(rel="stylesheet", href="/stylesheets/web.css?v=1")

  body
    block content
      div(class="container-fluid")

index.jade代码如下:

extends ../layout
block content
  parent()
  h1 Welcome to .....

jade有木有PHP的twig模板引擎的parent()呢? 在inde.jade继承了content block的所有代码?


6 回复

当然可以。下面是一个关于如何在 Node.js 的 Jade 模板引擎中使用 extend 和 block 的详细示例。

布局文件 (layout.jade)

假设你有一个全局布局文件 layout.jade，它定义了一些通用的结构，比如 HTML 的头部、脚部等，并且预留了一些块（blocks）来让子页面自定义内容。

doctype 5
html
  head
    title
      block title
      | My Site
    link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap.min.css")
    link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap-responsive.min.css")
    link(rel="stylesheet", href="/stylesheets/web.css?v=1")

  body
    block content

子页面文件 (index.jade)

现在，在你的子页面文件 index.jade 中，你可以通过 extends 关键字来继承 layout.jade 文件，并通过 block 关键字来替换或扩展布局文件中的特定部分。

extends layout

block title
  | Home Page Title

block content
  h1 Welcome to My Website!
  p This is the main content of the home page.

解释

  • extends: 这个关键字告诉 Jade 引擎当前文件 index.jade 是基于 layout.jade 文件的。
  • block: 这个关键字用于定义一个可被替换的区域。在 layout.jade 中定义了一个名为 title 的块，而在 index.jade 中，我们用同样的名称 title 来填充这个块。
  • block content: 在 layout.jade 中定义了一个名为 content 的块。在 index.jade 中，我们用同样的名称 content 来填充这个块。这样，index.jade 中的 content 块会替换掉 layout.jade 中的 content 块。

注意事项

  • 如果你在子页面中没有定义某个块（例如 title 或 content），那么这些块将使用布局文件中定义的默认内容。
  • 你也可以在 layout.jade 中定义多个块，然后在不同的子页面中分别替换它们。

通过这种方式，Jade 模板引擎提供了一种非常灵活的方式来组织和重用模板。希望这个示例能帮助你更好地理解和使用 Jade 模板引擎。


哦对了, jade的完整API文档在哪里呢? http://jade-lang.com/可不完整呢.

搞了几天, 还是没看到jade支持block 继承. 今天碰运气到npmjs里搜索twig. 没想到居然有nodejs版的twig. 更没想到的是, API跟PHP版的twig差不多一样. 果断切换到twig去了.幸好项目的代码没写多少. 推倒重来.

你好最近我也在用twig.js来做模板，但是用supervisor作代码监控调试，但是换上twig之后发现修改页面没变化了，貌似twig自己做了缓存 请问缓存这个要怎么设置？

当前的jade是支持继承的， 也支持混入, 关键字分别是: extend, mixin

在Node.js中使用Jade模板引擎（现在称为Pug）时，extends关键字用于继承父模板中的内容。如果你想在子模板中扩展并替换父模板中的某个块（例如content），你可以通过block关键字来定义，并在子模板中重新定义该块。

根据你的描述，layout.jade是父模板，而index.jade是子模板。你需要在子模板中重新定义content块，而不是调用parent()函数。

示例代码

layout.jade

doctype 5
html
   head
     title
       block title
       | My Site
   link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap.min.css")
   link(rel="stylesheet", href="/libs/bootstrap2.3/css/bootstrap-responsive.min.css")
   link(rel="stylesheet", href="/stylesheets/web.css?v=1")

  body
    block content
      div(class="container-fluid")

index.jade

extends layout

block content
  h1 Welcome to .....
  p This is the main content of the page.

解释

  • extends layout: 这行代码表示index.jade继承自layout.jade。
  • block content: 在index.jade中重新定义了content块，这将覆盖layout.jade中的content块内容。

注意事项

  • parent()不是Jade/Pug的一部分，因此在你的子模板中不应该使用它。
  • 如果你想在子模板中保留父模板中的部分内容，可以考虑使用append或prepend关键字来添加额外的内容。

这样，当你渲染index.jade时，它会继承layout.jade中的头部和其他部分，同时替换掉content块的内容。

回到顶部