Nodejs中index.jade 和 layout.jade两者在功能上有区别么？

Nodejs中index.jade 和 layout.jade两者在功能上有区别么？

刚开始学node，在views里默认有两个jade文件 这两个是控制不同页面的吗？ 还是每个不同类型的页面都需要一个jade？

6 回复

当然可以。以下是关于“Nodejs中index.jade 和 layout.jade两者在功能上有区别么？”这个问题的回答：

标题: Nodejs中index.jade 和 layout.jade两者在功能上有区别么？

内容:

刚开始学习Node.js时，你可能会注意到在views目录下默认存在两个Jade（现在称为Pug）模板文件：index.jade和layout.jade。这两个文件在功能上确实有所不同。

index.jade

index.jade通常用于定义特定页面的结构和内容。例如，如果你有一个首页，那么index.jade将包含该首页的所有HTML元素、文本和其他组件。

// views/index.pug (假设已改为Pug)
doctype html
html(lang='en')
  head
    title Home Page
  body
    h1 Welcome to the Home Page!
    p This is some content on the home page.

layout.jade

另一方面，layout.jade更像是一种布局模板，它包含了整个应用中所有页面共用的基本结构，比如头部、底部和导航栏等。其他页面模板（如index.jade）可以通过继承layout.jade来重用这些通用部分。

// views/layout.pug
doctype html
html(lang='en')
  head
    block head
      title Default Title
  body
    header
      h1 My Website Header
    nav
      ul
        li
          a(href='/') Home
        li
          a(href='/about') About
    main
      block content
    footer
      p © 2023 My Website

继承使用示例

当你在index.jade中使用extends关键字并引用layout.jade时，index.jade中的内容将被插入到layout.jade中定义的block content区域。

// views/index.pug
extends layout.pug

block content
  h1 Welcome to the Home Page!
  p This is some content on the home page.

通过这种方式，你可以确保所有的页面都共享相同的布局，同时又能保持各自的独特内容。

希望这能帮助你理解index.jade和layout.jade在功能上的区别以及它们如何协同工作。


简单滴理解就是，你有好几个页面，这几个页面页头、页脚或者其他地方有些共同点，这些部分的代码每个页面都写，重复了啊，所以就放到layout.jade中，index.jade渲染的时候，会套用layout.jade这个layout中。比如你有另外一个页面叫about.jade，也可以套用layout.jade框框。

再简单一点，layout.jade就好比是相框，index.jade就是你想给用户看的照片，在呈现的时候，你的相片会放到相框里给用户。

layout就是模板框架，index只是其中的一个具体页面，可能有很多其他的具体页面，比如你有10个路由，那么就会有10个类似index的jade，但是如果他们的基本框架一致，那么有可能最后只有一个layout文件

谢谢回答 很详细

谢谢回答 明白了

在Node.js中，index.jade 和 layout.jade 的主要功能和用途是不同的。index.jade 通常用于定义特定页面的内容，而 layout.jade 通常用于定义整个应用的通用布局结构。

示例

layout.jade

layout.jade 文件通常包含应用的公共部分，如头部、底部、导航栏等。

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

index.jade

index.jade 文件则定义了具体的页面内容，并且通过 block content 将其嵌入到 layout.jade 中的相应位置。

extends layout

block content
  h1 欢迎来到我的网站
  p 这里是首页的内容。

解释

  • layout.jade 是一个模板文件，它定义了所有页面的公共部分（如头部、底部等）。
  • index.jade 是一个特定页面的模板文件，它继承自 layout.jade 并覆盖 layout.jade 中的 content 块。

这样做的好处是你可以避免重复编写相同的HTML结构，并且可以方便地更改应用的整体布局。

不同类型的页面

对于不同的页面（如关于页面、联系页面），你也可以创建多个 .jade 文件，每个文件都继承自 layout.jade，并覆盖相应的 content 块。

例如：

about.jade

extends layout

block content
  h1 关于我们
  p 这是我们网站的关于页面。

这样，你就可以通过简单地扩展 layout.jade 来创建新的页面，同时保持一致的布局。

回到顶部