jade include和extends、block

最新推荐文章于 2023-11-06 14:17:06 发布

申小远

最新推荐文章于 2023-11-06 14:17:06 发布

阅读量2.4k

点赞数

分类专栏： jade 文章标签： jade include extends

本文链接：https://blog.csdn.net/u013749068/article/details/78253114

版权

jade 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jade模板是MVC模型中的V--视图，可以编写网页文件，元素和HTML相同，基本使用就是将html中的标签尖括号去掉，如：

HTML：<p>这是HTML中的写法</p>

jade：p 这是jade中的写法

上述两种写法的显示效果相同

但是在jade中没有结束标签，浏览器或者说编译器（从jade编译输出成HTML）是怎么判断每个标签的结束范围呢

jade中采用的方法是缩进，子标签比父标签向后缩进两个空格，同一级别的缩进表示同一级别的元素

jade中的缩进很重要，而且容易出错，使用时要谨慎处理缩进

如：

doctype html
html
  head
    title 主页
    meta(charset='utf-8')
  body
      h1 This is login

上述代码会自动编译成

<!DOCTYPE html>
<html>
  <head>
    <title>主页</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is login</h1>
  </body>
</html>

在jade中还提供了两种使用外部jade的方法include和extends

include例子如下：

bodey.jade文件内容：

doctype html
html 
  include ./header.jade
  body
    h1 This is body

header.jade文件内容如下：

head
  title jade-include测试
  meta(charset='utf-8')

生成的HTML文件如下：

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include测试</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is body</h1>
  </body>
</html>

内容没错，注意代码中的缩进，在body.jade中使用include时，include是和body同级，因为此时直接把header.jade中的内容拿过来放在include位置（保持原有缩进）处，head会和body同级，但是在使用中如果把include顶个和html同级，在header文件中把所有的内容向后缩进两格，这样的结果是不行的，编译会出错，不知道为什么

另外在使用include时还有一个问题，就是吧head标签和html放在一起的时候，具体例子如下：

header中的内容：

doctype html
html 
  head
    title jade-include测试
    meta(charset='utf-8')

body中的内容：

include ./header.jade
  body
    h1 This is body

理论上讲此时body和head同级，会出现理想中的排版顺序，就像上面的正常顺序一样，但是最后生成的HTML如下：

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include测试
      <body>
        <h1>This is body</h1>
      </body>
    </title>
    <meta charset="utf-8">
  </head>
</html>

很明显不对，不是自己想要的，所以此方法不能取，但是为什么我也不知道，另外还有一种就是按照上面的错误来看是把body写成head的子元素了，那我们吧body中的标签向前取消两个空格缩进，看一下效果

<!DOCTYPE html>
<html> 
  <head>
    <title>jade-include测试</title>
    <meta charset="utf-8">
  </head>
</html>
<body>
  <h1>This is body</h1>
</body>

此时body又编程和html同级别的元素，所以此方法也不能用

entends：

我们使用entends和block语法试试

hearder中内容如下：

doctype html
html
  head
    title 主页
    meta(charset='utf-8')
  block body

body中的内容：

extends header.jade
block body
  body
    h1 This is login

注意看语法的使用方法其中的缩进，header中block放在和head同一级别中，因为在body中的第一个标签是body，是要和head同级的

在body中block放在顶格位置，因为此位置是要把整个header中的元素拿过来放在这，之后就是html第一级，head和body同为第二级

extends 相当于是导入此header文件到body中

最后生成的HTML内容如下：

<!DOCTYPE html>
<html>
  <head>
    <title>主页</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>This is login</h1>
  </body>
</html>

申小远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jade include和extends、block

jade模板是MVC模型中的V--视图，可以编写网页文件，元素和HTML相同，基本使用就是将html中的标签尖括号去掉，如：HTML：这是HTML中的写法jade：p 这是jade中的写法上述两种写法的显示效果相同但是在jade中没有结束标签，浏览器或者说编译器（从jade编译输出成HTML）是怎么判断每个标签的结束范围呢jade中采用的方法是缩进，子标签比父标签向后缩进两个空
复制链接

扫一扫