首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用`pug`模板继承发出两次相同的块?

使用pug模板继承可以通过定义块(block)来实现代码的复用。如果需要发出两次相同的块,可以在父模板中定义一个块,然后在子模板中使用extends关键字继承父模板,并在需要发出两次的地方使用block关键字来引用该块。

以下是一个示例:

父模板(parent.pug):

代码语言:pug
复制
html
  head
    title My Website
  body
    block content

子模板(child.pug):

代码语言:pug
复制
extends parent.pug

block content
  h1 Welcome to My Website
  p This is some content.
  
extends parent.pug

block content
  h2 Another Section
  p This is another section of content.

在上面的示例中,子模板child.pug继承了父模板parent.pug,并在两个地方使用了block content来引用父模板中的块。这样就可以实现发出两次相同的块。

对于pug模板继承的更多信息和用法,可以参考腾讯云的pug模板引擎产品文档:pug 模板引擎

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Pug模板继承与拓展

Pug 支持使用 block 和 extends 关键字进行模板继承 block代表一个代码 一、代码替换 如下:便有三个代码block scripts,block content,block...') body block content block foot #footer p 一些页脚内容 如替换其中代码 在一个新pug文件中 ,首先要用...extends继承某个pug, 然后定义相同名称代码即可实现替换 extends layout.pug block scripts script(src='/jquery.js') script...在覆盖一个代码同时在该代码内添加新代码 //- sub-layout.pug extends layout.pug //- 覆盖原有的content代码,并添加了两个子代码 sidebar...下面代码实现了在 代码head里面添加了两个script //- page.pug extends layout.pug block append head script(src='/vendor

