pug模板引擎

最新推荐文章于 2025-06-05 16:11:58 发布

原创最新推荐文章于 2025-06-05 16:11:58 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

nodejs 专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了Pug模板引擎的文件结构，包括index.pug（主页面）、default.pug（基模板）、style.pug和script.pug分别处理CSS样式和JS脚本。index.js用于渲染页面，通过default.pug的继承和includes来组织内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件结构

其实文件结构啥的是为了业务逻辑更加清晰
在这里插入图片描述
index是主页面,从default继承.
default里面也include了includes文件里的内容,一个是css样式link,一个是js的源文件script

index.pug

extends ./layouts/default

block title
    title Koa douban 首页

block content  
    .container
    .row
    .col-md-8
        h1 hi #{you}
        p this is #{me}
    .col-md-4
       p 测试动态 pug 模板引擎

default.pug

doctype html
html
head
    meta(charset="utf-8")
    mate(name='viewport',content='width=device-width,initial-scale=1')
    block title 
    include ../includes/style
    body
    block content
    include ../includes/script

style.pug

link(fref="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel='stylesheet')
//- script(src='https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js')
//- script(src='https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js')

script.pug

link(fref="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel='stylesheet')
script(src='https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js')
script(src='https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js')

index.js渲染页面

const koa = require("koa")

const app = new koa()

// const {normal} = require("./tpl")

// const ejs = require("ejs")

const views = require("koa-views")

const { resolve } = require("path")

app.use(views(resolve(__dirname,"./views"),{
    extension:"pug" //只要是后缀名为pug的就会识别为模板文件
}))

app.use(async (ctx, next) => {
  await ctx.render("index",{
      you:"zhangyue",
      me:"yuezhang"
  })
})

app.listen(4455)