网页模板pug基本语法

最新推荐文章于 2024-06-25 11:10:30 发布

weixin_34121282

最新推荐文章于 2024-06-25 11:10:30 发布

阅读量2.9k

点赞数 2

文章标签： javascript c/c++ python ViewUI

原文链接：https://juejin.im/post/5b8aa21251882542b60ebe80

版权

本文介绍了Pug模板引擎的基本语法，包括安装、缩进、注释、属性、包含、继承、定义变量、条件结构、迭代、Mixins、JavaScript支持以及在Hexo中的应用。Pug以其简洁的语法提高了网站开发效率，支持代码复用，适合快速开发和静态博客设计。

摘要由CSDN通过智能技术生成

该博客首发于www.litreily.top

Pug – robust, elegant, feature rich template engine for Node.js

pug原名jade,因版权问题更名为pug,即哈巴狗。与hexo默认模块ejs一样，pug也是一个模板引擎，可用于快速的网站开发，当然也可以用于静态博客网站的设计。本站点现时所用主题manupassant也使用了pug。

本文针对Hexo中使用pug的情况为例，说明其基本语法。

# common install
npm install pug

# install for hexo blog
npm install hexo-renderer-pug --save
复制代码

pug不同于html，前者不需要标签的开和闭，如html的<p>Demo</p>，在pug使用p Demo即可。

pug对空格敏感，有点类似python对制表符tab敏感。pug使用空格作为缩进符，当然用soft tab也可行。同一级标签需保证左对齐。

div
    p Hello, world!
    p Hello, pug.
复制代码

渲染结果如下：

<div>
    <p>Hellow, world!</p>
    <p>Hello, pug.</p>
</div>
复制代码

pug使用//-或//对代码进行注释，前者注释内容不出现在渲染后的html文件中，后者反之。

//- html中不包含此行
// html中会包含此行
复制代码

pug将标签属性存放于括号()内，多个属性之间以逗号或空格分隔。此外，对于标签的id和class，pug使用#紧跟标签id,使用.紧跟标签class，可以同时设置多个class。

h1#title Test title
img#name.class1.class2(src="/test.png" alt="test")
复制代码

↓

<h1 id="title">Test title</h1>
<img

关注