1.2K10
  • Pug学习

    理解 Pug是一款健壮、灵活、功能丰富HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。...Pug 保留符合以下条件元素内空格: 一行文本之中所有中间空格; 在缩进后开头空格; 一行末尾空格; 纯文本、或者连续管道文本行之间换行。 4....注释: //  单行注释  //-  非缓冲注释 //(换行) 给模板注释 …   条件注释 5. ...条件循环:if else 判断 和 case 判断 7. mixin混入 是一种允许您在 Pug 中重复使用一整个代码方法。...继承与扩展 解决是子文件和父文件之间代码复用问题,子文件代码可以覆盖和扩展父文件代码 //父文件.pug block test    代码1 //子文件.pug extends 父文件.pug

    1.1K10

    Express服务器开发

    作者 | Jeskson 来源 | 达达前端小酒馆 Express服务器开发 创建Express应用程序,Express路由,pug视图模板使用 Express简介: 让我们来创建Express应用程序...Express框架优点: 可以用中间件来响应HTTP请求,可以定义路由表用于执行不同HTTP请求,可以向模板传参数来动态渲染HTML页面。...,只用于获取数据 POST 用于将尸体提交到指定资源 HEAD 请求一个与GET相同响应,但没有响应体 PUT 用于请求有效载荷替换目标资源所有当前表示 DELETE 删除指定资源 CONNECT...视图模板 命令行下载: npm install pug pug.compile()将pug代码编译成一个JavaScript函数。...()模板函数: const pug = require('pug'); console.log(pug.renderFile('template.pug',{ name:'dada' }); 执行pug.renderFile

    1.9K20

    Vue进阶课堂之《从HTML到Pug

    或许你知道,有个东西叫emmet,它是解决了你写时候多写那些内容,但是并没有解决冗余代码行数,更不要提在你没有完全熟练使用emmet前,脑子里面需要进行大量预翻译!...那么是否有一种既能减少代码量,又能不做预翻译方案呢,呐呐呐,Jade这个后端模板出现了,然后改名叫Pug了,现在Vue也支持这个语法,具体请往下看。...如何使用 1. npm下载包 npm i -D pug pug-loader 2. lang这里改成pug使用 使用Pug、CoffeeScript、Sass...功力如何 1....Pug其他功能这里记得Pug是后端模板起家,所以功能肯定不单单是简化语法这么简单,她也有变量、混合、过滤等等等等功能,但是实际上这些功能在使用中跟Vue功能重复,我们搭建项目主要还是Vue,所以能用Vue

    64020

    Java编程思想第五版(On Java8)(十二)-集合

    稍后,在附录:集合主题中,还将学习到其余那些集合和相关功能,以及如何使用它们更多详细信息。...Collection 中方法(即 add() ),所以使用任何继承自 Collection 对象都可以正常工作。...或者假设想从一开始就编写一段通用代码,它不知道或不关心它正在使用什么类型集合,因此它可以用于不同类型集合,那么如何才能不重写代码就可以应用于不同类型集合?...使用组合,可以选择要公开方法以及如何命名它们。...虽然这可以通过继承 AbstractCollection 而很容易地实现,但是无论如何还是要被强制去实现 iterator() 和 size() 方法,这些方法 AbstractCollection 没有实现

    2.2K41

    【Vuejs】509- vue-loader工作原理

    } }} .example { color: red;} 这里有vue-loader提供许多炫酷功能 允许Vue组件每个部分使用其它webpack...加载器,比如Sass加载和Pug加载 允许.vue文件中自定义,这些(自定义)能够运用于定制加载程序链 将静态assets...这是整个过程简要概述 vue-loader使用@vue/component-compiler-utils将SFC源码解析成SFC描述符,然后为每个语言生成一个导入,实际返回模块代码看起来像这样...但是对于和,一些额外任务需要被执行: 我们需要使用Vue模板编译器编译模板 我们需要在css-loader之后但是在style-loader之前,为<style scoped...最终请求像下面这样: // import 'vue-loader/template-loader!pug-loader!source.vue?

    1.9K30

    模板方法模式

    前言 在上一篇文章责任链模式中提到了模板方法模式,因此这里简单介绍一下. 模板方法模式比较简单,或者说比较常用.在开发过程中,许多人在不知不觉情况下就会使用,只要他具有良好面对对象思维....比如当你写了Dog和Cat两个类,发现很多相同代码,你自然就会将相同模块提取抽象成父类,然后将一些公共方法放到父类中,这样子就基本实现了模板方式模式....具体模板: 继承父类具体方法,实现他们抽象方法,对于钩子方法,可以根据自身情况决定是都重写. 举个栗子 书上例子好多了,网络上也有很多,我自己临时瞎想一个吧,不保证一定合适....狗:准备,跑过去,发出声音,咬住 猫:准备,跳过去,咬住 但是这样子编码的话,我们将相同prepared和bite分别写了两次,这是不科学....而且当动物越来越多,代码总量会越来越少且容易维护,新添加一个动物,只需要继承动物模板,然后实现move和shout即可.

    33830

    NPM插件开发

    hexo api具体应用 编译stylus文件 stylus官方文档 编译pug文件 PUG官方文档 店长碎碎念 本文讨论npm插件化,针对是那种可以放在单独页面魔改,或者代码可以剥离出来...只需要更换挂载容器或者附加一些样式补丁,我们就能很轻易在其他主题也用上这些方案。 本文提供详细教程拆解和具体示例。 NPM插件发布 此部分内容已经在NPM图床使用技巧中进行过详细描述。...关于账户注册和插件发布部分本帖不会再详细展开。以下仅针对本地开发流程进行阐述。 教程拆解 逐步拆解新建过程。会大量用到diff代码。...开发模式基本同本帖所讨论模板方案。在涉及一些辅助函数时候也有详细注释。各位开发者可以选择适当内容作为参照。...动态生成css 页面生成式 单独页面生成模板 容器植入式 结合文章front-matter进行筛选,实现与postfront-matter联动 容器植入式 多主题适配,读取主题,自动加载容器

    53510

    Loading Animation

    开发记录 开发记录 2020-11-4:内测版v0.01 使用ejs模板 直接替换源码。 使用inject配置项来外挂css。 2020-11-5:内测版v0.02 修改为pug模板。...,这三行配合loading-js.pug控制加载动画显隐和背景色帷幕动画效果。...几个if判断机制与loading.pug类似,都是根据配置项来决定加载样式。且默认使用旋转盒子动画。...这个配置项最大作用是配合load_image使用图片背景色,可以用取色器提取自定义图片主要色调,以达到图片和背景融为一体效果。 load_style:控制加载动画样式,目前提供三种类型。...如示例一样,如果想要保留背景拉开帷幕效果,我们可以保留loading.pug前三行,在第四行与.loading-right-bg保持相同缩进来添加新页面元素。

    1.6K30

    小程序·云开发HTTP API调用丨实战

    主要核心文件 routes/base.js(api设置),util/rq.js(axios封装),views/base.pug(接口文档) |---bin (框架生成,服务启动命令文件夹) |-...|-------base.pug (自行添加pug模板页面,用于base接口说明) |-------index.pug |-------layout.pug |---app.js (框架生成,项目核心...'); // 使用 pug 模板 // 声明使用中间件 app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded...但如何解决说大都不明不白,或者未解决,或者解决了帖子未更新。 本人遇到该问题时,先是在官方社区搜索了相关提问,发现官方回复,在postman上尝试调用如果无恙请检查自身代码。...依言自行在postMan上自行查验一波,发现我不论如何变更入参格式依然是“47001”报错。

    3.4K62

    前端工程师为什么要学习编译原理?

    为了更好地理解编译器前端工作原理,本文将主要以目前被广泛使用 Babel 为例,阐述它是如何将源代码编译为目标代码。...模板引擎 再讲到模板引擎,最早诞生于服务端动态页面的开发,如 JSP、PHP、ASP 等模板引擎,自 Node.js 快速发展以后,前端界又产出了非常多轮子,包括 EJS、Handlebars、Pug...模板引擎实现方式有很多种,比较简单模板引擎,直接利用字符串替换、拼接方式实现,比较复杂模板引擎,例如 Pug,则会有比较完整词法分析和语法分析过程,将模板预编译成 JS 代码再去动态执行。...例如模板语句: h1 hello #{name} 经由 Pug 解析器生成 AST 如图 6 所示: ?...当然一个好模板引擎还会考虑功能、性能与安全兼备,上面的with语句是要避免,还要引入缓存机制,XSS 防范机制,以及更加强大、友好、易于使用语法糖。

    1.5K31

    前端二面经典vue面试题指南5

    其实就是一个子类构造器 是 Vue 组件核心 api 实现思路就是使用原型继承方法返回了 Vue 子类 并且利用 mergeOptions 把传入组件 options 和父类 options...然后这个组件你可以作用到Vue.component这个全局注册方法里还可以在任意vue模板使用组件。 也可以作用到vue实例或者某个组件中components属性中并在内部使用apple组件。...这样就实现了对 View 和 Model 解耦,Presenter 还包含了其他响应逻辑。Vue组件如何通信?...这次,loader将会关注那些有查询串请求,且仅针对特定,它会选中特定内部内容并传递给后面匹配loader对于,处理到这就可以了,但是 和 ...immediate:在初始化时直接调用回调函数,可以通过在 created 阶段手动调用回调函数实现相同效果diff算法答案</summary

    36030
    领券