pug模板引擎（原jade）之 注释、条件、包含

pug 注释

复制代码
带输出的注释
// 一些内容
p foo
p bar

编译：
<!-- 一些内容-->
<p>foo</p>
<p>bar</p>

不带输出的注释
//- 这行不会出现在结果里
p foo
p bar

编译：
<p>foo</p>
<p>bar</p>


块注释
body
  //-
    给模板写的注释
    随便写多少字
    都没关系。
  //
    给生成的 HTML 写的注释
    随便写多少字
    都没关系。

编译：
<body>
  <!--给生成的 HTML 写的注释
随便写多少字
都没关系。-->
</body>
复制代码

 

pug 条件

复制代码
- var user = { description: 'foo bar baz' }
- var authorised = false
#user
  if user.description
    h2.green 描述
    p.description= user.description
  else if authorised
    h2.blue 描述
    p.description.
      用户没有添加描述。
      不写点什么吗……
  else
    h2.red 描述
    p.description 用户没有描述

编译：
<div id="user">
  <h2 class="green">描述</h2>
  <p class="description">foo bar baz</p>
</div>

注：
unless user.isAnonymous
等价
if !user.isAnonymous
复制代码

 

pug 包含

说明：包含（include）功能允许您把另外的文件内容插入进来。

复制代码
doctype html
html
  include includes/head.pug
  body
    h1 我的网站
    p 欢迎来到我这简陋得不能再简陋的网站。
    include includes/foot.pug
    script
      include script.js
复制代码

 

posted @   zmztyas  阅读(353)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
历史上的今天：
2016-05-18 泛型之Dictionary
点击右上角即可分享
微信分享提示