pug 설치
$ sudo npm i -g pug-cli
pug 실행
index.pug를 실행하면 index.html 파일이 생성됨.
$ pug index.pugpretty하게 컴파일링
$ pug index.pug -P
html 주의사항
doctype html과 html은 같은 들여쓰기에 있어야 한다.
// 올바른 예시
doctype html
html
head
title My First Pug Page!
body
h1 My First Pug Page!
// 잘못된 예시
doctype html
html
head
title My First Pug Page!
body
h1 My First Pug Page!
pug 저장 시 자동 컴파일
-w : watching
. : 현재 디렉토리에 있는 모든 파일
-o : output (출력)
./ : 현재 디렉토리에 출력
-P : prettier
$ pug -w . -o ./ -Psrc/index.pug만 dist폴더에 컴파일
$ pug -w src/index.pug -o dist줄바꿈
1. 파이프 기호
doctype html
html
head
title My First Pug Page!
body
h1
| My First
| Pug Page!!2. 점 (dot)
doctype html
html
head
title My First Pug Page!
body
h1.
My First
Pug Page!!
클래스와 아이디
div는 생략가능
// pug
main#main
h2.title This is the very best part of my page
.my-div-class
#my-div-id
#ugly.my-div.red.big
// html
<main id="main">
<h2 class="title">This is the very best part of my page</h2>
<div class="my-div-class"></div>
<div id="my-div-id"></div>
<div class="my-div red big" id="ugly"></div>
</main>
속성
속성은 소괄호()로 작성
doctype html
html
head
link(rel="stylesheet" href="css/style.css")
body
main
a#link(href="https://google.com")
a(href="https://google.com" id="link")
inline과 block
컴파일시 inline은 줄바꿈이 안되고, block은 줄바꿈이 된다.
// pug
doctype html
html
body
main
#ugly.my-div.red.big
a(href="https://google.com")
span.span
p.p
// html
<!DOCTYPE html>
<html>
<body>
<main>
<div class="my-div red big" id="ugly"></div><a href="https://google.com"></a><span class="span"></span>
<p class="p"></p>
</main>
</body>
</html>
include
index.pug
doctype html
html
head
meta(name="viewport" content="width=device-width,initial-scale=1")
title Acme Cleaning Service Ltd
link(rel="stylesheet" href="css/style.css")
body
include ../includes/nav
includes/nav.pug
.logo
img(src="images/logo3.png")
.topnav
ul.topnav-right
li
a(href="news.html") News
a(href="our-team.html") Our Team
a(href="contact.html") Contact
a(href="about-us.html") About Us
extends and block
layout의 block에는 default내용을 적어주고,
layout을 적용할 페이지에는 block 선언 후 변경할 내용 적어주면 대체 삽입됨.
layout.pug
doctype html
html
head
meta(name="viewport" content="width=device-width,initial-scale=1")
title Acme Cleaning Service Ltd
link(rel="stylesheet" href="css/style.css")
body
block nav
include ../includes/nav
block main
main
p This is the main part of the page
block footer
include ../includes/footer
news.pug
extends templates/layout
block main
main
h2 All Our Latest News
JavaScript in Pug: Variables(변수)
변수 설정 및 출력
- let firstName = "Richard"
- let lastName = "Stibbard"
- let fullName = `${firstName} ${lastName}`
p #{firstName}
p.first-name #{firstName}
#first-name #{firstName}
//- p = firstName은 안됨
p= firstName
p.first-name= firstName
#first-name= firstName
.full-name #{firstName} #{lastName}
.full-name= firstName + " " + lastName
.full-name= "이름: " + firstName + " 성: " + lastName
.full-name= `이름: ${firstName} 성: ${lastName}`
.full-name= fullNameJavaScript in Pug: Arrays, Objects and Iteration (배열, 객체와 반복)
arrays 예시
// 한 줄 작성시
- const names = ['Jemima Puddleduck', 'Frodo Baggins', 'Professor Snape', 'Winnie the Pooh']
// 여러 줄 작성시
-
const names = [
'Jemima Puddleduck',
'Frodo Baggins',
'Professor Snape',
'Winnie the Pooh'
]
// 여러 줄 작성시 아래는 에러
- const names = [
'Jemima Puddleduck',
'Frodo Baggins',
'Professor Snape',
'Winnie the Pooh'
]
ol
each name in names
li= name
objects 예시
-
const friendsList = [
{
'firstName':'Richard',
'lastName':'Stibbard',
'mobile': '07816 155467'
},
{
'firstName':'Mike',
'lastName': 'McTavish',
'mobile': '07432 224667'
},
{
'firstName':'Jenna',
'lastName': 'Smith',
'mobile': '07156 908762'
}
]
#friends-list-0
each friend in friendsList
.friend
.first-name= friend.firstName
.last-name= friend.lastName
.mobile= friend.mobile
#friend-list-1
each friend in friendsList
.friend= friend.firstName + " " + friend.lastName + " 핸드폰 번호 : " + friend.mobile
#friend-list-2
each friend in friendsList
.friend= `이름: ${friend.firstName} 성: ${friend.lastName} 핸드폰 번호: ${friend.mobile}`
#friend-list-3
each friend in friendsList
.friend
.first-name #{friend.firstName}
.last-name #{friend.lastName}
.mobile #{friend.mobile}
else
.no-friend You have no friends!
mixins
mixin friendCard(friend)
.friend
.first-name #{friend.firstName}
.last-name #{friend.lastName}
.mobile #{friend.mobile}
-
const friendsList = [
{
'firstName':'Richard',
'lastName':'Stibbard',
'mobile': '07816 155467'
},
{
'firstName':'Mike',
'lastName': 'McTavish',
'mobile': '07432 224667'
},
{
'firstName':'Jenna',
'lastName': 'Smith',
'mobile': '07156 908762'
}
]
.friends
each friend in friendsList
+ friendCard(friend)