Nodejs中jade模板如何实现div的嵌套

Nodejs中jade模板如何实现div的嵌套

11 回复

Nodejs中jade模板如何实现div的嵌套

Jade（现称为Pug）是一种简洁、清晰的模板引擎，常用于Node.js项目中生成HTML。通过使用缩进和简洁的语法，可以轻松地创建复杂的HTML结构，包括嵌套的<div>标签。

示例

假设我们需要创建一个包含多层嵌套<div>标签的HTML页面。我们将从简单的结构开始，并逐步增加嵌套层级。

基础结构

首先，我们创建一个最基本的HTML结构：

doctype html
html
  head
    title Jade 模板嵌套示例
  body
    div#container
      div.content

上述代码将生成以下HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Jade 模板嵌套示例</title>
  </head>
  <body>
    <div id="container">
      <div class="content"></div>
    </div>
  </body>
</html>

增加嵌套层级

现在，让我们增加一些嵌套的<div>标签来构建更复杂的结构：

doctype html
html
  head
    title Jade 模板嵌套示例
  body
    div#container
      div.content
        div.inner-content
          div.inner-most-content
            p 这是一个嵌套的段落。

上述代码将生成以下HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Jade 模板嵌套示例</title>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <div class="inner-content">
          <div class="inner-most-content">
            <p>这是一个嵌套的段落。</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

解释

  1. 缩进：Jade模板使用缩进来表示元素的嵌套关系。每增加一层嵌套，需要向右移动两个空格或一个制表符。
  2. 类与ID：可以为每个<div>标签指定类名（class）或ID（id），以便于CSS选择器定位和样式设置。
  3. 文本内容：可以直接在标签下方添加文本内容，如p 这是一个嵌套的段落。。

通过这种方式，你可以轻松地创建出具有任意层级嵌套的HTML结构。


描述清楚一点吧… Jade 语法不是默认有嵌套的?

比如我想实现下面的html代码：

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
<div class="container"> 
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</a> 
<a class="brand" href="/">Microblog</a> 
<div class="nav-collapse"> 
<ul class="nav"> 
<li class="active"><a href="/">首页</a></li> 
<li><a href="/login">登入</a></li> 
<li><a href="/reg">注册</a></li> 
</ul> 
</div> 
</div> 
</div> 
</div>

难道不是靠缩进的吗？我没用过，嘿嘿。

我用了缩进老师报错！！！

  .navbar
    .navbar_inner
      .container
        a
          span.icon-bar xx

你这是用什么缩进的啊？？？我用的editplus编写的按的tab缩进老报错啊！！！

谢谢大家啊！我用空格键当缩进就好了！！！

呃… 有报错的话贴一下报错 照说只有 tab 空格发生混用才会报错的

如果是新手而且对jade语法不熟悉的话，
可以直接用html2jade

Node.js 中 Jade 模板如何实现 div 的嵌套

在 Node.js 中使用 Jade（现在称为 Pug）模板引擎时，实现 div 的嵌套非常简单。你可以通过缩进的方式实现嵌套结构，这与 HTML 的层级结构非常相似。

示例代码

doctype html
html
  head
    title 我的网页
  body
    div#header
      h1 欢迎访问我的网站
    div#content
      p 这里是主要内容区域。
      div.inner-content
        p 这是更深层级的内容。
    div#footer
      p 版权所有 © 2023

解释

  • 使用缩进表示层级关系。
  • div#header 表示一个 div 元素，它有一个 id 属性为 header。
  • 嵌套的 div.inner-content 通过更多的缩进表示它位于 #content div 内部。
  • 每个标签之间不需要闭合标签，Jade/Pug 会自动处理这些细节。

输出结果

上述 Pug 模板将被渲染成如下的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <div id="header">
      <h1>欢迎访问我的网站</h1>
    </div>
    <div id="content">
      <p>这里是主要内容区域。</p>
      <div class="inner-content">
        <p>这是更深层级的内容。</p>
      </div>
    </div>
    <div id="footer">
      <p>版权所有 © 2023</p>
    </div>
  </body>
</html>

通过这种方式，你可以轻松地创建复杂的嵌套结构。

回到顶部