Pug 쓸때 TIP

Pug 는 html을 좀 더 예쁘게, 편리하게 쓸 수 있도록 도와주는 언어라고 할 수 있다.

1. <> 태그가 필요없다.

2. div.class_name은

.class_name으로 쓰기 가능하다.

3. 부모 자식관계는 indent로 표시한다.

doctype html

html

    head 

4. vsCode에서 자동완성을 지원하지 않는다.

5. <a href=""# class="yes"  attribute="123">링크</a> 같은 경우는

.yes

a(href="#", attribute="123")  링크

같이 표현한다.

각 속성을 ()로 감싸며, 콤마(,)로 구별한다.

6. Pug내에서 자바스크립트를 쓸 수 있다.

span.footer__text #{siteName} #{new Date().getFullYear()} &copy;

7. Pug에 Js에서 쓰던 인자를 전달 할 수 있다.

지역변수사용 : express controller에 res.render("pug사이트", {인자이름: "js에서 쓰던인자"})

전역변수사용 : express middleware 에 res.locals.전역변수이름 = 값

8. layout 템플릿을 만들 수 있다.

doctype html

html

    head 

        

        title #{pageTitle} | #{siteName}

    body

        

        include ../patials/header

        main

            block content

        include ../patials/footer

block content부분은  아래와 같이 다른 파일에서 사용가능하다.

extends layouts/main

block content

    p Hello Guys!

9. patial기능으로 일부분만 템플릿으로 사용할 수 있다.

footer

    .footer__icon

        i.fab.fa-youtube

    span.footer__text #{siteName} #{new Date().getFullYear()} &copy;

사용은 위에 include로 할 수 있다.