Pug模板继承与拓展
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')本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录