pug模板引擎基本用法

一、pug模板引擎基本用法

Pug是jade的新版，jade由于商标已被注册，所以更名为pug。

缩进标注：Pug模板和大多数模板不同，它有自己的语法特点，采用缩进的方式进行标注，使用这种方式，使得代码更加清晰。
无尾标签：这种语法不需要类似 /html 这样的尾标签。
文本书写：在标签后 +空格+内容的方式进行书写文本，例如下面代码中 h1后跟的 website即为标题名文本。
属性添加：在标签后用()括号对属性进行编写。

   //views文件夹下index.pug文件htmlheadtitle Homelink(rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css")script(src="/lib/bootstrap/dist/js/bootstrap.min.js")styleinclude myStyle.cssbodydiv(class='container')h1 website div(class='row')div(class='col') column1div(class='col') column2div(class='col') column3script include myScript.js

引入方式：
- 自编写文件：使用include +文件名对文件进行引入。
- 第三方包文件：在服务器上通过nodejs结合express方式，使用app.use引入中间件。(此处例子导入bootstrap，需提前安装—— 在命令行通过npm install bootstrap进行安装)

     //server.js文件const express = require('express')const app = express()const expressPort = 3000app.listen(3000, () => {console.log(`App listening on port ${expressPort}`);})app.set('view engine','pug');//通过app.set方式让pug进入node项目中//app.set('views','./views')，pug默认地址会在一个叫views的文件夹里app.use('/lib/bootstrap',express.static('node_modules/bootstrap/dist'))//use方法作用：即引入一个所谓的中间件(将工作目录中动态文件变成静态文件提供给服务器)//引用提前安装好的bootstrap(npm init bootstrap)//'/lib/bootstrap'是一个虚拟地址，并不存在这个文件夹，但是可以通过这个路径对bootstrap文件进行访问。app.get('/',(req,res)=>{res.render('index');})

传参方式：具体为在后端代码中与pug模板引擎的传参方式。

在server.js后端代码中准备好传参数据：

   app.get('/',(req,res)=>{const options={name:'WangJunjie',age:'21'}res.render('index',options);   //options为传入参数，直接在统一作用域中进行调用})

在index.pug文件中进行使用（通过 #{ } 的方式）：

       bodydiv(class='container')h1 #{name}'s website //通过#{参数内部属性名}方式div(class='row')div(class='col') column1div(class='col') column2div(class='col') column3script

这样就拿到了后端中的name数据，将name数据渲染到.pug文件上了。

同时，可以通过 script.的方式，将后端代码中的变量赋值给前端代码：

 bodydiv(class='container')h1 website div(class='row')div(class='col') column1div(class='col') column2div(class='col') column3script.const name = '#{name}';const age = '#{age}';script include myScript.js

特殊字符：

“|” ，|后的字符会被原样输出。
“.” ，.表示下一级的所有字符都会被原样输出，不再被识别。是|的升级版，实现批量处理。

参考链接：

入门指南—Pug模板引擎中文文档
如何在后端生成html页面

2021.5.18

pug模板引擎基本用法相关推荐

Node.js(二)——pug模板引擎，nunjucks模板引擎，在koa中使用pug和nunjucks模板引擎
目录 1.知识点及课堂目标 2.模板引擎 3.pug模板引擎使用 3.1安装pug 3.2pug常用语法 3.2.1通过缩进关系,代替以往html的层级包含关系. 3.2.2html 元素属性/sty ...
spring boot模板引擎thymleaf用法详解
spring boot模板引擎thymleaf用法详解 Spring-boot支持FreeMarker.Thymeleaf.jsp.veocity 但是对freemarker和thymeleaf的支持 ...
pug模板引擎(原jade)
前面的话为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致 ...
pug模板引擎——jade
随着前端项目工程化的发展,代码结构越来越复杂,代码却越来越简单,为了将更多的精力集中在业务功能上面,对页面的快速构建需求日益剧增,同js.css一样,html也出现了各种各样的工具,即模板引擎,本文不 ...
前端模板引擎 —— 带你学习Jade / Pug 模板引擎
模板引擎是什么模板引擎是将静态部分糅合的一种实现机制或者技术. 目前使用较广的模板引擎有以下几种:Jade / Pug.EJS.Handlebars. 本文详述Jade / Pug模板引擎在项目开发 ...
koa + pug模板引擎
模板引擎模板引擎:模板引擎是web应用中动态生成html的工具,负责将数据和模板结合. 常见模板引擎有:ejs.jade(现更名为pug).Handlebars.Nunjucks.Swig等: 使用 ...
Jade/Pug模板引擎
1.概述: Jade是一款基于haml的HTML的模板引擎,采用JavaScript实现,可以方便的在Node.js.Yeoman等框架中使用,已改名为pug. 2.全局安装: npm install ...
github项目学习--Vue结合Pug模板引擎
今天看到github上面一个vue项目,用的是Pug模板写的,很多人不知道Pug是什么,但要说到jade,相信很多人反应过来了.没错,Pug前身就叫jade,但是由于商标等问题,改名为Pug,当然,语 ...
lang=pug模板引擎之pug模板语法
今天看到同事的项目 <template lang="pug"> .d-flex.align-center.line-progressdiv(style='width: ...

pug模板引擎基本用法

一、pug模板引擎基本用法

参考链接：

pug模板引擎基本用法相关推荐

最新文章

热门文章