pug模板引擎基本用法

一、pug模板引擎基本用法

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

  1. 缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代码更加清晰。

  2. 无尾标签:这种语法不需要类似 /html 这样的尾标签。

  3. 文本书写:在标签后 +空格+内容 的方式进行书写文本,例如下面代码中 h1后跟的 website即为标题名文本。

  4. 属性添加:在标签后用()括号对属性进行编写。

   //views文件夹下index.pug文件
   html
       head
           title Home
           link(rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css")
           script(src="/lib/bootstrap/dist/js/bootstrap.min.js")
           style
           	include myStyle.css
       body
           div(class='container')
               h1 website 
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script 
           	include myScript.js

在这里插入图片描述

  1. 引入方式

    • 自编写文件:使用include +文件名对文件进行引入。

    • 第三方包文件:在服务器上通过nodejs结合express方式,使用app.use引入中间件。(此处例子导入bootstrap,需提前安装—— 在命令行通过npm install bootstrap进行安装)

     //server.js文件
     const express = require('express')
     const app = express()
     const expressPort = 3000
     
     app.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');
     })
  1. 传参方式:具体为在后端代码中与pug模板引擎的传参方式。

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

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

​ 在index.pug文件中进行使用(通过 #{ } 的方式):

       body
           div(class='container')
               h1 #{name}'s website //通过#{参数内部属性名}方式
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script 

在这里插入图片描述

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

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

 body
           div(class='container')
               h1 website 
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script.
           	const name = '#{name}';
           	const age = '#{age}';
           script 
           	include myScript.js
  1. 特殊字符
  • “|” ,|后的字符会被原样输出。
  • “.” ,.表示下一级的所有字符都会被原样输出,不再被识别。是|的升级版,实现批量处理。
参考链接:

2021.5.18

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值