java 模板继承,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')

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[Pug模板继承与拓展]http://www.zyiz.net/tech/detail-130331.html