pug模板引擎

其實檔案結構啥的是為了業務邏輯更加清晰

index是主頁面,從default繼承.

default裡面也include了includes檔案裡的內容,乙個是css樣式link,乙個是js的原始檔script

extends

./layouts/
default
block title
title koa douban 首頁
block content 
.container
.row
.col-md-
8 h1 hi #
p this is #
.col-md-
4 p 測試動態 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

link

(fref=
"" rel=
'stylesheet'
)//- script(src='')
//- script(src='')

link

(fref=
"" rel=
'stylesheet'
)script
(src=
'')script
(src='')

const koa =

require
("koa"
)new
koa(
)// const = require("./tpl")
// const ejs = require("ejs")
const views =
require
("koa-views"
)const
=require
("path"
)use
(views
(resolve
(__dirname,
"./views"),
))use(
async
(ctx, next)
=>)}
)listen
(4455
)

前端學習 Pug模板

1.類名和id名 a.button a class button a button a id button 編譯後 如果前面沒指定標籤名，則預設div 2.屬性 用 包裹，屬性值之間用逗號隔開。可實現根據條件設定屬性的語法形式 atrributes 更方便新增自定義屬性 3.文字內容 a href ...

Pug模板繼承與拓展

pug 支援使用block和extends關鍵字進行模板的繼承 block代表乙個 塊 一 塊的替換 如下 便有三個 塊block scripts,block content,block foot layout.pug html head title 我的站點 block scripts scrip...

pug新手學習

感覺自己有段時間沒有跟新了,唉,只是一直找不到可以寫的必要 其實我一直對pug特別感興趣的,安裝點我 記得全域性安裝pug和pug cli就行了 在webstorm配環境記得在前面加 p a img內聯式語法 input 自閉合 button.btn.btn tt.btn aaa type butt...