Pug 支持使用 block 和 extends 关键字进行模板的继承
block代表一个代码块
一、代码块的替换
如下:便有三个代码块block scripts,block content,block foot
//- layout.pug
html
head
title 我的站点 - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p 一些页脚的内容
如替换其中的代码块
在一个新的pug文件中 ,首先要用extends继承某个pug, 然后定义相同名称的代码块即可实现替换
extends layout.pug
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
h1= title
- var pets = ['猫', '狗']
each petName in pets
include pet.pug
在覆盖一个代码块的同时在该代码块内添加新的代码块
//- sub-layout.pug
extends layout.pug
//- 覆盖原有的content代码块,并添加了两个子代码块 sidebar primary
block content
.sidebar
block sidebar
p 什么都没有
.primary
block primary
p 什么都没有
二、块内容的添补 append / prepend
prepend(向头部添加内容),或者 append(向尾部添加内容)一个块。
下面代码实现了在 代码块head里面添加了两个script
//- page.pug
extends layout.pug
block append head
script(src='/vendor/three.js')
script(src='/game.js')
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Pug模板继承与拓展]http://www.zyiz.net/tech/detail-130331.html